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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 width="140px" height="140px" viewBox="-10 -10 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="layer1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M118.910034,45.8696776 C118.512913,43.2821178 118.053856,40.7843107 117.537986,38.3903666 L117.53799,38.3903641 C121.121105,34.3947261 122.748423,30.4235072 121.913071,26.8051973 C120.926621,22.5324162 116.637868,19.3227406 110.034134,17.2964522 C106.591434,11.4032567 102.528825,8 98.1777545,8 C94.4901202,8 91.009687,10.4445455 87.9382303,14.7776336 C85.6629524,14.8111278 83.3113573,14.9125826 80.8953963,15.0834542 C78.738409,13.8311588 76.6100354,12.6744928 74.5226398,11.6177266 C73.6404118,6.49303579 71.5953576,2.85200027 68.3276996,1.25825696 C64.478441,-0.619151897 59.4349983,0.589391385 53.8632395,4.23965157 C46.8847041,3.08389753 41.5018986,4.06639242 38.699399,7.52719128 C36.3300832,10.4530526 36.0768755,14.8145995 37.6150832,20.0726049 C36.1420284,21.946604 34.6741941,23.9327031 33.221534,26.0212719 C30.8247351,26.9785884 28.5268283,27.9748906 26.3399162,29.0023349 C21.6016216,26.3653888 17.33048,25.6521083 13.9696774,27.2912813 C9.99770872,29.2285399 7.83218277,34.1907488 7.36573833,41.1656133 C2.47703981,45.8096679 0.120088537,50.492858 1.09118248,54.699128 C1.91487945,58.2669515 5.04109147,61.09353 9.89499567,63.1088338 C10.4472785,65.3493262 11.0852965,67.6505426 11.807726,70 C11.0852967,72.3494568 10.4472788,74.6506726 9.8949961,76.8911645 C5.04109395,78.9064678 1.91487977,81.7330471 1.09118248,85.300872 C0.120088537,89.507142 2.47703981,94.1903321 7.36573833,98.8343867 C7.83218277,105.809251 9.99770872,110.77146 13.9696774,112.708719 C17.3304789,114.347891 21.6016187,113.634612 26.3399115,110.997668 L26.3399146,110.997664 C28.5268272,112.025109 30.8247346,113.021411 33.221534,113.978728 C34.6741938,116.067296 36.1420277,118.053395 37.6150822,119.927394 C36.0768754,125.1854 36.3300831,129.546947 38.699399,132.472809 C41.5018986,135.933608 46.8847039,136.916102 53.8632394,135.760348 C59.4349982,139.410609 64.478441,140.619152 68.3276996,138.741743 C71.5953562,137.148 73.6404101,133.506967 74.5226382,128.382274 C76.6100344,127.325508 78.7384086,126.168842 80.8953966,124.916546 C83.3113572,125.087417 85.6629524,125.188872 87.9382303,125.222366 C91.009687,129.555454 94.4901202,132 98.1777545,132 C102.528826,132 106.591435,128.596742 110.034136,122.703546 C116.637868,120.677259 120.926621,117.467584 121.913071,113.194803 C122.748423,109.576493 121.121105,105.605274 117.53799,101.609636 L117.537986,101.609633 C118.053856,99.2156893 118.512913,96.7178822 118.910034,94.1303224 L118.910034,94.1303224 C120.39301,92.4909785 121.797809,90.8580188 123.119732,89.2392474 C128.534046,89.6290888 132.710669,88.4708922 135.065498,85.5629198 C137.874652,82.0939041 137.709107,76.6066874 135.11003,70 C137.709107,63.3933126 137.874652,57.9060959 135.065498,54.4370802 C132.710668,51.529107 128.534043,50.3709106 123.119731,50.7607514 C121.797808,49.1419804 120.393009,47.5090211 118.910034,45.8696776 L118.910034,45.8696776 Z" id="Path" fill="#D0E536" sketch:type="MSShapeGroup"></path>
    </g>
</svg>
              
            
!

CSS

              
                body{
  background-color: #86CEA9;
}

svg{
  margin: 2em auto;
  display: block;
}
              
            
!

JS

              
                TweenMax.to('#Path', 0.3, {
    attr: { d: 'M148.999999,38.8052004 C152.583118,34.8095599 116.835352,51.6183116 115.999999,48.0000017 C115.01355,43.7272206 136.513767,13.0262883 129.910034,10.9999998 C126.467333,5.10680436 113.528827,32.0726049 109.177757,32.0726049 C105.490122,32.0726049 112.249213,0.666911768 109.177757,4.99999981 C106.902479,5.03349403 94.3113573,26.9125826 91.8953963,27.0834542 C89.738409,25.8311588 101.025624,2.05676648 98.9382284,1.0000003 C98.0560003,-4.12469056 80.2676575,21.5937437 76.9999994,20.0000004 C73.1507408,18.1225915 70.4349983,12.5893914 64.8632395,16.2396516 C57.8847041,15.0838975 40.1424118,4.53920152 37.3399122,8.00000039 C34.9705964,10.9258617 47.0768755,26.8145995 48.6150832,32.0726049 C47.1420284,33.946604 31.4526599,24.9948857 29.9999998,27.0834545 C27.6032009,28.0407711 39.5268283,39.9748906 37.3399162,41.0023349 C32.6016216,38.3653888 13.3608026,37.1660261 9.99999999,38.8051991 C6.02803133,40.7424576 30.4664441,50.8948144 29.9999996,57.8696789 C25.1113011,62.5137335 -0.971093587,55.7937304 3.6034109e-07,60.0000004 C0.823697323,63.5678239 28.1460962,73.7170841 33.0000004,75.7323879 C33.5522831,77.9728804 -0.722429116,79.6505391 3.6034109e-07,81.9999966 C-0.722428927,84.3494534 37.8921936,87.7595047 37.3399109,89.9999966 C32.4860087,92.0152999 0.82369765,97.6714218 3.60503124e-07,101.239247 C-0.971093587,105.445517 28.1113018,101.486267 33.0000004,106.130322 C33.4664448,113.105186 33.3679432,104.193065 37.3399118,106.130323 C40.7007133,107.769496 20.2313855,144.63695 24.9696783,142.000006 C27.156594,143.027447 46.2182857,117.042681 48.615085,117.999998 C50.0677448,120.088566 35.8668574,150.126007 37.3399118,152.000006 C35.8017051,157.258012 62.4939267,131.074144 64.8632425,134.000006 C67.6657421,137.460804 57.8847071,161.15576 64.8632425,160.000006 C70.4350014,163.650266 76.1507408,133.804798 79.9999994,131.927389 C83.2676561,130.333646 91.0131723,162.124699 91.8954004,157.000006 C93.9827966,155.943239 89.7384124,124.249967 91.8954004,122.997671 C94.311361,123.168542 115.724722,156.966511 117.999999,157.000006 C121.071456,161.333094 112.312365,131.927389 115.999999,131.927389 C120.351071,131.927389 145.557299,143.115569 148.999999,137.222372 C155.603732,135.196086 120.047684,119.272779 121.034133,114.999998 C121.869486,111.381688 159.583114,118.995636 155.999999,114.999998 C156.515865,112.606051 129.512913,108.717882 129.910034,106.130322 C131.39301,104.490979 170.678077,102.858019 171.999999,101.239248 C177.414314,101.629089 135.64517,87.9079703 137.999999,84.9999979 C140.809153,81.5309822 172.599077,77.6066853 169.999999,70.9999979 C172.599077,64.3933105 136.928889,74.4690136 134.119735,70.9999979 C131.764905,68.0920246 165.414312,53.6101609 159.999999,54.0000017 C158.678077,52.3812308 131.393009,59.5090211 129.910034,57.8696776 C129.512913,55.2821178 149.51587,41.1991445 148.999999,38.8052004 Z' },
    repeat: 10,
    yoyo: true,
    y: -10,
    x: -10
});
              
            
!
999px

Console