Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="352.802px" height="343.472px" viewBox="0 0 352.802 343.472"
	 style="overflow:visible;enable-background:new 0 0 352.802 343.472;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#57D9A3;}
	.st1{fill:#00CCFF;}
	.st2{fill:#FFC400;}
	.st3{fill:#FF5630;}
	.st4{fill:#091E42;}
	.st5{fill:#FFFFFF;}
	.st6{fill:#FFCCCC;}
</style>
<defs>
</defs>
<path id="state21" class="st0" d="M99.264,197.325c-4.023,1.453-52.296-3.931-52.296-3.931l-17.036-78.626l68.022,32.761
	C97.954,147.528,103.287,195.871,99.264,197.325z"/>
<g>
	<path id="state22" class="st0" d="M85.337,163.187c0,0-23.909,34.631-50.682,29.439C7.883,187.432,5.999,80.629,5.999,80.629
	l78.028,32.761L85.337,163.187z"/>
</g>
<path id="state31" class="st0" d="M253.538,197.325c4.023,1.453,52.296-3.931,52.296-3.931l17.036-78.626l-68.022,32.761
	C254.848,147.528,249.514,195.871,253.538,197.325z"/>
<g>
	<path id="state32" class="st0" d="M267.464,163.187c0,0,23.909,34.631,50.682,29.439c26.773-5.193,28.657-111.996,28.657-111.996
	l-78.027,32.76L267.464,163.187z"/>
</g>
<path id="state11" class="st1" d="M286.482,154.695c4.219-9.896,6.52-20.531,6.52-31.609c0-52.849-52.204-95.691-116.601-95.691
	S59.8,70.238,59.8,123.087c0,11.078,2.301,21.713,6.52,31.609c-19.559,19.902-31.276,45.211-31.276,72.769
	c0,64.069,63.288,116.007,141.357,116.007s141.357-51.938,141.357-116.007C317.758,199.906,306.04,174.597,286.482,154.695z"/>
<path id="state12" class="st1" d="M66.32,216.172c-4.219,9.896-6.52,20.531-6.52,31.609c0,52.849,52.204,95.691,116.601,95.691
	s116.601-42.842,116.601-95.691c0-11.078-2.301-21.713-6.52-31.609c19.559-19.902,31.276-45.211,31.276-72.769
	c0-64.069-63.288-116.007-141.357-116.007S35.044,79.334,35.044,143.403C35.044,170.961,46.761,196.27,66.32,216.172z"/>
<path id="state41" class="st2" d="M213.005,115.174c0,13.552-16.388,24.538-36.604,24.538s-36.604-10.986-36.604-24.538
	s16.388-23.537,36.604-23.537S213.005,101.622,213.005,115.174z"/>
<path id="state42" class="st2" d="M170.723,172.732c0,8.289-16.388,15.009-36.604,15.009s-36.604-6.72-36.604-15.009s16.388-14.009,36.604-14.009
	S170.723,164.443,170.723,172.732z"/>
<path id="state51" class="st3" d="M189.505,126.607c0,7.237-5.867,13.104-13.104,13.104c-7.237,0-13.104-5.867-13.104-13.104
	c0-7.237,5.867-12.104,13.104-12.104C183.638,114.503,189.505,119.37,189.505,126.607z"/>
<path id="state52" class="st3" d="M140.671,172.732c0,7.237-2.934,13.104-6.552,13.104s-6.552-5.867-6.552-13.104
	c0-7.237,2.934-12.104,6.552-12.104S140.671,165.495,140.671,172.732z"/>
<path id="state61" class="st2" d="M213.005,167.594c0,13.552-16.388,24.538-36.604,24.538s-36.604-10.986-36.604-24.538
	s16.388-22.537,36.604-22.537S213.005,154.042,213.005,167.594z"/>
<path id="state62" class="st2" d="M258.345,172.732c0,8.289-16.388,15.009-36.604,15.009s-36.604-6.72-36.604-15.009s16.388-14.009,36.604-14.009
	S258.345,164.443,258.345,172.732z"/>
<path id="state81" class="st4" d="M242.217,281.726c0,15.745-29.467,19.767-65.816,19.767s-65.816-4.022-65.816-19.767
	s29.467-37.251,65.816-37.251S242.217,265.981,242.217,281.726z"/>
<path id="state82" class="st4" d="M241.852,231.695c0,15.745-29.467,49.786-65.816,49.786s-65.816-34.041-65.816-49.786
	s29.467,12.78,65.816,12.78S241.852,215.95,241.852,231.695z"/>
<path id="state71" class="st3" d="M189.505,179.027c0,7.237-5.867,13.104-13.104,13.104c-7.237,0-13.104-5.867-13.104-13.104
	c0-7.237,5.867-12.104,13.104-12.104C183.638,166.924,189.505,171.79,189.505,179.027z"/>
<path id="state72" class="st3" d="M227.437,172.732c0,7.237-2.934,13.104-6.552,13.104c-3.619,0-6.552-5.867-6.552-13.104
	c0-7.237,2.934-12.104,6.552-12.104C224.503,160.629,227.437,165.495,227.437,172.732z"/>
<path id="state91" class="st3" d="M202.007,282.478c0,7.237-11.464,13.104-25.606,13.104c-14.142,0-25.606-5.867-25.606-13.104
	s10.464-12.104,24.605-12.104S202.007,275.241,202.007,282.478z"/>
<path id="state92" class="st3" d="M187.786,188.421c-0.436-12.713-4.681-22.693-9.856-22.693c-5.175,0-9.42,9.979-9.856,22.693
	c-5.192,5.277-8.643,13.538-8.643,18.208c0,5.722,5.179,4.333,12.396,3.501c1.682,3.316,3.8,5.298,6.104,5.298
	c2.304,0,4.422-1.983,6.104-5.298c7.217,0.833,12.395,2.221,12.395-3.501C196.429,201.959,192.978,193.698,187.786,188.421z"/>
<path id="state101" class="st5" d="M150.479,247.29 157.283,264.273 166.71,244.955 "/>
<path id="state102" class="st5" d="M147.432,238.284 154.236,262.272 163.663,242.954 "/>
<path id="state111"class="st5" d="M202.323,247.29 195.518,264.273 186.091,244.955 "/>
<path id="state112"class="st5" d="M204.642,238.284 197.838,262.272 188.41,242.954 "/>

<g>
	<path id="state121"class="st4" d="M175.708,78.729c-12.996,0-23.7-2.862-25.162-6.549c-0.112,0.388-0.177,0.781-0.177,1.181
		c0,5.599,11.345,10.138,25.339,10.138s25.339-4.539,25.339-10.138c0-0.4-0.064-0.793-0.177-1.181
		C199.408,75.867,188.703,78.729,175.708,78.729z"/>
</g>
<g>
	<path id="state122"class="st4" d="M220.884,135.231c-12.996,0-23.7-2.862-25.162-6.549c-0.112,0.388-0.177,0.781-0.177,1.181
		c0,5.599,11.345,10.138,25.339,10.138s25.339-4.539,25.339-10.138c0-0.4-0.064-0.793-0.177-1.181
		C244.584,132.368,233.88,135.231,220.884,135.231z"/>
</g>
<g>
	<path id="state131"class="st4" d="M175.708,67.411c-12.996,0-23.7-2.862-25.162-6.549c-0.112,0.388-0.177,0.781-0.177,1.181
		c0,5.599,11.345,10.138,25.339,10.138s25.339-4.539,25.339-10.138c0-0.4-0.064-0.793-0.177-1.181
		C199.408,64.549,188.703,67.411,175.708,67.411z"/>
</g>
<g>
	<path id="state132"class="st4" d="M131.189,135.231c-12.996,0-23.7-2.862-25.162-6.549c-0.112,0.388-0.177,0.781-0.177,1.181
		c0,5.599,11.345,10.138,25.339,10.138s25.339-4.539,25.339-10.138c0-0.4-0.064-0.793-0.177-1.181
		C154.889,132.368,144.184,135.231,131.189,135.231z"/>
</g>
<g>
	<path id="state141"class="st6" d="M185.407,28.396h-2c0-1.937,1.342-2.891,2.421-3.657c1.008-0.716,1.579-1.164,1.579-2.026
		c0-0.863-0.571-1.31-1.579-2.026c-1.079-0.767-2.421-1.72-2.421-3.657c0-1.936,1.342-2.889,2.421-3.655
		c1.009-0.716,1.579-1.163,1.579-2.024c0-0.86-0.57-1.306-1.579-2.021c-1.079-0.766-2.421-1.718-2.421-3.653
		c0-1.936,1.343-2.889,2.421-3.654c1.008-0.716,1.579-1.162,1.579-2.023h2c0,1.936-1.342,2.888-2.421,3.654
		c-1.009,0.716-1.579,1.163-1.579,2.023c0,0.86,0.57,1.306,1.579,2.021c1.079,0.766,2.421,1.718,2.421,3.653
		c0,1.937-1.342,2.89-2.421,3.655c-1.008,0.716-1.579,1.163-1.579,2.024c0,0.862,0.571,1.31,1.579,2.026
		c1.079,0.767,2.421,1.72,2.421,3.657s-1.342,2.891-2.421,3.657C185.978,27.086,185.407,27.534,185.407,28.396z"/>
</g>
<path id="state142"class="st6" d="M202.606,23.812c0,4.464-5.983,8.083-13.364,8.083s-13.364-3.619-13.364-8.083s5.983-7.082,13.364-7.082
	S202.606,19.348,202.606,23.812z"/>
<g>
	<path id="state151"class="st6" d="M175.401,28.396h-2c0-1.937,1.342-2.891,2.421-3.657c1.008-0.716,1.579-1.164,1.579-2.026
		c0-0.863-0.571-1.31-1.579-2.026c-1.079-0.767-2.421-1.72-2.421-3.657c0-1.936,1.342-2.889,2.421-3.655
		c1.009-0.716,1.579-1.163,1.579-2.024c0-0.86-0.57-1.306-1.579-2.021c-1.079-0.766-2.421-1.718-2.421-3.653
		c0-1.936,1.343-2.889,2.421-3.654c1.008-0.716,1.579-1.162,1.579-2.023h2c0,1.936-1.342,2.888-2.421,3.654
		c-1.009,0.716-1.579,1.163-1.579,2.023c0,0.86,0.57,1.306,1.579,2.021c1.079,0.766,2.421,1.718,2.421,3.653
		c0,1.937-1.342,2.89-2.421,3.655c-1.008,0.716-1.579,1.163-1.579,2.024c0,0.862,0.571,1.31,1.579,2.026
		c1.079,0.767,2.421,1.72,2.421,3.657s-1.342,2.891-2.421,3.657C175.972,27.086,175.401,27.534,175.401,28.396z"/>
</g>
<path id="state152"class="st6" d="M189.765,32.98c0,4.464-5.983,7.082-13.364,7.082s-13.364-2.618-13.364-7.082s5.983-8.083,13.364-8.083
	S189.765,28.517,189.765,32.98z"/>
<g>
	<path id="state161"class="st6" d="M165.395,28.396h-2c0-1.937,1.342-2.891,2.421-3.657c1.008-0.716,1.579-1.164,1.579-2.026
		c0-0.863-0.571-1.31-1.579-2.026c-1.079-0.767-2.421-1.72-2.421-3.657c0-1.936,1.342-2.889,2.421-3.655
		c1.009-0.716,1.579-1.163,1.579-2.024c0-0.86-0.57-1.306-1.579-2.021c-1.079-0.766-2.421-1.718-2.421-3.653
		c0-1.936,1.343-2.889,2.421-3.654c1.008-0.716,1.579-1.162,1.579-2.023h2c0,1.936-1.342,2.888-2.421,3.654
		c-1.009,0.716-1.579,1.163-1.579,2.023c0,0.86,0.57,1.306,1.579,2.021c1.079,0.766,2.421,1.718,2.421,3.653
		c0,1.937-1.342,2.89-2.421,3.655c-1.008,0.716-1.579,1.163-1.579,2.024c0,0.862,0.571,1.31,1.579,2.026
		c1.079,0.767,2.421,1.72,2.421,3.657s-1.342,2.891-2.421,3.657C165.965,27.086,165.395,27.534,165.395,28.396z"/>
</g>
<path id="state162"class="st6" d="M176.923,23.812c0,4.464-5.983,8.083-13.364,8.083c-7.381,0-13.364-3.619-13.364-8.083
	s5.983-7.082,13.364-7.082C170.94,16.73,176.923,19.348,176.923,23.812z"/>
<path class="st5" d="M178.037,222.432"/>
</svg>

              
            
!

CSS

              
                body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #091E42;
}

svg {
  width: 60vh;
  height: 60vh;
}
#state12,
#state22,
#state32,
#state42,
#state52,
#state62,
#state72,
#state82,
#state92,
#state102,
#state112,
#state122,
#state132,
#state142,
#state152,
#state162 {
  visibility:hidden;
}
              
            
!

JS

              
                TweenMax.to("#state11", 1, {morphSVG:"#state11", delay:1});
TweenMax.to("#state11", 1, {morphSVG:"#state12", delay:1, ease:'elastic.out(1, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state21", 1, {morphSVG:"#state22", delay:1.1, ease:'elastic.out(1.8, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state31", 1, {morphSVG:"#state32", delay:1.1, ease:'elastic.out(1, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state41", 1, {morphSVG:"#state42", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state51", 1, {morphSVG:"#state52", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state61", 1, {morphSVG:"#state62", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state71", 1, {morphSVG:"#state72", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state81", 1, {morphSVG:"#state82", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state91", 1, {morphSVG:"#state92", delay:1.2, ease:'elastic.out(.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state101", 1, {morphSVG:"#state102", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state111", 1, {morphSVG:"#state112", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state121", 1, {morphSVG:"#state122", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state131", 1, {morphSVG:"#state132", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state141", 1, {morphSVG:"#state142", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state151", 1, {morphSVG:"#state152", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});
TweenMax.to("#state161", 1, {morphSVG:"#state162", delay:1.2, ease:'elastic.out(1.5, .25)', yoyoEase:Power2.easeOut,  repeat:-1, repeatDelay:0.1});


              
            
!
999px

Console