css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- MORPHING SVG BUTTERFLY TUTORIAL by NAT COOPER : https://medium.com/@natacoops/svg-metamorphosis-a9d6ca14fce2 -->

<svg id="bfly" width="450px" height="450px" viewBox="0 0 450 450" enable-background="new 0 0 500 500" xml:space="preserve">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" >
            <g id="butterfly" stroke="#202020">
                <!-- CATERPILLAR PATH TO START -->
                <path d="M192.628097,260.168598 C194.607669,278.994129 168.189119,300.475039 158.766374,296.958931 C158.766374,296.958931 135.647728,299.681783 120.660839,283.008003 C117.040591,278.980267 115.169365,274.325071 114.413417,269.580581 C112.039936,254.684111 120.66084,238.907375 120.66084,238.907375 C120.66084,238.907375 138.743325,218.324972 158.766373,222.579004 C178.789424,226.833036 190.648524,241.343068 192.628097,260.168598 Z" id="poly-01" fill="#9ED06E" sketch:type="MSShapeGroup"></path>
                <path d="M177.037824,234.969493 C174.88478,255.444718 195.856673,269.696961 195.856673,269.696961 C195.856673,269.696961 235.052043,283.411876 251.352244,265.27696 C267.652444,247.142044 261.45962,230.89796 251.352244,216.530817 C241.244867,202.163675 227.171976,198.113314 207.715802,202.940723 C188.259628,207.768131 179.190868,214.494267 177.037824,234.969493 Z" id="poly-02" fill="#72994C" sketch:type="MSShapeGroup"></path>
                <path d="M291.484239,292.222339 C268.812521,292.61715 253.260538,281.029879 246.191176,260.492094 C239.121814,239.954309 275.007964,206.314189 275.007964,206.314189 C275.007964,206.314189 299.789917,191.183904 316.815707,206.717347 C333.841496,222.250791 340.393839,238.606101 333.855823,260.00391 C327.317808,281.40172 314.155956,291.827527 291.484239,292.222339 L291.484239,292.222339 Z" id="poly-03" fill="#9ECF6E" sketch:type="MSShapeGroup"></path>
                <path d="M85.1725267,298.749497 C86.4510504,313.356228 94.9539422,322.574408 108.639499,325.732484 C122.325056,328.890561 135.560318,313.367565 141.533202,303.538595 C147.506085,293.709624 133.307784,277.95377 133.307784,277.95377 C133.307784,277.95377 116.346913,263.672005 103.028028,269.322882 C89.7091422,274.973759 83.894003,284.142766 85.1725267,298.749497 Z" id="poly-04" fill="#8AB55F" sketch:type="MSShapeGroup"></path>
                <path d="M309.445156,113 C333.652273,113 350.440308,131.227716 358.38214,154.55274 C366.323972,177.877764 361.135399,197.206293 342.931561,211.348995 C324.727723,225.491697 305.340707,225.608852 285.276602,211.348995 C265.212497,197.089138 256.784712,179.914954 263.017293,154.55274 C269.249874,129.190526 285.238039,113 309.445156,113 Z" id="poly-05" fill="#CEE382" sketch:type="MSShapeGroup"></path>
            </g>
        </g>
    </svg>

<div><a href="https://medium.com/@natacoops/svg-metamorphosis-a9d6ca14fce2" target="_blank">Click Here for Blog Post/Tutorial</a></div>
            
          
!
            
              body {
  background: radial-gradient(#FFFFFF, #cccccc); 
  background-attachment:fixed;
  background-size: 110%;
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content:center;
}
div {
  text-align:center;
  width: 100%;
}
svg {
  margin: 0 auto;
  display: inherit;
}
div a {
  font-family: 'Helvetica';
  text-decoration: none;
}
            
          
!
            
              (function() {
            
            // the 5 polygons
            var poly1 = Snap('#poly-01');
            var poly2 = Snap('#poly-02');
            var poly3 = Snap('#poly-03');
            var poly4 = Snap('#poly-04');
            var poly5 = Snap('#poly-05');

            // click trigger
            var butterfly = $('#butterfly');

            var morph01 = true; //caterpillar
            var morph02 = false; //cocoon
            var morph03 = false; //butterfly
            var morph04 = false; //cocoon-reverse

            butterfly.on('click', function() {
                if (morph01) {
                    //if caterpillar, morph into cocoon - so paste in cocoon path d values & colours
                    poly1.animate({d:"M263.779105,286.829982 C268.349981,310.33569 237.417184,340.319503 225.15195,336.927641 C225.15195,336.927641 196.310607,342.908547 175.58097,323.548947 C170.573498,318.872422 167.701525,313.212284 166.225539,307.316623 C161.591327,288.805775 170.718717,267.973136 170.718717,267.973136 C170.718717,267.973136 191.242791,240.040939 216.951293,243.19372 C242.659797,246.346502 259.208229,263.324273 263.779105,286.829982 L263.779105,286.829982 Z", fill:"#B3AB12"}, 500, mina.easein);
                    poly2.animate({d:"M153.071418,261.56878 C152.533703,292.242657 185.523947,310.674883 185.523947,310.674883 C185.523947,310.674883 245.502818,325.942176 267.350318,296.904568 C289.197819,267.866959 277.893006,244.558108 261.019587,224.543976 C244.146167,204.529844 222.724566,200.345462 194.462778,210.038884 C166.20099,219.732306 153.609133,230.894902 153.071418,261.56878 L153.071418,261.56878 Z", fill:"#DBDE66"}, 500, mina.easein);
                    poly3.animate({d:"M147.395457,236.053163 C134.069881,206.121368 183.58576,150.852538 183.58576,150.852538 C183.58576,150.852538 218.844973,124.857982 246.477583,145.960666 C274.110194,167.06335 286.108814,190.778272 279.094985,223.791755 C272.081157,256.805237 253.668972,274.202506 219.644317,277.777087 C185.619662,281.351669 160.721034,265.984957 147.395457,236.053163 L147.395457,236.053163 Z", fill:"#E2CD32"}, 500, mina.easein);
                    poly4.animate({d:"M145.271408,178.297141 C151.78606,215.230044 181.351896,242.728157 216.935496,247.723373 C252.519097,252.718589 270.851364,221.929376 283.883024,195.553319 C296.914684,169.177262 301.174082,138.467884 276.572957,111.998908 C251.971833,85.5299319 208.075786,75.5717647 189.902858,94.5517024 C157.217476,111.91996 138.756756,141.364238 145.271408,178.297141 L145.271408,178.297141 Z", fill:"#DBDE66"}, 500, mina.easein);
                    poly5.animate({d:"M217.40979,158.058464 C235.034607,156.516493 248.418505,168.715084 255.686236,185.187507 C262.953966,201.659929 260.40715,216.059694 248.053876,227.513751 C235.700603,238.967807 221.592686,240.288019 206.076219,231.18632 C190.559752,222.08462 183.329912,210.120355 186.25261,191.262162 C189.175309,172.403969 199.784974,159.600436 217.40979,158.058464 L217.40979,158.058464 Z", fill:"#B3AB12"}, 500, mina.easein);
                    morph01 = false;
                    morph02 = true;
                } else if (morph02) {
                    //if cocoon, morph into butterfly - so paste in butterfly path d values & colours
                    poly1.animate({d:"M368.006756,115.192288 C371.140649,144.995285 327.949529,184.540861 327.949529,184.540861 L248.687588,212.672346 L241.449245,88.3042896 C241.449245,88.3042896 282.700915,48.9489766 314.399723,55.6836022 C346.09853,62.4182278 364.872863,85.3892903 368.006756,115.192288 Z", fill:"#B82A9D"}, 500, mina.easein);
                    poly2.animate({d:"M85.023027,115.192288 C81.8891342,144.995285 125.080254,184.540861 125.080254,184.540861 L204.342195,212.672346 L211.580538,88.3042896 C211.580538,88.3042896 170.328868,48.9489766 138.63006,55.6836022 C106.931253,62.4182278 88.1569199,85.3892903 85.023027,115.192288 Z", fill:"#B82A9D"}, 500, mina.easein);
                    poly3.animate({d:"M433.305638,290.117404 C428.864071,340.860906 399.325188,372.884688 351.781826,383.855784 C304.238463,394.82688 237.509734,306.754637 237.509734,306.754637 L248.22743,213.446791 C248.22743,213.446791 325.006419,168.258872 371.275971,187.889909 C417.545523,207.520946 437.747205,239.373902 433.305638,290.117404 Z", fill:"#5E2174"}, 500, mina.easein);
                    poly4.animate({d:"M16.4805179,290.117404 C20.9220847,340.860906 50.4609675,372.884688 98.0043301,383.855784 C145.547693,394.82688 212.276421,306.754637 212.276421,306.754637 L201.558726,213.446791 C201.558726,213.446791 124.779737,168.258872 78.510185,187.889909 C32.240633,207.520946 12.0389511,239.373902 16.4805179,290.117404 Z", fill:"#5E2174"}, 500, mina.easein);
                    poly5.animate({d:"M225.463602,67.0227273 C236.706839,67.0227273 243.644696,69.6008212 247.950076,157.49385 C252.255456,245.386878 246.478634,242.821242 239.361007,295.127994 C232.24338,347.434745 222.311257,374.092407 211.566196,295.127994 C200.821136,216.16358 200.351852,211.088044 202.977127,157.49385 C205.602402,103.899655 214.220364,67.0227273 225.463602,67.0227273 Z", fill:"#EEC563"}, 500, mina.easein);
                    morph02 = false;
                    morph03 = true;
                } else if (morph03) {
                    //if butterfly, morph back into cocoon - so paste in cocoon path d values & colours
                    poly1.animate({d:"M263.779105,286.829982 C268.349981,310.33569 237.417184,340.319503 225.15195,336.927641 C225.15195,336.927641 196.310607,342.908547 175.58097,323.548947 C170.573498,318.872422 167.701525,313.212284 166.225539,307.316623 C161.591327,288.805775 170.718717,267.973136 170.718717,267.973136 C170.718717,267.973136 191.242791,240.040939 216.951293,243.19372 C242.659797,246.346502 259.208229,263.324273 263.779105,286.829982 L263.779105,286.829982 Z", fill:"#B3AB12"}, 500, mina.easein);
                    poly2.animate({d:"M153.071418,261.56878 C152.533703,292.242657 185.523947,310.674883 185.523947,310.674883 C185.523947,310.674883 245.502818,325.942176 267.350318,296.904568 C289.197819,267.866959 277.893006,244.558108 261.019587,224.543976 C244.146167,204.529844 222.724566,200.345462 194.462778,210.038884 C166.20099,219.732306 153.609133,230.894902 153.071418,261.56878 L153.071418,261.56878 Z", fill:"#DBDE66"}, 500, mina.easein);
                    poly3.animate({d:"M147.395457,236.053163 C134.069881,206.121368 183.58576,150.852538 183.58576,150.852538 C183.58576,150.852538 218.844973,124.857982 246.477583,145.960666 C274.110194,167.06335 286.108814,190.778272 279.094985,223.791755 C272.081157,256.805237 253.668972,274.202506 219.644317,277.777087 C185.619662,281.351669 160.721034,265.984957 147.395457,236.053163 L147.395457,236.053163 Z", fill:"#E2CD32"}, 500, mina.easein);
                    poly4.animate({d:"M145.271408,178.297141 C151.78606,215.230044 181.351896,242.728157 216.935496,247.723373 C252.519097,252.718589 270.851364,221.929376 283.883024,195.553319 C296.914684,169.177262 301.174082,138.467884 276.572957,111.998908 C251.971833,85.5299319 208.075786,75.5717647 189.902858,94.5517024 C157.217476,111.91996 138.756756,141.364238 145.271408,178.297141 L145.271408,178.297141 Z", fill:"#DBDE66"}, 500, mina.easein);
                    poly5.animate({d:"M217.40979,158.058464 C235.034607,156.516493 248.418505,168.715084 255.686236,185.187507 C262.953966,201.659929 260.40715,216.059694 248.053876,227.513751 C235.700603,238.967807 221.592686,240.288019 206.076219,231.18632 C190.559752,222.08462 183.329912,210.120355 186.25261,191.262162 C189.175309,172.403969 199.784974,159.600436 217.40979,158.058464 L217.40979,158.058464 Z", fill:"#B3AB12"}, 500, mina.easein);
                    morph03 = false;
                    morph04 = true;
                } else if (morph04) {
                    //if cocoon for second time, morph back to caterpillar & start again - paste in caterpillar info
                    poly1.animate({d:"M192.628097,260.168598 C194.607669,278.994129 168.189119,300.475039 158.766374,296.958931 C158.766374,296.958931 135.647728,299.681783 120.660839,283.008003 C117.040591,278.980267 115.169365,274.325071 114.413417,269.580581 C112.039936,254.684111 120.66084,238.907375 120.66084,238.907375 C120.66084,238.907375 138.743325,218.324972 158.766373,222.579004 C178.789424,226.833036 190.648524,241.343068 192.628097,260.168598 Z", fill:"#9ED06E"}, 500, mina.easein);
                    poly2.animate({d:"M177.037824,234.969493 C174.88478,255.444718 195.856673,269.696961 195.856673,269.696961 C195.856673,269.696961 235.052043,283.411876 251.352244,265.27696 C267.652444,247.142044 261.45962,230.89796 251.352244,216.530817 C241.244867,202.163675 227.171976,198.113314 207.715802,202.940723 C188.259628,207.768131 179.190868,214.494267 177.037824,234.969493 Z", fill:"#72994C"}, 500, mina.easein);
                    poly3.animate({d:"M291.484239,292.222339 C268.812521,292.61715 253.260538,281.029879 246.191176,260.492094 C239.121814,239.954309 275.007964,206.314189 275.007964,206.314189 C275.007964,206.314189 299.789917,191.183904 316.815707,206.717347 C333.841496,222.250791 340.393839,238.606101 333.855823,260.00391 C327.317808,281.40172 314.155956,291.827527 291.484239,292.222339 L291.484239,292.222339 Z", fill:"#9ECF6E"}, 500, mina.easein);
                    poly4.animate({d:"M85.1725267,298.749497 C86.4510504,313.356228 94.9539422,322.574408 108.639499,325.732484 C122.325056,328.890561 135.560318,313.367565 141.533202,303.538595 C147.506085,293.709624 133.307784,277.95377 133.307784,277.95377 C133.307784,277.95377 116.346913,263.672005 103.028028,269.322882 C89.7091422,274.973759 83.894003,284.142766 85.1725267,298.749497 Z", fill:"#8AB55F"}, 500, mina.easein);
                    poly5.animate({d:"M309.445156,113 C333.652273,113 350.440308,131.227716 358.38214,154.55274 C366.323972,177.877764 361.135399,197.206293 342.931561,211.348995 C324.727723,225.491697 305.340707,225.608852 285.276602,211.348995 C265.212497,197.089138 256.784712,179.914954 263.017293,154.55274 C269.249874,129.190526 285.238039,113 309.445156,113 Z", fill:"#CEE382"}, 500, mina.easein);
                    morph04 = false;
                    morph01 = true;
                }
            });
        })()
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console