Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <div class="anim">

<svg width="597px" height="740px" viewBox="0 0 597 740" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="test" transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
            <g id="Group-2" transform="translate(224.000000, 368.000000)">
                <path d="M0.415666118,8.36377339 L0.415666118,158.753439 L150.415721,158.753439 L150.415721,8.36377339 L0.415666118,8.36377339 Z M137.948184,145.50668 L13.2728137,145.50668 L13.2728137,20.8313104 L137.948184,20.8313104 L137.948184,145.50668 Z" id="Shape" fill="#2AB6F4"></path>
                <path d="M36.6494455,73.8183427 C36.6494455,77.714448 36.6494455,84.337827 37.4286666,91.3508166 C38.2078877,103.428743 39.7663298,113.948227 39.7663298,113.948227 L59.6364669,94.8573114 C59.6364669,94.8573114 58.8572458,85.1170481 60.0260774,71.091069 C60.0260774,71.091069 37.8182771,68.3637952 36.6494455,73.8183427 L36.6494455,73.8183427 Z M83.0130988,122.130049 C88.0780357,120.571606 86.5195936,98.7534167 86.5195936,98.7534167 C72.1040039,99.1430272 62.7533512,97.9741956 62.7533512,97.9741956 L42.883214,117.065112 C42.883214,117.065112 53.4026984,119.013164 65.4806249,120.571606 C72.1040039,121.350828 81.4546567,121.740438 83.0130988,122.130049 C82.6234883,122.130049 83.0130988,122.130049 83.0130988,122.130049 L83.0130988,122.130049 Z" id="Shape" fill="#82D8F9"></path>
                <path d="M36.6494455,72.2599005 L36.6494455,73.4287321 C37.0390561,72.2599005 37.4286666,71.87029 38.2078877,70.7014584 C39.7663298,68.7534058 42.4936035,67.9741847 43.6624351,67.9741847 C49.1169826,67.1949636 57.2988037,66.4157426 65.0910143,66.026132 C79.506604,65.6365215 88.8572568,66.8053531 88.8572568,66.8053531 L108.727394,47.7144371 C108.727394,47.7144371 98.2079095,45.7663844 86.129983,44.2079423 C78.3377724,43.4287212 71.3247828,42.6495002 67.4286775,42.6495002 C67.039067,42.6495002 64.3117933,42.2598896 61.9741301,44.5975528 C59.2468564,47.3248265 44.8312667,60.9611951 38.9871087,66.4157426 C36.6494455,69.5326268 36.6494455,72.2599005 36.6494455,72.2599005 L36.6494455,72.2599005 Z M83.7923198,122.130049 L82.6234883,122.130049 C83.7923198,122.130049 84.1819304,121.740438 85.350762,120.961217 C87.6884252,119.402775 88.0780357,116.675501 88.4676462,115.89628 C89.6364778,110.441733 90.8053094,102.649522 91.1949199,94.4677008 C92.3637515,80.0521112 91.5845305,70.7014584 91.5845305,70.7014584 L111.454668,51.6105424 C111.454668,51.6105424 113.01311,62.1300267 113.792331,74.2079532 C114.181941,82.0001638 114.571552,89.0131534 114.571552,92.9092587 C114.571552,93.2988692 114.961162,96.026143 112.233889,98.3638062 C109.506615,101.09108 95.0910253,114.727448 89.2468673,120.181996 C86.9092041,122.519659 84.1819304,122.130049 83.7923198,122.130049 L83.7923198,122.130049 Z M13.2728137,0.961173288 L21.0650243,0.961173288 L21.0650243,14.5975419 L13.2728137,14.5975419 L13.2728137,0.961173288 Z M36.6494455,0.961173288 L44.4416562,0.961173288 L44.4416562,14.5975419 L36.6494455,14.5975419 L36.6494455,0.961173288 Z M60.0260774,0.961173288 L67.8182881,0.961173288 L67.8182881,14.5975419 L60.0260774,14.5975419 L60.0260774,0.961173288 Z M83.4027093,0.961173288 L91.1949199,0.961173288 L91.1949199,14.5975419 L83.4027093,14.5975419 L83.4027093,0.961173288 Z M106.779341,0.961173288 L114.571552,0.961173288 L114.571552,14.5975419 L106.779341,14.5975419 L106.779341,0.961173288 Z M130.155973,0.961173288 L137.948184,0.961173288 L137.948184,14.5975419 L130.155973,14.5975419 L130.155973,0.961173288 Z" id="Shape" fill="#82D8F9"></path>
            </g>
            <path d="M237.272814,519.740449 L245.065024,519.740449 L245.065024,533.376818 L237.272814,533.376818 L237.272814,519.740449 Z M260.649446,519.740449 L268.441656,519.740449 L268.441656,533.376818 L260.649446,533.376818 L260.649446,519.740449 Z M284.026077,519.740449 L291.818288,519.740449 L291.818288,533.376818 L284.026077,533.376818 L284.026077,519.740449 Z M307.402709,519.740449 L315.19492,519.740449 L315.19492,533.376818 L307.402709,533.376818 L307.402709,519.740449 Z M330.779341,519.740449 L338.571552,519.740449 L338.571552,533.376818 L330.779341,533.376818 L330.779341,519.740449 Z M354.155973,519.740449 L361.948184,519.740449 L361.948184,533.376818 L354.155973,533.376818 L354.155973,519.740449 Z" id="Shape" fill="#82D8F9"></path>
            <path d="M217.402677,505.71447 L231.039045,505.71447 L231.039045,513.50668 L217.402677,513.50668 L217.402677,505.71447 Z M217.402677,482.337838 L231.039045,482.337838 L231.039045,490.130049 L217.402677,490.130049 L217.402677,482.337838 Z M217.402677,458.961206 L231.039045,458.961206 L231.039045,466.753417 L217.402677,466.753417 L217.402677,458.961206 Z M217.402677,435.584574 L231.039045,435.584574 L231.039045,443.376785 L217.402677,443.376785 L217.402677,435.584574 Z M217.402677,412.207942 L231.039045,412.207942 L231.039045,420.000153 L217.402677,420.000153 L217.402677,412.207942 Z M217.402677,388.83131 L231.039045,388.83131 L231.039045,396.623521 L217.402677,396.623521 L217.402677,388.83131 Z" id="Shape" fill="#82D8F9"></path>
            <path d="M367.402731,505.71447 L381.0391,505.71447 L381.0391,513.50668 L367.402731,513.50668 L367.402731,505.71447 Z M367.402731,482.337838 L381.0391,482.337838 L381.0391,490.130049 L367.402731,490.130049 L367.402731,482.337838 Z M367.402731,458.961206 L381.0391,458.961206 L381.0391,466.753417 L367.402731,466.753417 L367.402731,458.961206 Z M367.402731,435.584574 L381.0391,435.584574 L381.0391,443.376785 L367.402731,443.376785 L367.402731,435.584574 Z M367.402731,412.207942 L381.0391,412.207942 L381.0391,420.000153 L367.402731,420.000153 L367.402731,412.207942 Z M367.402731,388.83131 L381.0391,388.83131 L381.0391,396.623521 L367.402731,396.623521 L367.402731,388.83131 Z" id="Shape" fill="#82D8F9"></path>
            <g id="Group1" transform="translate(311.688425, 0.000000)">
                <polygon id="Shape" fill="#82D8F9" points="85.7143169 394.285858 85.7143169 386.883258 102.077959 386.883258 185.454613 303.896215 165.584476 285.58452 227.14294 224.026056 148.052002 145.324728 112.207833 181.168897 90.0000328 159.350707 90.0000328 113.376665 63.5065166 86.8831485 94.6753591 55.714306 213.116961 174.155908 213.116961 145.714339 160.129928 92.7273065 180.779287 72.0779483 142.987065 34.2857268 148.441612 28.8311793 191.688381 72.0779483 170.649413 92.7273065 220.909171 142.597455 220.909171 192.467603 94.6753591 66.6234009 74.4156115 86.8831485 97.7922434 110.25978 97.7922434 155.844213 112.207833 170.649413 148.052002 134.415633 238.052035 224.026056 176.883181 285.58452 196.363708 303.896215 105.194843 394.285858"></polygon>
                <path d="M33.8961162,356.104026 L33.8961162,340.519604 L81.8182116,340.519604 L107.532507,314.805309 L69.7402851,277.013088 L19.4805266,277.013088 L19.4805266,215.065013 L45.1948216,215.065013 L104.415622,273.896204 L136.753297,241.55853 L71.6883378,176.493571 L10.1298738,176.493571 L10.1298738,102.077959 L57.6623587,54.5454744 L44.8052111,41.2987163 L2.33766319,83.7662643 L2.33766319,27.6623477 L29.2207899,0.779221063 L70.9091167,0.779221063 L139.09096,68.9610641 L148.052002,60.0000218 L153.506549,65.4545693 L139.09096,79.8701589 L67.7922325,8.57143169 L32.3376741,8.57143169 L10.1298738,30.779232 L10.1298738,65.0649588 L44.8052111,30.3896215 L68.5714535,54.5454744 L17.9220844,105.194843 L17.9220844,168.70136 L74.805222,168.70136 L147.662391,241.55853 L104.415622,284.805298 L42.0779374,222.467613 L26.8831267,222.467613 L26.8831267,269.220877 L72.8571694,269.220877 L118.441602,314.805309 L84.9350959,347.922205 L41.2987163,347.922205 L41.2987163,356.104026 L33.8961162,356.104026 Z M85.7143169,412.597553 L85.7143169,404.805342 L116.883159,404.805342 L180.389676,341.298826 L231.818266,341.688436 L268.831267,305.065046 L251.688403,287.922183 L226.363719,313.246867 L198.311761,285.194909 L252.078014,231.428656 L257.922172,236.493593 L209.220855,285.194909 L226.363719,302.337772 L251.688403,277.013088 L279.350751,305.065046 L234.93515,349.480647 L183.50656,349.091036 L120.000044,412.597553 L85.7143169,412.597553 Z" id="Shape" stroke="#82D8F9"></path>
                <polygon id="Shape" fill="#82D8F9" points="132.857191 451.558606 85.7143169 451.558606 85.7143169 443.766395 136.363686 443.766395 167.922139 473.376796 211.168908 429.740416 174.155908 392.727416 197.92215 368.961173 247.792298 368.961173 247.792298 376.753384 201.039034 376.753384 185.065002 392.727416 222.078003 429.740416 167.922139 483.89628"></polygon>
                <polygon id="Shape" fill="#82D8F9" points="171.039023 592.597618 126.233812 547.792407 164.026034 509.610575 121.948096 469.870301 85.7143169 469.870301 85.7143169 462.467701 125.454591 462.467701 174.935129 509.610575 137.142907 547.792407 174.155908 584.805408 194.026045 585.584629 158.571486 549.74046 196.363708 512.337849 177.272792 493.246933 232.987098 437.532627 238.441645 442.987174 188.181887 493.246933 206.883192 512.337849 169.480581 549.74046 212.72735 593.376839"></polygon>
                <polygon id="Shape" fill="#82D8F9" points="160.129928 612.467755 92.7273065 545.065134 128.181865 510.389796 104.805233 487.792385 85.7143169 487.792385 85.7143169 480.389785 107.922117 480.389785 138.701349 510.389796 103.636401 545.454744 163.246813 604.675545 221.688392 604.675545 231.818266 594.545671 185.844224 548.571628 211.948129 522.857333 211.948129 485.065112 258.311782 438.311848 258.311782 362.727405 285.97413 335.454668 285.97413 488.961217 225.584498 548.961239 234.54554 557.14306 247.013077 544.675523 252.467624 550.13007 234.54554 567.662544 214.675403 548.961239 278.181919 485.844333 278.181919 353.766363 266.103993 366.2339 266.103993 441.428732 219.350729 488.181996 219.350729 525.974217 196.753318 548.571628 242.337751 594.545671 224.805277 612.467755"></polygon>
                <path d="M153.89616,635.065166 L111.039001,592.597618 L97.4026329,606.233987 L49.4805375,556.363839 L92.7273065,513.11707 L90.0000328,510.389796 L85.7143169,510.389796 L85.7143169,502.597586 L92.7273065,502.597586 L104.026012,512.727459 L60.3896324,556.363839 L97.4026329,595.324892 L111.039001,581.688523 L157.013044,627.662566 L195.974097,627.662566 L195.974097,635.454777 L153.89616,635.065166 Z M50.2597586,697.402851 L89.6104222,658.052188 L71.2987273,640.130103 L49.870148,661.558682 L11.2987054,615.58464 L11.2987054,547.402797 L18.7013055,547.402797 L18.7013055,612.467755 L49.870148,650.649588 L71.2987273,629.221008 L100.519517,658.052188 L61.1688534,697.402851 L92.337696,728.571694 L141.428623,679.091156 L146.88317,684.545704 L92.337696,739.091178 L50.2597586,697.402851 Z" id="Shape" stroke="#82D8F9"></path>
                <path d="M110.25978,614.415808 L98.5714645,626.493735 L53.7662533,581.688523 L39.3506637,593.76645 L39.3506637,547.402797 L31.9480636,547.402797 L31.9480636,612.467755 L53.7662533,592.987229 L98.1818539,637.402829 L109.87017,625.714514 L133.246802,649.480756 L84.1558748,698.571683 L90.0000328,704.415841 L145.324728,649.480756 L110.25978,614.415808 Z M149.610444,418.0521 L135.584465,432.078079 L85.7143169,432.078079 L85.7143169,424.675479 L132.467581,424.675479 L150.000055,407.532616 L180.000066,435.584574 L174.545518,441.039122 L149.610444,418.0521 Z M11.2987054,356.104026 L11.2987054,321.818299 L67.4026219,321.818299 L76.3636642,312.467646 L67.4026219,303.506604 L0,303.506604 L0,192.467603 L60.7792429,192.467603 L103.636401,234.93515 L98.1818539,240.389698 L57.6623587,199.870203 L7.79221063,199.870203 L7.79221063,296.104004 L70.5195062,296.104004 L87.272759,312.467646 L70.5195062,329.220899 L19.090916,329.220899 L19.090916,356.104026 L11.2987054,356.104026 Z M85.7143169,373.246889 L85.7143169,365.844289 L93.8961381,365.844289 L150.000055,310.129983 L124.67537,285.194909 L178.831234,231.039045 L136.363686,188.181887 L141.818233,182.727339 L189.740329,231.039045 L135.584465,285.194909 L160.909149,310.129983 L97.0130223,373.246889 L85.7143169,373.246889 Z" id="Shape" stroke="#82D8F9"></path>
                <path d="M59.6104113,107.142896 L32.7272846,107.142896 L32.7272846,155.064992 L74.4156115,155.064992 L74.4156115,121.948096 L59.6104113,107.142896 Z M204.545529,395.065079 L209.610466,390.000142 L236.493593,389.220921 L246.623466,399.350795 L227.922161,418.831321 L204.545529,395.065079 Z M107.922117,147.272781 L107.142896,120.389654 L117.66238,110.25978 L136.753297,128.961086 L112.987054,152.337718 L107.922117,147.272781 Z M231.428656,493.246933 L265.324772,459.350817 L265.324772,482.727448 L231.428656,516.623565 L231.428656,493.246933 Z" id="Shape" stroke="#2AB6F4"></path>
            </g>
            <g id="Group">
                <polygon id="Shape" fill="#82D8F9" points="201.428645 394.285858 201.428645 386.883258 185.065002 386.883258 102.077959 303.896215 121.558486 285.58452 60.0000218 224.026056 139.09096 145.324728 174.935129 181.168897 197.142929 159.350707 197.142929 113.376665 223.636445 86.8831485 192.467603 55.714306 74.026001 174.155908 74.026001 145.714339 127.402644 92.7273065 106.363675 72.0779483 144.155897 34.2857268 138.701349 28.8311793 95.8441907 72.0779483 116.493549 92.7273065 66.6234009 142.597455 66.6234009 192.467603 192.467603 66.6234009 213.116961 86.8831485 189.740329 110.25978 189.740329 155.844213 174.935129 170.649413 139.09096 134.415633 49.090927 224.026056 110.649391 285.58452 90.7792538 303.896215 181.948118 394.285858"></polygon>
                <path d="M253.636456,356.104026 L253.636456,340.519604 L205.32475,340.519604 L179.610455,314.805309 L217.402677,277.013088 L268.052046,277.013088 L268.052046,215.065013 L241.94814,215.065013 L183.11695,273.896204 L150.389665,241.55853 L215.844234,176.493571 L277.013088,176.493571 L277.013088,102.077959 L229.480603,54.5454744 L242.727361,41.2987163 L284.805298,83.7662643 L284.805298,27.6623477 L258.311782,0.779221063 L216.623455,0.779221063 L148.052002,68.9610641 L139.09096,60.0000218 L133.636412,65.4545693 L148.052002,79.8701589 L219.74034,8.57143169 L255.194898,8.57143169 L277.402698,30.779232 L277.402698,65.0649588 L242.727361,30.3896215 L218.571508,54.5454744 L269.220877,105.194843 L269.220877,168.70136 L212.72735,168.70136 L139.870181,241.55853 L183.11695,284.805298 L245.454635,222.467613 L260.259835,222.467613 L260.259835,269.220877 L214.285792,269.220877 L168.70136,314.805309 L202.207866,347.922205 L245.844245,347.922205 L245.844245,356.104026 L253.636456,356.104026 Z M201.428645,412.597553 L201.428645,404.805342 L170.259802,404.805342 L107.142896,341.298826 L55.3246955,341.688436 L18.7013055,305.065046 L35.8441689,287.922183 L60.7792429,313.246867 L88.8312012,285.194909 L35.0649478,231.428656 L29.6104004,236.493593 L78.3117168,285.194909 L60.7792429,302.337772 L35.8441689,277.013088 L7.79221063,305.065046 L52.2078112,349.480647 L104.026012,349.091036 L167.142918,412.597553 L201.428645,412.597553 Z" id="Shape" stroke="#82D8F9"></path>
                <polygon id="Shape" fill="#82D8F9" points="154.675381 451.558606 201.428645 451.558606 201.428645 443.766395 150.779276 443.766395 119.610433 473.376796 75.9740536 429.740416 112.987054 392.727416 89.2208117 368.961173 39.7402742 368.961173 39.7402742 376.753384 86.1039275 376.753384 102.46757 392.727416 65.4545693 429.740416 119.610433 483.89628"></polygon>
                <polygon id="Shape" fill="#82D8F9" points="116.493549 592.597618 161.29876 547.792407 123.116928 509.610575 165.194865 469.870301 201.428645 469.870301 201.428645 462.467701 162.077981 462.467701 112.207833 509.610575 150.389665 547.792407 113.376665 584.805408 93.116917 585.584629 128.961086 549.74046 91.1688644 512.337849 109.87017 493.246933 54.1558639 437.532627 48.7013164 442.987174 99.3506855 493.246933 80.2597695 512.337849 118.051991 549.74046 74.805222 593.376839"></polygon>
                <polygon id="Shape" fill="#82D8F9" points="127.402644 612.467755 194.415655 545.065134 159.350707 510.389796 182.727339 487.792385 201.428645 487.792385 201.428645 480.389785 179.220844 480.389785 148.441612 510.389796 183.50656 545.454744 123.896149 604.675545 65.8441798 604.675545 55.714306 594.545671 101.298738 548.571628 75.5844431 522.857333 75.5844431 485.065112 28.8311793 438.311848 28.8311793 362.727405 1.16883159 335.454668 1.16883159 488.961217 66.6234009 554.415786 72.4675589 548.961239 8.96104222 485.844333 8.96104222 353.766363 21.0389687 366.2339 21.0389687 441.428732 67.7922325 488.181996 67.7922325 525.974217 90.7792538 548.571628 44.8052111 594.545671 62.7272956 612.467755"></polygon>
                <path d="M133.246802,635.065166 L176.10396,592.597618 L189.740329,606.233987 L238.052035,556.363839 L194.415655,513.11707 L197.532539,510.389796 L201.428645,510.389796 L201.428645,502.597586 L194.415655,502.597586 L183.50656,512.727459 L227.14294,556.363839 L189.740329,595.324892 L176.10396,581.688523 L130.129918,627.662566 L91.5584749,627.662566 L91.5584749,635.454777 L133.246802,635.065166 Z M236.883203,697.402851 L197.92215,658.052188 L216.233845,640.130103 L237.662424,661.558682 L276.233867,615.58464 L276.233867,547.402797 L268.441656,547.402797 L268.441656,612.467755 L237.662424,650.649588 L216.233845,629.221008 L187.013055,658.052188 L225.974108,697.402851 L195.194876,728.571694 L145.714339,679.091156 L140.649402,684.545704 L195.194876,739.091178 L236.883203,697.402851 Z" id="Shape" stroke="#82D8F9"></path>
                <path d="M176.883181,614.415808 L188.961108,626.493735 L233.376708,581.688523 L247.792298,593.76645 L247.792298,547.402797 L255.584509,547.402797 L255.584509,612.467755 L233.766319,592.987229 L188.961108,637.402829 L177.662402,625.714514 L153.89616,649.480756 L202.987087,698.571683 L197.142929,704.415841 L142.207844,649.480756 L176.883181,614.415808 Z M137.532518,418.0521 L151.948107,432.078079 L201.428645,432.078079 L201.428645,424.675479 L155.064992,424.675479 L137.532518,407.532616 L107.532507,435.584574 L112.597444,441.039122 L137.532518,418.0521 Z M275.844256,356.104026 L275.844256,321.818299 L219.74034,321.818299 L210.779298,312.467646 L219.74034,303.506604 L287.142962,303.506604 L287.142962,192.467603 L226.363719,192.467603 L183.896171,234.93515 L188.961108,240.389698 L229.480603,199.870203 L279.740362,199.870203 L279.740362,296.104004 L216.623455,296.104004 L199.870203,312.467646 L216.623455,329.220899 L268.441656,329.220899 L268.441656,356.104026 L275.844256,356.104026 Z M201.428645,373.246889 L201.428645,365.844289 L193.246824,365.844289 L137.142907,310.129983 L162.467592,285.194909 L108.311728,231.039045 L151.168886,188.181887 L145.714339,182.727339 L97.4026329,231.039045 L151.948107,285.194909 L126.623423,310.129983 L190.129939,373.246889 L201.428645,373.246889 Z" id="Shape" stroke="#82D8F9"></path>
                <path d="M227.53255,107.142896 L254.805288,107.142896 L254.805288,155.064992 L212.72735,155.064992 L212.72735,121.948096 L227.53255,107.142896 Z M82.5974327,395.065079 L77.5324958,390.000142 L51.0389796,389.220921 L40.9091058,399.350795 L59.2208008,418.831321 L82.5974327,395.065079 Z M179.220844,147.272781 L180.000066,120.389654 L169.870192,110.25978 L150.389665,128.961086 L174.155908,152.337718 L179.220844,147.272781 Z M56.1039165,493.246933 L22.2078003,459.350817 L22.2078003,482.727448 L56.1039165,516.623565 L56.1039165,493.246933 Z" id="Shape" stroke="#2AB6F4"></path>
            </g>
        </g>
    </g>
</svg>
</div>
!

CSS 

              
                body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.anim, .anim svg {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.anim path {
  stroke-width: 2;
}
!

JS 

              
                var pathEls = document.querySelectorAll('#Group1 path, #Group path');
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute('stroke-dashoffset', offset);
  anime({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: anime.random(1000, 3000),
    delay: anime.random(0, 2000),
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutSine',
    autoplay: true
  });
}
!
999px

Console