Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <style></style>
  </defs>
  <path id="shape1" d="M239.3719400002924,107.43915000007837 C246.98953000016627,114.30160000015981 252.62701000011177,126.19903000010993 250.18958000005924,137.49249000003678 247.8801300000085,148.48021999995925 237.4476300000341,156.3406499998376 228.16658000013095,162.30937999987276 217.50603000018162,170.1930799999414 210.8910800003307,178.72313000014168 204.51414000039688,190.49122000017437 198.2065600004606,202.1957300002093 192.16533000034863,216.97096000015736 179.57678000031737,220.21173000006587 166.35756000026595,223.2855199999828 154.39862000031164,212.36502999986405 141.06161000030232,207.51995999983978 119.53490000026534,199.5942199997953 93.24449000015971,209.16908000000288 73.9745400001551,197.28595999990125 64.247430000155,191.31783999985083 58.44732000022661,181.2280199997523 51.14015000019106,172.32003999975043 43.08180000014138,162.66734999973212 33.80341999997152,156.74820999979625 24.772829999862005,149.2463499998243 15.57039999975823,140.6131699998921 4.695919999741019,128.50983999987133 4.847659999846947,115.6282999998494 4.700779999948573,104.02655999984593 12.137090000124882,94.80335999993608 22.701550000164424,89.61223000001978 33.44964000019711,84.12921000011382 47.53689000014332,83.83688000010326 58.530720000118016,77.31476000011433 71.95504000000656,69.40833000017446 78.28609000001218,49.38904000035487 79.66999999969266,41.039160000323314 76.58032999947784,30.46233000021544 84.61790999941411,19.875649999991293 96.78368999941391,11.751429999888641 109.41342999939691,3.589639999787323 127.30004999948316,0.7474099998699968 140.01894999948215,6.634330000031041 151.68556999946594,11.663830000179587 161.04942999935594,23.155180000362456 173.689699999413,28.234290000280595 185.76720999947867,32.861920000212265 194.5725699996401,27.846429999939865 203.07445999983466,32.61627999985125 210.80847000001813,37.2765899997612 213.85641000016707,49.87866999979481 217.20277000023634,61.822659999795725 222.40484000033234,77.95443999985699 230.26993000033428,94.81738999989233 239.3719400002924,107.43915000007837 z" ></path>
  <path id="shape2" d="M71,50.16c-9.15-13.62-2.9-30.52,9.25-41.55s32.48-11.53,45.16-1.1c11.21,9.22,17.47,25.87,31.72,28.64,13.93,2.7,27.29-10,41.28-7.73,12.91,2.13,20.16,15.68,25.46,27.64l23.75,53.59c4.06,9.16,8.16,19.65,4.24,28.88-3.74,8.8-13.45,13.23-20,20.19-9.23,9.82-11.64,24-16.15,36.69s-13.71,26-27.18,26.66c-14.67.73-25.34-13.54-38.94-19.07-22.57-9.18-51.84,6.25-71.24-8.5-9.73-7.39-13.51-20.26-21.82-29.22C47.07,155.11,33,151,20.88,144.29S-2.61,124.88.53,111.38C3.25,99.68,15.66,93,27.34,90.17s24.24-3.42,34.52-9.63S78.63,59.4,71,50.16Z"></path>
  <path id="shape3" d="M219.08,102c16.37,1.21,25.79,16.57,27,32.94s-11,32.67-27,36.2c-14.18,3.12-31.14-2.24-42.11,7.26-10.73,9.28-9,27.66-19.42,37.24-9.65,8.84-24.78,6.17-37.47,3L63.21,204.14c-9.72-2.47-20.49-5.72-25.33-14.5-4.61-8.38-2.1-18.75-3.53-28.2-2-13.33-11.68-24-18.88-35.36s-12-26.84-4.18-37.84c8.48-12,26.3-11.56,39.05-18.85C71.5,57.3,77.44,24.76,101,18.6c11.82-3.09,24.28,1.88,36.46.88,13.81-1.13,25.71-9.71,38.5-15S205.75-2,214.43,8.76c7.52,9.37,5.12,23.26.12,34.18S202.26,64.12,200.8,76,207.07,102.29,219.08,102Z"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <style></style>
  </defs>
  <path id="shape4" d="M239.3719400002924,107.43915000007837 C246.98953000016627,114.30160000015981 252.62701000011177,126.19903000010993 250.18958000005924,137.49249000003678 247.8801300000085,148.48021999995925 237.4476300000341,156.3406499998376 228.16658000013095,162.30937999987276 217.50603000018162,170.1930799999414 210.8910800003307,178.72313000014168 204.51414000039688,190.49122000017437 198.2065600004606,202.1957300002093 192.16533000034863,216.97096000015736 179.57678000031737,220.21173000006587 166.35756000026595,223.2855199999828 154.39862000031164,212.36502999986405 141.06161000030232,207.51995999983978 119.53490000026534,199.5942199997953 93.24449000015971,209.16908000000288 73.9745400001551,197.28595999990125 64.247430000155,191.31783999985083 58.44732000022661,181.2280199997523 51.14015000019106,172.32003999975043 43.08180000014138,162.66734999973212 33.80341999997152,156.74820999979625 24.772829999862005,149.2463499998243 15.57039999975823,140.6131699998921 4.695919999741019,128.50983999987133 4.847659999846947,115.6282999998494 4.700779999948573,104.02655999984593 12.137090000124882,94.80335999993608 22.701550000164424,89.61223000001978 33.44964000019711,84.12921000011382 47.53689000014332,83.83688000010326 58.530720000118016,77.31476000011433 71.95504000000656,69.40833000017446 78.28609000001218,49.38904000035487 79.66999999969266,41.039160000323314 76.58032999947784,30.46233000021544 84.61790999941411,19.875649999991293 96.78368999941391,11.751429999888641 109.41342999939691,3.589639999787323 127.30004999948316,0.7474099998699968 140.01894999948215,6.634330000031041 151.68556999946594,11.663830000179587 161.04942999935594,23.155180000362456 173.689699999413,28.234290000280595 185.76720999947867,32.861920000212265 194.5725699996401,27.846429999939865 203.07445999983466,32.61627999985125 210.80847000001813,37.2765899997612 213.85641000016707,49.87866999979481 217.20277000023634,61.822659999795725 222.40484000033234,77.95443999985699 230.26993000033428,94.81738999989233 239.3719400002924,107.43915000007837 z" ></path>
  <path id="shape5" d="M71,50.16c-9.15-13.62-2.9-30.52,9.25-41.55s32.48-11.53,45.16-1.1c11.21,9.22,17.47,25.87,31.72,28.64,13.93,2.7,27.29-10,41.28-7.73,12.91,2.13,20.16,15.68,25.46,27.64l23.75,53.59c4.06,9.16,8.16,19.65,4.24,28.88-3.74,8.8-13.45,13.23-20,20.19-9.23,9.82-11.64,24-16.15,36.69s-13.71,26-27.18,26.66c-14.67.73-25.34-13.54-38.94-19.07-22.57-9.18-51.84,6.25-71.24-8.5-9.73-7.39-13.51-20.26-21.82-29.22C47.07,155.11,33,151,20.88,144.29S-2.61,124.88.53,111.38C3.25,99.68,15.66,93,27.34,90.17s24.24-3.42,34.52-9.63S78.63,59.4,71,50.16Z"></path>
  <path id="shape6" d="M219.08,102c16.37,1.21,25.79,16.57,27,32.94s-11,32.67-27,36.2c-14.18,3.12-31.14-2.24-42.11,7.26-10.73,9.28-9,27.66-19.42,37.24-9.65,8.84-24.78,6.17-37.47,3L63.21,204.14c-9.72-2.47-20.49-5.72-25.33-14.5-4.61-8.38-2.1-18.75-3.53-28.2-2-13.33-11.68-24-18.88-35.36s-12-26.84-4.18-37.84c8.48-12,26.3-11.56,39.05-18.85C71.5,57.3,77.44,24.76,101,18.6c11.82-3.09,24.28,1.88,36.46.88,13.81-1.13,25.71-9.71,38.5-15S205.75-2,214.43,8.76c7.52,9.37,5.12,23.26.12,34.18S202.26,64.12,200.8,76,207.07,102.29,219.08,102Z"></path>
</svg>
              
            
!

CSS

              
                body {
  background-color: #3D3D3C;
}

svg {
  width:500px;
  height: 500px;
}
              
            
!

JS

              
                var s1 = document.getElementById("shape1");
var s2 = document.getElementById("shape2");
var s3 = document.getElementById("shape3");
var s4 = document.getElementById("shape4");
var s5 = document.getElementById("shape5");
var s6 = document.getElementById("shape6");
var tl = new TimelineMax({repeat:-1, repeatDelay:1 });
var tl2 = new TimelineMax({repeat:-1, repeatDelay:1 });

tl
.set(s1, {css: {fill: "#FFF"}})
.set(s3, {css: {fill: "none"}})
.set(s2, {css: {fill: "none"}})
.to(s1, 1, {morphSVG: s2, fill:"red", ease: Power0.easeNone})
.to(s1, 1, {morphSVG: s3, fill:"green", ease: Power0.easeNone})
.to(s1, 1, {morphSVG: s1, fill:"white", ease: Power0.easeNone});

tl2
.set(s4, {css: {fill: "#FFF"}})
.set(s5, {css: {fill: "none"}})
.set(s6, {css: {fill: "none"}})
.to(s4, 1, {morphSVG: s5, fill:"red", ease: Power2.easeInOut})
.to(s4, 1, {morphSVG: s6, fill:"green", ease: Power2.easeInOut})
.to(s4, 1, {morphSVG: s4, fill:"white", ease: Power2.easeInOut});

              
            
!
999px

Console