Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ 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

              
                <div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" width="760px" height="492px" viewBox="0 0 760 492" style="enable-background:new 0 0 760 492;" xml:space="preserve">
    <style type="text/css">
      .st0{fill:none;}
      .st1{fill:none;stroke:#B5B6B8;stroke-linecap:square;stroke-linejoin:round;}
      .st2{fill:none;stroke:#C6C8CA;}
      .st3{fill:#FFFFFF;stroke:#B5B6B8;stroke-width:2;stroke-linejoin:bevel;}
      .st4{stroke:#B5B6B8;stroke-width:2;stroke-linejoin:bevel;}
      .st5{fill:#FFFFFF;stroke:#B5B6B8;stroke-width:0.5;stroke-linejoin:bevel;}
      .st6{fill:#FFFFFF;stroke:#B5B6B8;stroke-linejoin:bevel;}
      .st9{fill:none;stroke:#6B6C6E;stroke-width:2;}
      .st10{fill:#6B6C6E;}
      .st11{fill:#FFFFFF;stroke:#6B6C6E;stroke-width:2;stroke-linejoin:bevel;}
      .st12{fill:none;stroke:#B5B6B8;stroke-width:2;stroke-linejoin:bevel;}
      .st13{fill:none;stroke:#C6C8CA;stroke-linejoin:bevel;}
      .st14{fill:none;stroke:#6B6C6E;stroke-width:0.5;}
      .st15{fill:none;stroke:#6B6C6E;stroke-width:2;stroke-linejoin:bevel;}
      .st16{fill:#2F292B;}
      .st17{fill:#E6E6E6;stroke:#B5B6B8;stroke-width:2;stroke-linejoin:bevel;}
    </style>

    <line class="st2 line" x1="21.9" y1="386" x2="233.8" y2="173.7"/>
    <line class="st2 line line--3" x1="35.1" y1="212.9" x2="35.1" y2="401.4"/>
    <line class="st2 line line--2" x1="0.4" y1="284.1" x2="219.9" y2="64.2"/>
    <line class="st2 line line--4" x1="205.8" y1="61.3" x2="205.8" y2="249.8"/>

    <g class="float float--4">
      <polygon class="st3" points="655.3,217.6 655.3,266.4 249.5,157.5 249.5,108.7"/>
      <polygon class="st4 color" points="655.3,217.6 655.3,266.4 249.5,157.5 249.5,108.7"/>
      <polygon class="st3" points="663.2,209.7 655.3,217.6 249.5,108.7 257.4,100.8"/>
      <polygon class="st3" points="655.3,217.7 663.2,209.8 663.2,258.6 655.3,266.5"/>
      <g>
        <path class="st5" d="M660.4,223.1c0,0.6-0.5,1.3-1.1,1.4c-0.6,0.2-1.1-0.2-1.1-0.8c0-0.6,0.5-1.3,1.1-1.4 C659.9,222.1,660.4,222.5,660.4,223.1z"/>
        <path class="st5" d="M660.4,252.5c0,0.6-0.5,1.3-1.1,1.4c-0.6,0.2-1.1-0.2-1.1-0.8s0.5-1.3,1.1-1.4 C659.9,251.6,660.4,251.9,660.4,252.5z"/>
      </g>
 
      <g>
        <line class="st14 line line--3" x1="622.4" y1="232.1" x2="622.4" y2="116.7"/>
        <circle class="st10" cx="622.4" cy="232" r="1.9"/>
        <circle class="st15" cx="622.4" cy="103.8" r="11.2"/>
        <path class="st16" d="M623.1,108.6c-0.7,0-1.3-0.1-1.8-0.3c-0.6-0.2-1-0.5-1.4-0.9c-0.4-0.4-0.7-0.9-0.9-1.4 c-0.2-0.6-0.3-1.2-0.3-2c0-0.7,0.1-1.3,0.3-1.9c0.2-0.6,0.5-1.1,0.9-1.5c0.4-0.4,0.9-0.7,1.4-0.9c0.6-0.2,1.2-0.3,1.9-0.3 c0.4,0,0.7,0,1,0.1c0.3,0,0.6,0.1,0.8,0.2c0.3,0.1,0.5,0.2,0.7,0.3c0.2,0.1,0.4,0.2,0.6,0.3v2.1H626c-0.1-0.1-0.3-0.2-0.4-0.3 c-0.2-0.1-0.4-0.3-0.6-0.4c-0.2-0.1-0.5-0.2-0.7-0.3c-0.3-0.1-0.5-0.1-0.8-0.1c-0.3,0-0.6,0.1-0.9,0.2c-0.3,0.1-0.6,0.3-0.8,0.5 c-0.2,0.2-0.4,0.5-0.6,0.9c-0.1,0.4-0.2,0.8-0.2,1.4c0,0.6,0.1,1,0.2,1.4c0.2,0.4,0.4,0.7,0.6,0.9c0.2,0.2,0.5,0.4,0.8,0.5 c0.3,0.1,0.6,0.1,0.9,0.1c0.3,0,0.6,0,0.8-0.1c0.3-0.1,0.5-0.2,0.8-0.3c0.2-0.1,0.4-0.2,0.5-0.4c0.2-0.1,0.3-0.2,0.4-0.3h0.2v2.1 c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.1-0.4,0.2-0.6,0.2c-0.3,0.1-0.6,0.1-0.8,0.2C623.9,108.5,623.6,108.6,623.1,108.6z"/>
      </g>
    </g>

    <polygon class="st4 color" points="663,306.2 530.3,438.8 124.8,330.3 257.4,197.6"/>
    
    <g class="shimmy shimmy--2">
      <polygon class="st3" points="61.5,264.4 194.1,131.6 194.1,180.4 61.5,313.2"/>
      <polygon class="st4 color" points="61.5,264.4 194.1,131.6 194.1,180.4 61.5,313.2"/>
      <polygon class="st3" points="51.3,261.8 61.5,264.4 61.5,313.2 51.3,310.5"/>
      <polygon class="st3" points="51.3,261.8 184,128.9 194.1,131.6 61.5,264.4"/>
      <g>
        <path class="st6" d="M71,268.3c0,1.1-0.9,2.2-2,2.5c-1.1,0.3-2-0.4-2-1.4s0.9-2.2,2-2.5S71,267.2,71,268.3z"/>
        <path class="st6" d="M70.8,295.8c0,1.1-0.9,2.2-2,2.5c-1.1,0.3-2-0.4-2-1.4s0.9-2.2,2-2.5C69.9,294.1,70.8,294.7,70.8,295.8z"/>
      </g>
      <g>
        <path class="st6" d="M188.3,151c0,1.1-0.9,2.2-2,2.5c-1.1,0.3-2-0.4-2-1.4c0-1.1,0.9-2.2,2-2.5S188.3,149.9,188.3,151z"/>
        <path class="st6" d="M188,178.5c0,1.1-0.9,2.2-2,2.5c-1.1,0.3-2-0.4-2-1.4c0-1.1,0.9-2.2,2-2.5S188,177.4,188,178.5z"/>
      </g>
      
      <g>
        <circle class="st15" cx="94.4" cy="103.8" r="11.2"/>
        <path class="st16" d="M98.9,104c0,0.8-0.2,1.6-0.6,2.2c-0.4,0.7-0.9,1.2-1.4,1.5c-0.4,0.3-0.9,0.4-1.4,0.5 c-0.5,0.1-1.1,0.2-1.8,0.2h-3.1v-8.9h3.2c0.7,0,1.3,0.1,1.9,0.2c0.5,0.1,1,0.3,1.3,0.5c0.6,0.4,1.1,0.9,1.4,1.5 C98.7,102.4,98.9,103.1,98.9,104z M96.5,104c0-0.6-0.1-1.1-0.3-1.5c-0.2-0.4-0.5-0.7-1-1c-0.2-0.1-0.5-0.2-0.7-0.2 s-0.6-0.1-1.1-0.1h-0.6v5.5h0.6c0.5,0,0.9,0,1.2-0.1c0.3-0.1,0.5-0.1,0.7-0.3c0.4-0.2,0.7-0.6,0.9-1C96.4,105,96.5,104.5,96.5,104z "/>
        <line class="st14 line line--2" x1="94.4" y1="255" x2="94.4" y2="116.7"/>
        <circle class="st10" cx="94.4" cy="254.9" r="1.9"/>
      </g>
    </g>

    <polygon class="st3" points="530.6,438.8 530.6,448.8 124.8,340.3 124.8,330.3"/>

    <g class="float">
      <polygon class="st3" points="335.4,201.9 452.2,85 452.2,127.9 335.4,244.9"/>
      <polygon class="st3" points="326.4,199.6 335.4,201.9 335.4,244.9 326.4,242.5"/>
      <polygon class="st3" points="326.4,199.6 443.2,82.6 452.2,85 335.4,201.9"/>
    </g>

    <g class="float float--2">
      <polygon class="st3" points="212,169.4 328.8,52.4 328.8,95.4 212,212.3"/>
      <polygon class="st3" points="203.1,167 212,169.4 212,212.3 203.1,210"/>
      <polygon class="st3" points="203.1,167 319.8,50.1 328.8,52.4 212,169.4"/>
    </g>

    <g class="float float--3">
      <polygon class="st3" points="478.9,238.5 595.6,121.5 595.6,164.5 478.9,281.5"/>
      <polygon class="st3" points="469.9,236.1 478.9,238.5 478.9,281.5 469.9,279.1"/>
      <polygon class="st3" points="469.9,236.1 586.7,119.2 595.6,121.5 478.9,238.5"/>
    </g>

    <g class="float">
      <polygon class="st3" points="530.6,342.5 530.6,391.3 124.8,282.5 124.8,233.7"/>
      <polygon class="st3" points="538.5,334.7 530.6,342.5 124.8,233.7 132.7,225.8"/>
      <polygon class="st3" points="530.6,342.7 538.5,334.8 538.5,383.6 530.6,391.4"/>
      <g>
        <path class="st5" d="M535.6,348.1c0,0.6-0.5,1.3-1.1,1.4c-0.6,0.2-1.1-0.2-1.1-0.8s0.5-1.3,1.1-1.4 C535.1,347.1,535.6,347.5,535.6,348.1z"/>
        <path class="st5" d="M535.6,377.5c0,0.6-0.5,1.3-1.1,1.4c-0.6,0.2-1.1-0.2-1.1-0.8s0.5-1.3,1.1-1.4 C535.1,376.5,535.6,376.9,535.6,377.5z"/>
      </g>
      
      <g>
        <line class="st14 line" x1="504.8" y1="346.9" x2="504.8" y2="116.7"/>
        <circle class="st10" cx="504.8" cy="346.8" r="1.9"/>
        <circle class="st15" cx="504.8" cy="103.8" r="11.2"/>
        <path class="st16" d="M508.8,105.7c0,0.4-0.1,0.8-0.3,1.1c-0.2,0.3-0.4,0.6-0.7,0.8c-0.4,0.3-0.7,0.4-1.2,0.6 c-0.4,0.1-1,0.2-1.6,0.2h-3.9v-8.9h3.4c0.7,0,1.2,0,1.6,0.1c0.3,0,0.7,0.2,1,0.3c0.3,0.2,0.6,0.4,0.8,0.7c0.2,0.3,0.2,0.6,0.2,1 c0,0.4-0.1,0.8-0.3,1.1c-0.2,0.3-0.5,0.6-1,0.8v0c0.6,0.1,1,0.4,1.4,0.7C508.7,104.6,508.8,105.1,508.8,105.7z M505.9,102 c0-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.3-0.4-0.3c-0.2-0.1-0.4-0.1-0.6-0.1c-0.2,0-0.6,0-1,0h-0.2v1.9h0.4c0.4,0,0.7,0,0.9,0 c0.3,0,0.5-0.1,0.6-0.1c0.2-0.1,0.3-0.2,0.4-0.4C505.9,102.4,505.9,102.2,505.9,102z M506.5,105.6c0-0.3-0.1-0.5-0.2-0.7 s-0.3-0.3-0.6-0.3c-0.2-0.1-0.4-0.1-0.7-0.1c-0.3,0-0.6,0-1,0h-0.5v2.2h0.2c0.6,0,1.1,0,1.4,0c0.3,0,0.5-0.1,0.8-0.2 c0.2-0.1,0.4-0.2,0.5-0.4C506.4,106,506.5,105.9,506.5,105.6z"/>
      </g>
    </g>

    <g>
      <g>
        <path class="st6" d="M163.6,328.8c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C164.7,330.4,164.7,329.4,163.6,328.8z"/>
        <path class="st6" d="M163.6,328.8c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C164.7,330.4,164.7,329.4,163.6,328.8z"/>
      </g>
      <g class="hover hover--3">
        <path class="st6" d="M164.1,303v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9V303c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C164.1,302.6,164.1,302.8,164.1,303z"/>
        <path class="st6" d="M164.1,303v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9V303c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C164.1,302.6,164.1,302.8,164.1,303z"/>
        <path class="st6" d="M164,302.4c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C163.3,301.4,163.8,301.8,164,302.4z"/>
        <path class="st6" d="M164,302.8c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3 c0.2-0.6,0.8-1.4,1.5-1.4h1.9C163.3,301.4,163.8,302.2,164,302.8z"/>
      </g>
    </g>

    <g>
      <g class="hover hover--2">
        <path class="st6" d="M262.8,331.3v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C262.8,330.9,262.8,331.1,262.8,331.3z"/>
        <path class="st6" d="M262.7,330.8c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C261.9,329.7,262.5,330.2,262.7,330.8z"/>
        <path class="st6" d="M262.7,331.1c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3 c0.2-0.6,0.8-1.4,1.5-1.4h1.9C261.9,329.7,262.5,330.5,262.7,331.1z"/>
      </g>
      <g>
        <path class="st6" d="M262.3,355.2c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0S263.4,355.8,262.3,355.2z"/>
        <path class="st6" d="M262.3,355.2c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0S263.4,355.8,262.3,355.2z"/>
      </g>
    </g>

    <g>
      <g class="hover">
        <path class="st6" d="M382.5,218.2v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C382.5,217.9,382.5,218.1,382.5,218.2z"/>
        <path class="st6" d="M382.5,218.2v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C382.5,217.9,382.5,218.1,382.5,218.2z"/>
        <path class="st6" d="M382.4,217.7c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C381.7,216.7,382.2,217.1,382.4,217.7z"/>
        <path class="st6" d="M382.4,218.1c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3 c0.2-0.6,0.8-1.4,1.5-1.4h1.9C381.7,216.7,382.2,217.5,382.4,218.1z"/>
      </g>
      <g>
        <path class="st6" d="M382,242.2c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C383.1,243.8,383.1,242.8,382,242.2z"/>
        <path class="st6" d="M382,242.2c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C383.1,243.8,383.1,242.8,382,242.2z"/>
      </g>
    </g>

    <g>
      <g class="hover hover--3">
        <path class="st6" d="M613.1,279.5v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C613,279.1,613.1,279.3,613.1,279.5z"/>
        <path class="st6" d="M613.1,279.5v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C613,279.1,613.1,279.3,613.1,279.5z"/>
        <path class="st6" d="M613,278.9c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C612.2,277.9,612.8,278.3,613,278.9z"/>
        <path class="st6" d="M613,279.3c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3 c0.2-0.6,0.8-1.4,1.5-1.4h1.9C612.2,277.9,612.8,278.7,613,279.3z"/>
      </g>
      <g>
        <path class="st6" d="M612.5,303.4c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C613.7,305,613.7,304,612.5,303.4z"/>
        <path class="st6" d="M612.5,303.4c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C613.7,305,613.7,304,612.5,303.4z"/>
      </g>
    </g>

    <g>
      <g class="hover hover--2">
        <path class="st6" d="M269.1,188.2v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C269.1,187.8,269.1,188,269.1,188.2z"/>
        <path class="st6" d="M269.1,188.2v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C269.1,187.8,269.1,188,269.1,188.2z"/>
        <path class="st6" d="M269,187.7c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C268.2,186.6,268.8,187,269,187.7z"/>
        <path class="st6" d="M269,188c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1.4,1.5-1.4 h1.9C268.2,186.6,268.8,187.4,269,188z"/>
      </g>
      <g>
        <path class="st6" d="M268.6,212.1c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C269.7,213.7,269.7,212.7,268.6,212.1z"/>
        <path class="st6" d="M268.6,212.1c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C269.7,213.7,269.7,212.7,268.6,212.1z"/>
      </g>
    </g>

    <g>
      <g class="hover">
        <path class="st7" d="M379.7,362.4v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C379.7,362,379.7,362.2,379.7,362.4z"/>
        <path class="st6" d="M379.7,362.4v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C379.7,362,379.7,362.2,379.7,362.4z"/>
        <path class="st6" d="M379.6,361.9c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C378.8,360.8,379.4,361.3,379.6,361.9z"/>
        <path class="st6" d="M379.6,362.2c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3 c0.2-0.6,0.8-1.4,1.5-1.4h1.9C378.8,360.8,379.4,361.6,379.6,362.2z"/>
      </g>
      <g>
        <path class="st6" d="M379.2,386.3c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C380.3,387.9,380.3,386.9,379.2,386.3z"/>
        <path class="st6" d="M379.2,386.3c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C380.3,387.9,380.3,386.9,379.2,386.3z"/>
      </g>
    </g>

    <g>
      <g class="hover hover--3">
        <path class="st8" d="M511.5,397.5v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C511.5,397.2,511.5,397.3,511.5,397.5z"/>
        <path class="st6" d="M511.5,397.5v13.2c0,1-0.8,1.9-1.9,1.9l-1.3,0c-1,0-1.9-0.8-1.9-1.9v-13.2c0-0.2,0-0.4,0.1-0.5 c0.2-0.6,0.8-1,1.5-1h1.9c0.7,0,1.3,0.4,1.5,1C511.5,397.2,511.5,397.3,511.5,397.5z"/>
        <path class="st6" d="M511.4,397c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3c0.2-0.6,0.8-1,1.5-1 h1.9C510.6,396,511.2,396.4,511.4,397z"/>
        <path class="st6" d="M511.4,397.4c-0.1,0.1-0.3,0.2-0.4,0.3c-1.1,0.6-2.9,0.6-4,0c-0.2-0.1-0.3-0.2-0.4-0.3 c0.2-0.6,0.8-1.4,1.5-1.4h1.9C510.6,396,511.2,396.8,511.4,397.4z"/>
      </g>
      <g>
        <path class="st6" d="M511,421.4c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C512.1,423.1,512.1,422.1,511,421.4z"/>
        <path class="st6" d="M511,421.4c-1.1-0.6-2.9-0.6-4,0c-1.1,0.6-1.1,1.6,0,2.2c1.1,0.6,2.9,0.6,4,0 C512.1,423.1,512.1,422.1,511,421.4z"/>
      </g>
    </g>

    <polygon class="st3" points="530.5,438.8 663.1,306.1 663.1,316.1 530.5,448.8"/>

    <g class="shimmy">
      <polygon class="st3" points="587.1,357.8 719.7,225 719.7,273.7 587.1,406.6"/>
      <polygon class="st3" points="576.9,355.1 587.1,357.8 587.1,406.6 576.9,403.9"/>
      <polygon class="st3" points="576.9,355.1 709.6,222.3 719.7,225 587.1,357.8"/>
      
      <g>
        <line class="st14 line line--2" x1="708.6" y1="264.7" x2="708.6" y2="149.3"/>
        <circle class="st10" cx="708.6" cy="264.6" r="1.9"/>
        <circle class="st15" cx="708.6" cy="136.4" r="11.2"/>
        <path class="st16" d="M712,141h-6.4v-8.9h6.4v1.7h-4.1v1.5h3.8v1.7h-3.8v2.2h4.1V141z"/>
      </g>
    </g>

    <g>
      <path class="st11 instruct--1" d="M489.3,388.5c0,22.6-18.3,40.9-40.9,40.9c-19.6,0-36-13.8-40-32.1c-0.6-2.8-22-8.8-22-8.8s21.3-5.3,21.8-7.8 c3.6-18.9,20.3-33.1,40.2-33.1C471,347.5,489.3,365.8,489.3,388.5z"/>
      <g class="instruct--2">
        <path class="st17" d="M453.5,364.3v27c0,2.1-1.7,3.8-3.8,3.8l-2.6,0c-2.1,0-3.8-1.7-3.8-3.8v-27c0-0.4,0.1-0.7,0.2-1.1 c0.5-1.2,1.6-2.1,3-2.1h3.9c1.4,0,2.6,0.9,3,2.1C453.5,363.5,453.5,363.9,453.5,364.3z"/>
        <path class="st3" d="M453.3,363.2c-0.2,0.2-0.5,0.4-0.9,0.6c-2.3,1.3-6,1.3-8.2,0c-0.3-0.2-0.6-0.4-0.9-0.6 c0.5-1.2,1.6-2.1,3-2.1h3.9C451.7,361.1,452.9,362,453.3,363.2z"/>
        <path class="st3" d="M453.3,363.9c-0.2,0.2-0.5,0.4-0.9,0.6c-2.3,1.3-6,1.3-8.2,0c-0.3-0.2-0.6-0.4-0.9-0.6 c0.5-1.2,1.6-2.8,3-2.8h3.9C451.7,361.1,452.9,362.7,453.3,363.9z"/>
        <path class="st12" d="M446.5,409.5c-0.8,0.2-1.6,0.4-2.2,0.8c-2.3,1.3-2.3,3.3,0,4.6s6,1.3,8.2,0s2.3-3.3,0-4.6 c-0.6-0.3-1.3-0.6-2.1-0.7"/>
        <line class="st13" x1="448.4" y1="397.7" x2="448.4" y2="414.3"/>
      </g>
    </g>

    <g>
      <polygon class="st10" points="569.8,379.1 556.8,375.6 556.8,372.7 569.8,376.2"/>
      <polygon class="st10" points="557.4,378.7 557.4,370 553,373.2"/>
    </g>

    <g>
      <polygon class="st10" points="44.8,330.8 57.8,334.3 57.8,337.2 44.8,333.7"/>
      <polygon class="st10" points="57.2,331.2 57.2,339.9 61.6,336.7"/>
    </g>

    <g>
      <polygon class="st10" points="44.8,221.8 57.8,225.3 57.8,228.1 44.8,224.6"/>
      <polygon class="st10" points="57.2,222.2 57.2,230.9 61.6,227.7"/>
    </g>

    <g>
      <polygon class="st10" points="207,231.7 204.2,230.9 204.2,217.9 207,218.7"/>
      <polygon class="st10" points="210,231.9 201.2,229.5 205.6,235.1"/>
    </g>

    <g>
      <polygon class="st10" points="330.8,264 327.9,263.2 327.9,250.2 330.8,250.9"/>
      <polygon class="st10" points="333.7,264.1 325,261.8 329.4,267.3"/>
    </g>

    <g>
      <polygon class="st10" points="474.3,300.5 471.4,299.8 471.4,286.8 474.3,287.5"/>
      <polygon class="st10" points="477.2,300.7 468.5,298.4 472.8,303.9"/>
    </g>

    <g>
      <line class="st14 line line--4" x1="299.1" y1="233.5" x2="299.1" y2="25.2"/>
      <circle class="st10" cx="299.1" cy="233.4" r="1.9"/>
      <circle class="st15" cx="299.1" cy="12.2" r="11.2"/>
      <path class="st16" d="M303.7,16.9h-2.4l-0.6-1.8h-3.3l-0.6,1.8h-2.3l3.3-8.9h2.6L303.7,16.9z M300.2,13.4l-1.1-3.2l-1.1,3.2H300.2z "/>
    </g>

    <g>
      <rect x="72.4" y="394.5" class="st3" width="41.6" height="56"/>
      <rect x="114" y="394.5" class="st3" width="41.6" height="56"/>
      <g>
        <path class="st17" d="M96.9,405.3v19.3c0,1.5-1.2,2.7-2.7,2.7l-1.9,0c-1.5,0-2.7-1.2-2.7-2.7v-19.3c0-0.3,0-0.5,0.1-0.8 c0.3-0.9,1.2-1.5,2.1-1.5h2.8c1,0,1.8,0.6,2.1,1.5C96.9,404.8,96.9,405,96.9,405.3z"/>
        <path class="st3" d="M96.8,404.5c-0.2,0.1-0.4,0.3-0.6,0.4c-1.6,0.9-4.3,0.9-5.9,0c-0.2-0.1-0.4-0.3-0.6-0.4 c0.3-0.9,1.2-1.5,2.1-1.5h2.8C95.6,403,96.5,403.6,96.8,404.5z"/>
        <path class="st3" d="M96.8,405.1c-0.2,0.1-0.4,0.3-0.6,0.4c-1.6,0.9-4.3,0.9-5.9,0c-0.2-0.1-0.4-0.3-0.6-0.4 c0.3-0.9,1.2-2,2.1-2h2.8C95.6,403,96.5,404.2,96.8,405.1z"/>
        <path class="st12" d="M91.9,437.6c-0.6,0.1-1.1,0.3-1.6,0.6c-1.6,0.9-1.6,2.4,0,3.3s4.3,0.9,5.9,0s1.6-2.4,0-3.3 c-0.4-0.2-0.9-0.4-1.5-0.5"/>
        <line class="st13" x1="93.2" y1="429.2" x2="93.2" y2="441"/>
      </g>
      <g>
        <path class="st17" d="M133.7,404.8l5,18.6c0.4,1.5-0.5,2.9-1.9,3.3l-1.8,0.5c-1.5,0.4-3-0.5-3.4-1.9l-5-18.6 c-0.1-0.3-0.1-0.5-0.1-0.8c0.1-0.9,0.7-1.7,1.7-2l2.7-0.7c1-0.3,1.9,0.1,2.5,0.9C133.5,404.3,133.7,404.5,133.7,404.8z"/>
        <path class="st3" d="M133.4,404.1c-0.1,0.2-0.3,0.4-0.5,0.6c-1.3,1.3-3.9,2-5.7,1.5c-0.3-0.1-0.5-0.1-0.7-0.3 c0.1-0.9,0.7-1.7,1.7-2l2.7-0.7C131.9,402.9,132.9,403.3,133.4,404.1z"/>
        <path class="st3" d="M133.5,404.6c-0.1,0.2-0.3,0.4-0.5,0.6c-1.3,1.3-3.9,2-5.7,1.5c-0.3-0.1-0.5-0.1-0.7-0.3 c0.1-0.9,0.6-2.2,1.5-2.5l2.7-0.7C131.9,402.9,133,403.8,133.5,404.6z"/>
      </g>
      <path class="st12" d="M137.5,437.5c-0.6,0.1-1.1,0.3-1.6,0.6c-1.6,0.9-1.6,2.4,0,3.3c1.6,0.9,4.3,0.9,5.9,0s1.6-2.4,0-3.3 c-0.4-0.2-0.9-0.4-1.5-0.5"/>
      <line class="st13" x1="136.4" y1="428.8" x2="139.4" y2="440.3"/>
      <line class="st15" x1="125.1" y1="412.9" x2="144.4" y2="432.2"/>
      <line class="st15" x1="125.1" y1="432.2" x2="144.4" y2="412.9"/>
    </g>

    <line class="st2 line line--4" x1="548.4" y1="476.4" x2="760.4" y2="264.1"/>
    <line class="st2 line" x1="561.6" y1="303.3" x2="561.6" y2="491.8"/>
    <line class="st2 line line--3" x1="526.9" y1="374.5" x2="746.5" y2="154.6"/>
    <line class="st2 line line--2" x1="732.4" y1="151.7" x2="732.4" y2="340.2"/>
  </svg>
</div>
              
            
!

CSS

              
                body
  display: flex
  height: 100vh
  
.wrap
  margin: auto
  width: 70%
  svg
    width: 100%
  
// ----- Line ----- //
  
.line
  animation: line 2.5s ease-in-out infinite alternate both
  stroke-dasharray: 350
  stroke-dashoffset: 350

.line--2
  animation-delay: 1.25s
  
.line--3
  animation-delay: -0.625s

.line--4
  animation-delay: -1.875s
  
@keyframes line
  from
    stroke-dashoffset: 0
  
// ----- Float ----- //
    
.float
  animation: float 2.5s ease infinite alternate both

.float--2
  animation-delay: -1.875s
  
.float--3
  animation-delay: 1.25s
  
.float--4
  animation-delay: 0.625s
  
@keyframes float
  from
    transform: translateY(-15px)
  
// ----- Hover ----- //
    
.hover
  animation: hover 2.5s ease infinite alternate both
  
.hover--2
  animation-delay: -1.25s

@keyframes hover
  from
    transform: translateY(3px)
  to
    transform: translateY(-3px)
  
// ----- Shimmy ----- //
    
.shimmy
  animation: shimmy 2.5s ease infinite alternate both
  
.shimmy--2
  animation-delay: -1.25s
  
@keyframes shimmy
  from
    transform: translate(10px, 3px)
  
// ----- Instruct ----- //

.instruct--1
  animation: instruct--1 2.5s ease-out infinite alternate both
  stroke-dasharray: 300
  stroke-dashoffset: 300
  
@keyframes instruct--1
  from
    fill: transparent
  to
    fill: white
    stroke-dashoffset: 0

.instruct--2
  animation: instruct--2 2.5s ease-in-out infinite alternate both
  
@keyframes instruct--2
  0%, 33%
    opacity: 0
  
// ----- Instruct ----- //
  
.color
  animation: color 2.5s linear infinite alternate both
  fill: #FFF
  
@keyframes color
  to
    fill: #E6E6E6
              
            
!

JS

              
                
              
            
!
999px

Console