123

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.

            
              <svg id="svg" viewBox="0 0 1500 800" preserveAspectRatio="xMidYMid slice">
  <path id="path" d="M -21.2121 492.4243 C 100.1311 551.8876 161.9849 565.9377 262.6379 566.4986 C 639.6363 568.5995 471 153 730.6359 153.9328 C 992 153 991 564 730.6359 564.1989 C 479 564.3912 478 150 730.6359 150.4314 C 992.0001 150.8777 992.0056 568.0428 730.6359 567 C 480 566 476 146 730.6359 146.2297 C 997 146.4699 840.6354 565.7983 1209.6339 565.7983 C 1606.6322 565.7983 3237.8789 56.0606 3278.7878 0 "/>

  <g id="skull">
    <path class="skull-d" d="M 172.4844 17.7177 C 166.6963 16.0497 163.3232 20.7958 164.834 22.7895 C 166.3447 24.7826 178.4854 30.6986 181.5361 29.6728 C 184.5859 28.6464 184.2637 27.3427 184.2637 27.3427 C 184.2637 27.3427 185.5596 25.8114 172.4844 17.7177 ZM 86.4298 16.9061 C 100.794 5.1493 114.3546 5.3119 123.6817 14.0702 C 132.998 22.8192 111.2589 30.0946 103.544 30.1469 C 94.6749 30.2074 79.2032 22.8217 86.4298 16.9061 ZM 189.4902 45.4511 L 189.5098 45.3476 C 192.2314 45.3578 195.6279 42.0268 195.6279 42.0268 C 195.6279 42.0268 196.37 37.5717 196.9843 37.2294 C 197.5977 36.8871 180.0518 23.0141 167.9639 15.3754 C 155.8604 7.7274 141.1797 14.6821 133.423 12.7099 C 125.6612 10.7363 118.5772 -1.9796 104.6661 0.2645 C 90.7413 2.5106 88.0577 11.121 80.9103 14.2792 C 73.7599 17.4394 71.1544 12.7822 60.382 16.7305 C 49.6027 20.6815 33.8606 40.4267 33.8606 40.4267 L 25.8381 41.1806 L 21.4611 47.3173 L 17.8303 48.557 L 22.0959 63.0375 C 22.0959 63.0375 23.6667 61.8333 27.3898 62.3109 C 31.6667 62.5 28.3333 56 39.5559 60.2587 C 48.6076 63.35 78.4659 86.706 78.4659 86.706 C 78.4659 86.706 81.5401 87.6522 89.2179 90.8632 C 96.8897 94.0712 100.7169 91.7084 109.9386 89.393 C 119.1544 87.0795 153.5078 91.1249 159.5205 89.9843 C 164.8799 88.9672 172.6318 80.1977 170.2529 76.2514 C 171.8604 74.4325 175.0615 70.3012 175.7217 65.5893 C 173.4814 68.9774 170.1504 72.621 168.1523 74.7001 C 167.4121 74.4066 166.6484 74.2245 165.8662 74.1322 C 167.3643 72.0097 168.9883 69.0736 169.4365 65.8695 C 167.4512 68.872 164.6123 72.0746 162.5996 74.2123 C 161.2568 74.4081 159.873 74.7792 158.4687 75.244 C 159.6592 73.0204 160.9463 69.8285 160.835 66.5487 C 159.0586 70.3573 156.0488 74.6493 154.5342 76.7103 C 153.5742 77.0936 152.6094 77.4838 151.6465 77.8632 C 152.749 75.6791 153.834 72.7304 153.7305 69.7084 C 152.1465 73.1034 149.583 76.8788 147.9727 79.1195 C 146.8633 79.3637 145.4521 79.5482 143.7979 79.6688 C 144.9746 77.414 146.2295 74.1806 146.2109 70.6566 C 144.6729 73.9892 142.2686 77.5722 140.6572 79.8183 C 139.2588 79.8529 137.7451 79.8529 136.1427 79.8212 C 137.3721 77.9267 139.082 74.5658 138.9473 70.6854 C 137.2774 74.267 134.6416 77.8266 133.1377 79.7245 C 131.9073 79.6718 130.6367 79.602 129.3331 79.5145 C 130.6396 77.9784 132.3546 75.1903 132.6319 70.9413 C 130.421 74.9408 127.5597 77.8686 126.0431 79.2645 C 125.0431 79.1791 124.0304 79.0829 123.006 78.9779 C 124.1788 77.4018 125.5724 74.7895 125.797 71.0727 C 124.0167 74.4721 121.8976 77.1 120.4376 78.7001 C 119.4122 78.581 118.378 78.4511 117.339 78.3129 C 118.2296 76.8017 119.0978 74.4911 119.0782 71.2377 C 117.7188 74.1845 115.921 76.4647 114.5724 77.9267 C 113.4454 77.7597 112.3194 77.581 111.1915 77.3925 C 112.8917 75.3573 115.5724 71.5653 116.1671 67.2958 C 113.7569 70.9394 110.086 74.8788 108.1583 76.8583 C 107.0919 76.6601 106.0313 76.453 104.9776 76.2353 C 106.0528 74.893 107.5646 72.2387 107.5372 67.9569 C 105.8292 71.6596 103.4327 74.3124 102.0978 75.6103 C 100.711 75.2938 99.3438 74.9569 98.005 74.6039 C 99.0782 73.3695 100.8292 70.6454 100.7999 66.0414 C 99.0304 69.8783 96.5196 72.5849 95.2179 73.828 L 93.669 73.3627 C 93.3263 73.2567 92.9855 73.1444 92.6456 73.0258 C 93.6476 71.5521 94.7755 69.0653 94.7511 65.3607 C 93.3858 68.3212 91.5821 70.6073 90.2306 72.0702 C 88.8946 71.4828 87.5772 70.8075 86.2862 70.0565 C 87.4454 68.9145 88.8507 66.9423 89.5548 63.7392 C 87.7628 66.0912 85.7237 67.7562 84.2335 68.7885 C 83.1417 68.0756 82.0704 67.3144 81.0206 66.5145 C 82.1847 65.3759 83.6036 63.3969 84.3126 60.1703 C 82.6036 62.413 80.671 64.0331 79.2022 65.0736 C 78.2794 64.3144 77.3751 63.5272 76.4933 62.724 C 77.7198 61.6957 79.4855 59.6356 80.3028 55.911 C 78.4239 58.3769 76.2775 60.0883 74.7707 61.1063 C 64.4094 51.0922 58.6667 49.3333 58.6667 49.3333 C 65.3333 39.6667 80 39.6667 85.0177 40.456 C 90 42 94.463 45.7582 100.8614 47.0673 C 102.0138 47.3031 102.9581 47.5531 103.7989 47.8134 C 103.2374 51.6176 100.378 58.3681 100.378 58.3681 C 100.378 58.3681 104.3976 55.7577 105.6827 48.456 C 106.8741 48.8886 108.0118 49.3241 109.5226 49.7255 C 109.7101 52.8725 107.7179 61.5019 107.7179 61.5019 C 107.7179 61.5019 111.5069 57.6117 111.1671 50.1586 L 111.1661 50.1122 C 112.5001 50.3895 114.1173 50.6439 116.1905 50.8573 C 116.587 54.7763 116.1456 61.829 116.1456 61.829 C 116.1456 61.829 119.0548 58.1381 117.9278 51.0165 L 118.4571 51.0585 C 119.5079 51.1395 120.7511 51.0644 122.1485 50.8617 C 122.6826 54.5712 122.1855 62.5145 122.1855 62.5145 C 122.1855 62.5145 125.3838 58.4584 123.7774 50.6464 L 123.7638 50.5858 C 125.0196 50.3436 126.374 50.0228 127.8067 49.6386 C 128.2783 53.453 127.8038 61.0028 127.8038 61.0028 C 127.8038 61.0028 130.9855 56.9662 129.4072 49.1923 C 130.8038 48.7909 132.2627 48.3383 133.7677 47.8524 C 134.1134 51.8173 133.6904 58.5302 133.6904 58.5302 C 133.6904 58.5302 136.71 54.6996 135.4082 47.3148 C 136.6973 46.8881 138.0107 46.4398 139.3447 45.9799 C 139.752 49.8808 139.3047 57.0199 139.3047 57.0199 C 139.3047 57.0199 142.4307 53.058 140.9551 45.4228 L 144.3555 44.2362 C 144.6104 48.2401 144.2285 54.2743 144.2285 54.2743 C 144.2285 54.2743 147.0879 50.6459 146.043 43.6444 C 147.3418 43.1903 148.6416 42.7362 149.9346 42.2929 C 150.248 46.2777 149.8389 52.765 149.8389 52.765 C 149.8389 52.765 152.8076 48.996 151.5879 41.7279 C 152.71 41.349 153.8223 40.9784 154.9219 40.6225 C 155.1025 44.5976 154.7598 50.0214 154.7598 50.0214 C 154.7598 50.0214 157.4355 46.6283 156.665 40.0683 C 157.9785 39.6571 159.2656 39.2689 160.5195 38.9154 C 160.7207 42.9052 160.3672 48.5131 160.3672 48.5131 C 160.3672 48.5131 163.0752 45.081 162.2598 38.4437 C 163.3477 38.1576 164.4062 37.8998 165.4229 37.6796 C 165.7607 41.4979 164.5273 48.6674 164.5273 48.6674 C 164.5273 48.6674 169.3896 45.0956 167.71 37.266 L 167.7021 37.2387 C 169.1289 36.997 170.4541 36.8461 171.6572 36.8065 C 171.7402 41.4237 169.8223 49.1474 169.8223 49.1474 C 169.8223 49.1474 173.292 47.3578 173.6152 38.3949 C 173.6367 37.7978 173.5703 37.2753 173.4492 36.8388 C 173.7461 36.8617 174.0322 36.8964 174.3066 36.9394 C 175.918 37.1913 177.3037 37.5097 178.5 37.869 C 178.0166 41.852 174.8818 49.56 174.8818 49.56 C 174.8818 49.56 180.1172 47.2611 180.583 38.6127 C 181.541 39.0155 182.3408 39.452 183.0186 39.8983 C 182.585 43.7567 179.3965 51.892 179.3965 51.892 C 179.3965 51.892 183.9785 49.538 184.7812 41.3129 C 186.1445 42.6395 186.8008 43.9101 187.6864 44.6635 C 186.6729 48.3729 182.4102 55.8676 182.4102 55.8676 C 182.4102 55.8676 187.6973 53.6234 189.4902 45.4511 Z"/>
    
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>

    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>

    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
    <path d="M 0.3764 44.6278 L 3.5122 44.6888 C 3.5 36.5 6.25 29.25 6.893 44.8384 C 8.2719 44.5833 10.4115 44.9101 10.4115 44.9101 L 10.4541 52.2211 C 10.4541 52.2211 9.4199 60.0238 9.47 61.081 C 9.5209 62.1381 12 69.1815 12 69.1815 C 12 69.1815 -0.2406 89.7446 10.7701 115 C -1.0849 97.8291 7.6444 66.0541 3.2095 62.4955 C 0.5369 59.2792 2.3246 55.1762 0.8079 51.4276 C -0.7097 47.6786 0.3764 44.6278 0.3764 44.6278 Z"/>
  </g>
</svg>

<div class="c">
  <p>Ouroboros – SVG Animation Path</p>
  <p>Demo by <a href="https://twitter.com/pixelia_me" target="_blank">@pixelia_me</a></p>
</div>
            
          
!
            
              $A: #e74c3c;
$B: #222;

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: $B;
  background-image: radial-gradient(ellipse, $B, darken($B, 8));
}

svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#skull {
  path {fill: transparentize(lighten($A, 5), .2)}
}

#path {fill: none}

.c {
  position: absolute;
  top: 2em;
  left: 2em;
  font-size: 11px;
  font-family: Monaco, monospace;
  color: lighten($B, 10);

  p {margin: 0 0 .5em}

  a {
    position: relative;
    display: inline-block;
    padding: 0 .2em;
    text-decoration: none;
    color: transparentize(lighten($A, 5), .4);

    &:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 1px;
      background-color: transparentize(lighten($A, 5), .4);
      transition-property: width, left;
      transition-duration: 400ms;
      transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    }

    &:hover:before {
      width: 100%;
      left: 0;
    }
  }
}
            
          
!
            
              /* Noel Delgado | @pixelia_me
 *
 * *** full attribution ***
 * Most of the code was taken from legomushroom's post
 * http://blog.legomushroom.com/2014/03/defining-advanced-animation-path/
 */

var path = document.getElementById('path');
var totalPathLen = ~~(path.getTotalLength());
var skull = document.getElementById('skull');
var objs = [].slice.call(skull.getElementsByTagName('path'), 0);
var objsLen = objs.length;
var bonesData = [];
var DURATION = 7 * 1000;
var atan = Math.atan;
var PI = Math.PI;
var tween = new TWEEN.Tween({length: 0});

objs.forEach(function(o, i) {
    var w, h, scale;
    w = o.getBBox().width;
    h = o.getBBox().height;
    scale = 1 - 100 * i / 3000;
  
    // ¯\_(ツ)_/¯
    if (i > 0) w += 30;
    else w = (w / 2 - 10);

    bonesData.push({ w : ~~w, h : ~~h, wHalf : ~~(w / 2), hHalf : ~~(h / 2), scale: scale });
});

function onUpdate() {
    var i, boneData, shift, scale, point, x, y, prevPoint, x1, x2, angle, attr;

    for (i = 0; i < objsLen; i++) {
        boneData = bonesData[i];
        shift = i * boneData.w;
        scale = boneData.scale;
        point = path.getPointAtLength(this.length - shift);
        x = ~~(point.x - boneData.wHalf);
        y = ~~(point.y - boneData.hHalf);
        prevPoint = path.getPointAtLength(this.length - shift - 1);
        x1 = point.y - prevPoint.y;
        x2 = point.x - prevPoint.x;
        angle = atan(x1/x2)*(180/PI);

        if (point.x - prevPoint.x < 0) {
            angle = 180 + angle;
        }

        attr = 'translate(' + x + ', ' + y + ') scale(' + scale + ') rotate(' + (angle || 0) + ',' + boneData.wHalf + ',' + boneData.hHalf + ')';
        objs[i].setAttribute('transform', attr);
    }
}

tween.to({length: totalPathLen}, DURATION)
    .onUpdate(onUpdate)
    .repeat(Infinity)
    .start();

var animate = function() {
  requestAnimationFrame(animate);
  TWEEN.update();
};

animate();
            
          
!
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.

Console