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

              
                <button class="draw">Draw</button><button class="reset">Reset</button>
<div id="stage" width="800" height="600" style="width: 800px; height: 600px;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600" x="0" y="0" id="stage-master" style="background: rgba(0, 0, 0, 0);">
    
<!--     <g id="gp-1" class="svg-wrapper" ref="3" x="0" y="0" height="308" width="308" data-svg-origin="220.5 220.5" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); z-index: 1006;">
      <g id="flipper-1" class="ga-flipper">
        <svg xmlns="http://www.w3.org/2000/svg" id="svg-1" viewBox="0 0 308 308" class="svg inline" role="img" ref="3" height="443" width="443" x="0" y="0" data-svg-origin="154 154" style="transform-origin: 0px 0px 0px; transform: matrix(1.42903, 0, 0, 1.42903, -66.071, -66.071);">
          <title>Rectangle</title>
          <rect x="4" y="4" fill="white" stroke="black" stroke-width="4" stroke-miterlimit="8" width="300" height="300"></rect>
          <rect class="ga-selector" x="0" y="0" width="100%" height="100%" fill="rgba(0,0,0,0)" vector-effect="non-scaling-stroke" stroke="#8b9dc3" stroke-width="3" stroke-miterlimit="6" stroke-dasharray="1 5" style="opacity: 1; cursor: move; touch-action: none; -webkit-user-select: none;"></rect>
        </svg>
      </g>
    </g> -->

<!--     <g id="gp-1" class="svg-wrapper" ref="1" x="0" y="0" height="256" width="256" data-svg-origin="207.5 207.5" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 191.5, 91.5, 0, 1); z-index: 1003;">
      <svg xmlns="http://www.w3.org/2000/svg" id="svg-1" viewBox="0 0 256 256" class="svg inline" role="img" ref="1" height="417" width="417" x="0" y="0" data-svg-origin="128 128" style="transform-origin: 0px 0px 0px; transform: matrix(1.6289, 0, 0, 1.6289, -80.5, -80.5);">
        <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M119.6,188.9H22.4c-6.5,0-13.3-4.9-13.3-11.4V81.3c0-6.5,6.8-12.4,13.3-12.4h3.5c6.5,0,11.7-5.1,11.7-11.6l1.2-12.4  c0-6.5,4.1-12,10.6-12h44c6.5,0,14.3,4.5,17.4,10.1l8.7,16c3.1,5.7,10.9,9.8,17.4,9.8h90.9c6.5,0,10.4,5.9,10.4,12.4v15.2"></path>
        <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M246.9,167.4c0-27.7-23.6-55.3-55.1-55.3c-35.5,0-57.4,27.6-57.4,55.3s19,55.7,55.2,55.7C225.3,222.9,246.9,195.1,246.9,167.4z"></path>
        <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M176.7,138c-2.7,2.9-4,6.5-4,10.8 M203.1,137.4c-2.5-2.3-5.7-3.9-10-4.2c-1.4-0.1-4.3-0.1-5.7,0c-4.8,0.2-8,2.1-10.7,5 M207.9,146.5  c-0.7-3.9-2.3-7.1-4.8-9.4 M172.7,148.9c0,4.2,1.1,7.8,3.5,10.8s9.2,5.9,14.6,7.6 M190.1,122.4v90 M207.9,185.6  c0-4.2-1.1-7.8-3.5-10.8s-8-5.9-13.2-7.3 M203.9,196.3c2.7-2.9,4-6.5,4-10.8 M177.5,197.1c2.5,2.3,5.7,3.8,10,4.3c0,0,10,2,16.4-5   M172.7,187.8c0.7,3.9,2.3,7.1,4.8,9.4"></path>
      </svg>
    </g> -->
    
<!--     <g id="gp-1" class="svg-wrapper" ref="1" x="0" y="0" height="256" width="256" data-svg-origin="204.5 204.5" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1); z-index: 1004;">
      <g id="flipper-1" class="ga-flipper">
          <svg xmlns="http://www.w3.org/2000/svg" id="svg-1" viewBox="0 0 256 256" class="svg inline" role="img" ref="1" height="411" width="411" x="0" y="0" data-svg-origin="128 128" style="transform-origin: 0px 0px 0px; transform: matrix(1.60546, 0, 0, 1.60546, -77.5, -77.5);">
              <g id="Tables">
              </g>
              <polyline fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  198.5,198.7 198.5,243.2 58.5,243.2 58.5,199.7 "></polyline>
              <rect x="100.5" y="113.2" fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="55" height="130"></rect>
              <polygon fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  217.5,159.2 211.5,159.2 211.5,188.1 198.6,199.6 184.5,188.1 184.5,159.2 177.5,159.2 177.5,130.2 217.5,130.2 "></polygon>
              <polygon fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  77.5,159.2 71.5,159.2 71.5,188.1 58.6,199.6 44.5,188.1 44.5,159.2 37.5,159.2 37.5,130.2 77.5,130.2 "></polygon>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M121.5,169.2V145c0-3.6,3.4-6.4,7-6.4l0,0c3.6,0,7,2.9,7,6.4v24.2H121.5z"></path>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M57.7,91c0,0,7.6,16.3,10.6,21.3c7.9,13.2,16.9,17.9,16.9,17.9H57.7H30.2c0,0,7.8-3.5,16.9-17.9C50.2,107.3,57.7,91,57.7,91z"></path>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M128.3,58.5c0,0,10.6,22.8,14.8,29.8c11.1,18.4,23.6,24.8,23.6,24.8h-38.4H89.9c0,0,10.9-4.7,23.6-24.8  C117.9,81.4,128.3,58.5,128.3,58.5z"></path>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M198.3,91c0,0,7.6,16.3,10.6,21.3c7.9,13.2,16.9,17.9,16.9,17.9h-27.5h-27.5c0,0,7.8-3.5,16.9-17.9C190.9,107.3,198.3,91,198.3,91z"></path>
              <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="44" y1="159.2" x2="72" y2="159.2"></line>
              <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="184" y1="159.2" x2="211" y2="159.2"></line>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M117.5,241.7v-23.5c0-6.1,5.1-11,11.2-11h0.3c6.1,0,11.5,4.8,11.5,11v23.5"></path>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M50.5,152.2V145c0-3.6,3.4-6.4,7-6.4l0,0c3.6,0,7,2.9,7,6.4v7.2H50.5z M191.5,152.2V145c0-3.6,3.4-6.4,7-6.4l0,0c3.6,0,7,2.9,7,6.4  v7.2H191.5z M128.5,58.7v-5 M133.1,46.7c0,2.4-1.9,4.3-4.3,4.3s-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3  C131.2,42.4,133.1,44.3,133.1,46.7z"></path>
              <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M115,88.2h26 M72,167.2h12h9h6 M156,167.2h7h8h12 M57.5,90.7v-17 M76.5,70.8l-19,9.2V61.6L76.5,70.8z M198.5,90.7v-17 M217.5,70.8  l-19,9.2V61.6L217.5,70.8z M128.5,39.7v-12 M151.3,16.1l-22.8,12.4V8.8L151.3,16.1z M129.5,207.7v34"></path>
          </svg>
      </g>
  </g> -->

<!--     <g id="gp-1" class="svg-wrapper" ref="3" x="0" y="0" height="310" width="310" data-svg-origin="265 265" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1); z-index: 1039;">
        <g id="flipper-1" class="ga-flipper">
            <svg xmlns="http://www.w3.org/2000/svg" id="svg-1" viewBox="0 0 310 310" class="svg inline" role="img" ref="3" height="532" width="532" x="0" y="0" data-svg-origin="155 155" style="transform-origin: 0px 0px 0px; transform: matrix(1.71612, 0, 0, 1.71612, -111, -111);">
                <rect x="10" y="10" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="290" height="290"></rect>
                <rect x="60" y="10" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="95" height="47.7"></rect>
                <path fill="rgba(0,0,0,0)" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="  M250,10v290 M60,10v290 M250,155H60"></path>
                <rect x="60" y="10" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="140" height="95"></rect>
                <rect x="155" y="252.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 405 552.3282)" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="95" height="47.7"></rect>
                <rect x="110" y="205" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 360 505)" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="140" height="95"></rect>
            </svg>
        </g>
    </g> -->
    
<!--     <g id="gp-1" class="svg-wrapper" ref="1" x="0" y="0" height="117" width="293" data-svg-origin="145.5 57.5" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 253.5, 124.5, 0, 1); z-index: 1018;">
        <g id="flipper-1" class="ga-flipper">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="293" height="117" viewBox="0 0 293 117" id="svg-1" class="svg inline" ref="1" x="0" y="0">
                <title>want to</title>
                <g>
                    <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M42.30 42.70L39.06 62.92L38.04 62.92L38.04 42.70L25.20 42.70L25.20 47.92L29.52 84.70L44.16 84.70L47.34 68.20L48.24 68.20L51.42 84.70L66.12 84.70L70.38 47.92L70.38 42.70L57.60 42.70L57.60 62.92L56.52 62.92L53.28 42.70Z"></path>
                    <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M85.86 65.74L87.06 53.26L88.50 53.26L89.70 65.74Z M76.86 42.70 L70.98 79.48 L70.98 84.70 L84.06 84.70 L84.90 76.24 L90.66 76.24 L91.44 84.70 L104.58 84.70 L104.58 79.48 L98.70 42.70Z"></path>
                    <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M128.22 62.14L122.10 42.70L108.18 42.70L108.18 84.70L120.24 84.70L120.24 79.48L118.56 65.32L119.58 65.32L125.76 84.70L139.68 84.70L139.68 42.70L127.56 42.70L127.56 47.92L129.30 62.14Z"></path>
                    <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M150.54 53.26L150.54 84.70L163.68 84.70L163.68 53.26L169.98 53.26L172.08 47.92L172.08 42.70L142.68 42.70L142.68 53.26Z"></path>
                    <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M210.54 53.26L210.54 84.70L223.68 84.70L223.68 53.26L229.98 53.26L232.08 47.92L232.08 42.70L202.68 42.70L202.68 53.26Z"></path>
                    <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M253.44 53.26L253.44 74.20L248.22 74.20L248.22 53.26ZM261.30 84.70C264.42 84.70 266.58 82.54 266.58 79.48L266.58 47.92C266.58 44.86 264.42 42.70 261.30 42.70L240.36 42.70C237.24 42.70 235.08 44.86 235.08 47.92L235.08 79.48C235.08 82.54 237.24 84.70 240.36 84.70Z"></path>
                </g>
            </svg>
        </g>
    </g>
 -->
    
<g id="gp-1" class="svg-wrapper" ref="6" x="0" y="0" height="134" width="679" data-svg-origin="338.5 66" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 60.5, 233, 0, 1);">
    <g id="flipper-1" class="ga-flipper">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="679" height="134" viewBox="0 0 679 134" id="svg-1" class="svg inline" ref="6" x="0" y="0">
            <title>time to test some text!</title>
            <g>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M66.56 38.88Q65.84 41.76 63.84 42.24Q58.64 43.52 45.76 45.60Q44.16 65.52 44.16 78.80Q44.16 83.84 44.32 88.72Q44.40 90.24 44.16 91.04Q43.76 92.32 42.56 92.24Q40.24 92.16 38.72 90.28Q37.20 88.40 37.04 86.08Q36.88 83.12 36.88 79.84Q36.88 74.56 37.60 63.12Q38.32 52.16 38.24 46.40Q36.08 46.24 32.24 46.80Q27.84 47.44 26.16 47.44Q22.24 47.44 19.76 45.36Q18.80 43.28 18.80 43.20Q18.80 42.64 19.36 42Q21.92 41.12 29.84 40.40Q36.80 39.68 40.24 37.84Q43.04 38.72 46.64 38.72Q50.24 38.72 53.52 37.84Q54.48 37.76 58.40 36.72Q61.28 36 63.20 36.24Q64.64 36.24 64.40 37.44Q66.56 37.44 66.56 38.88Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M64.96 48.24Q65.12 50.56 65.12 53.04Q65.12 58.48 64 69.44Q62.88 80.40 62.88 86Q62.88 88.08 62.96 90.08Q62.24 92.32 59.84 92.24Q56.40 92.08 56.08 89.28Q55.76 86.48 55.76 83.36Q55.76 77.92 57.08 67.12Q58.40 56.32 58.40 50.96Q58.40 48.88 58.24 46.88Q59.04 45.36 60.96 45.36Q62.48 45.36 64 46.24Q64.32 46 64.48 46Q64.72 46 64.72 46.80Q64.64 47.76 64.72 47.92Q64.80 48.16 64.96 48.24Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M108.80 90.08Q109.12 91.68 106.48 91.84Q104.72 91.92 102.88 90.32Q101.36 88.96 100.48 85.92Q99.68 83.12 99.52 78Q99.36 72.24 98.96 70.08Q97.92 73.68 95.52 80.80Q94.08 84.72 93.76 85.28Q92.48 87.76 90.56 87.52Q86.72 86.64 84.64 83.20Q83.28 80.96 82.08 76.08Q80.80 70.72 79.92 68.88Q76.48 85.60 72.56 93.84Q72 95.04 69.20 93.68Q66.88 92.56 66.88 90.48Q66.88 89.76 68.56 85.36Q69.28 83.44 74.16 66.88Q75.84 61.12 77.68 46.64Q77.84 46.48 78.48 44.96Q78.88 43.84 79.92 43.84Q82.64 43.84 83.68 44.88Q83.68 47.20 84.44 52.36Q85.20 57.52 85.20 60.16Q85.92 64.64 86.56 69.20Q87.44 74.32 89.76 77.60Q97.44 56.24 99.52 43.84Q99.84 42.56 101.92 42.56Q104.88 42.56 105.28 44.48Q105.84 47.36 105.84 51.12Q105.84 52.32 105.68 56.32Q105.60 59.68 105.68 61.76Q106.40 78.64 108.80 90.08Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M140.32 48.72Q137.36 49.92 131.60 51.52Q125.84 53.12 122.88 54.32Q122.16 56.40 121.84 63.60Q123.12 64.08 124.80 64.08Q126 64.08 128.56 63.68Q131.12 63.28 132.32 63.28Q134.56 63.28 136.16 64.24Q137.28 65.84 137.28 66.32Q137.28 66.88 136.72 67.20Q136.56 67.28 135.60 68.32Q134.96 69.04 134 68.96Q132.32 69.36 127.84 69.44Q124.08 69.52 121.84 70.40Q120.32 76.32 120.32 79.76Q120.32 82.08 120.96 83.44Q124.72 86.08 134 85.68Q134.64 85.68 135.36 85.08Q136.08 84.48 136.56 84.48Q138.80 84 139.52 87.84Q139.76 89.12 139.08 90.20Q138.40 91.28 137.12 91.36Q127.44 91.68 120.32 89.84Q118.08 89.28 116.24 87.36Q114.40 85.44 114.16 83.04Q113.44 76.08 114.16 70.56Q111.92 69.04 112.16 67.60Q112.24 66.88 113.40 66.28Q114.56 65.68 114.72 65.04Q114.88 64.40 115.36 57.44Q110.88 56.56 110.96 54.08Q111.04 51.76 113.76 50.40Q116.32 49.36 118.88 48.32Q121.92 46.80 126.40 45.60Q130.24 44.56 134.16 43.60Q134.56 43.52 135.12 43.52Q137.28 43.52 140.16 45.20Q140.24 45.52 140.56 46.40Q140.88 47.28 140.88 47.68Q140.88 48.32 140.32 48.72Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M202.40 38.88Q201.68 41.76 199.68 42.24Q194.48 43.52 181.60 45.60Q180 65.52 180 78.80Q180 83.84 180.16 88.72Q180.24 90.24 180 91.04Q179.60 92.32 178.40 92.24Q176.08 92.16 174.56 90.28Q173.04 88.40 172.88 86.08Q172.72 83.12 172.72 79.84Q172.72 74.56 173.44 63.12Q174.16 52.16 174.08 46.40Q171.92 46.24 168.08 46.80Q163.68 47.44 162 47.44Q158.08 47.44 155.60 45.36Q154.64 43.28 154.64 43.20Q154.64 42.64 155.20 42Q157.76 41.12 165.68 40.40Q172.64 39.68 176.08 37.84Q178.88 38.72 182.48 38.72Q186.08 38.72 189.36 37.84Q190.32 37.76 194.24 36.72Q197.12 36 199.04 36.24Q200.48 36.24 200.24 37.44Q202.40 37.44 202.40 38.88Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M218.88 71.44Q214.16 82.08 205.52 84.08Q204.48 84.32 203.44 84.32Q198.88 84.32 194.24 79.36Q191.12 76 191.12 70.64Q191.12 64.72 194.64 57.92Q196.16 55.04 198.32 52.96Q200.80 50.48 203.04 50.48Q204.32 50.48 205.44 51.44Q206.56 52.40 211.44 54Q215.28 55.28 216.88 58.32Q219.68 63.68 219.68 67.52Q219.68 69.68 218.88 71.44M212.48 66.48Q211.92 60.64 209.36 59.52Q208.96 59.36 208.64 59.36Q207.68 59.36 206.24 60.96Q204.64 62.80 203.76 63.12Q203.20 63.36 202.16 62.64Q201.12 61.92 200.80 61.92Q200.56 61.92 200.40 62.08Q197.60 64.48 197.60 69.52Q197.60 72.96 199.20 75.36Q201.44 78.64 202.96 78.64Q206.48 78.64 209.76 74.24Q212.88 70.08 212.48 66.48Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M282.72 38.88Q282 41.76 280 42.24Q274.80 43.52 261.92 45.60Q260.32 65.52 260.32 78.80Q260.32 83.84 260.48 88.72Q260.56 90.24 260.32 91.04Q259.92 92.32 258.72 92.24Q256.40 92.16 254.88 90.28Q253.36 88.40 253.20 86.08Q253.04 83.12 253.04 79.84Q253.04 74.56 253.76 63.12Q254.48 52.16 254.40 46.40Q252.24 46.24 248.40 46.80Q244 47.44 242.32 47.44Q238.40 47.44 235.92 45.36Q234.96 43.28 234.96 43.20Q234.96 42.64 235.52 42Q238.08 41.12 246 40.40Q252.96 39.68 256.40 37.84Q259.20 38.72 262.80 38.72Q266.40 38.72 269.68 37.84Q270.64 37.76 274.56 36.72Q277.44 36 279.36 36.24Q280.80 36.24 280.56 37.44Q282.72 37.44 282.72 38.88Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M299.52 48.72Q296.56 49.92 290.80 51.52Q285.04 53.12 282.08 54.32Q281.36 56.40 281.04 63.60Q282.32 64.08 284 64.08Q285.20 64.08 287.76 63.68Q290.32 63.28 291.52 63.28Q293.76 63.28 295.36 64.24Q296.48 65.84 296.48 66.32Q296.48 66.88 295.92 67.20Q295.76 67.28 294.80 68.32Q294.16 69.04 293.20 68.96Q291.52 69.36 287.04 69.44Q283.28 69.52 281.04 70.40Q279.52 76.32 279.52 79.76Q279.52 82.08 280.16 83.44Q283.92 86.08 293.20 85.68Q293.84 85.68 294.56 85.08Q295.28 84.48 295.76 84.48Q298 84 298.72 87.84Q298.96 89.12 298.28 90.20Q297.60 91.28 296.32 91.36Q286.64 91.68 279.52 89.84Q277.28 89.28 275.44 87.36Q273.60 85.44 273.36 83.04Q272.64 76.08 273.36 70.56Q271.12 69.04 271.36 67.60Q271.44 66.88 272.60 66.28Q273.76 65.68 273.92 65.04Q274.08 64.40 274.56 57.44Q270.08 56.56 270.16 54.08Q270.24 51.76 272.96 50.40Q275.52 49.36 278.08 48.32Q281.12 46.80 285.60 45.60Q289.44 44.56 293.36 43.60Q293.76 43.52 294.32 43.52Q296.48 43.52 299.36 45.20Q299.44 45.52 299.76 46.40Q300.08 47.28 300.08 47.68Q300.08 48.32 299.52 48.72Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M318.32 40.32Q318.32 41.92 316.00 43.12Q315.36 43.44 314.64 43.20Q313.52 42.88 313.44 42.88Q312.96 42.88 312.48 43.36Q308.16 47.68 308.16 53.92Q308.16 56.24 308.88 58.24Q309.20 59.12 314.96 70.64Q318.80 78.32 318.80 83.68Q318.80 88.08 316.64 92.16Q315.92 93.52 313.04 95.68Q310.72 97.36 308.88 97.36Q308.16 97.36 307.52 97.12Q305.12 96.08 305.12 94.48Q305.12 93.52 306.32 92.16Q306.64 91.76 307.84 91.68Q309.04 91.60 309.44 90.72Q311.12 87.20 311.12 83.52Q311.12 78.32 305.96 68.44Q300.80 58.56 300.80 52.64Q300.80 47.76 302.72 43.92Q304.88 39.52 308.88 37.60Q310.72 36.72 312.48 36.72Q315.84 36.72 317.52 38.56Q318.32 39.44 318.32 40.32Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M363.76 38.88Q363.04 41.76 361.04 42.24Q355.84 43.52 342.96 45.60Q341.36 65.52 341.36 78.80Q341.36 83.84 341.52 88.72Q341.60 90.24 341.36 91.04Q340.96 92.32 339.76 92.24Q337.44 92.16 335.92 90.28Q334.40 88.40 334.24 86.08Q334.08 83.12 334.08 79.84Q334.08 74.56 334.80 63.12Q335.52 52.16 335.44 46.40Q333.28 46.24 329.44 46.80Q325.04 47.44 323.36 47.44Q319.44 47.44 316.96 45.36Q316 43.28 316 43.20Q316 42.64 316.56 42Q319.12 41.12 327.04 40.40Q334 39.68 337.44 37.84Q340.24 38.72 343.84 38.72Q347.44 38.72 350.72 37.84Q351.68 37.76 355.60 36.72Q358.48 36 360.40 36.24Q361.84 36.24 361.60 37.44Q363.76 37.44 363.76 38.88Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M390.08 40.32Q390.08 41.92 387.76 43.12Q387.12 43.44 386.40 43.20Q385.28 42.88 385.20 42.88Q384.72 42.88 384.24 43.36Q379.92 47.68 379.92 53.92Q379.92 56.24 380.64 58.24Q380.96 59.12 386.72 70.64Q390.56 78.32 390.56 83.68Q390.56 88.08 388.40 92.16Q387.68 93.52 384.80 95.68Q382.48 97.36 380.64 97.36Q379.92 97.36 379.28 97.12Q376.88 96.08 376.88 94.48Q376.88 93.52 378.08 92.16Q378.40 91.76 379.60 91.68Q380.80 91.60 381.20 90.72Q382.88 87.20 382.88 83.52Q382.88 78.32 377.72 68.44Q372.56 58.56 372.56 52.64Q372.56 47.76 374.48 43.92Q376.64 39.52 380.64 37.60Q382.48 36.72 384.24 36.72Q387.60 36.72 389.28 38.56Q390.08 39.44 390.08 40.32Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M422.40 71.44Q417.68 82.08 409.04 84.08Q408.00 84.32 406.96 84.32Q402.40 84.32 397.76 79.36Q394.64 76 394.64 70.64Q394.64 64.72 398.16 57.92Q399.68 55.04 401.84 52.96Q404.32 50.48 406.56 50.48Q407.84 50.48 408.96 51.44Q410.08 52.40 414.96 54Q418.80 55.28 420.40 58.32Q423.20 63.68 423.20 67.52Q423.20 69.68 422.40 71.44M416.00 66.48Q415.44 60.64 412.88 59.52Q412.48 59.36 412.16 59.36Q411.20 59.36 409.76 60.96Q408.16 62.80 407.28 63.12Q406.72 63.36 405.68 62.64Q404.64 61.92 404.32 61.92Q404.08 61.92 403.92 62.08Q401.12 64.48 401.12 69.52Q401.12 72.96 402.72 75.36Q404.96 78.64 406.48 78.64Q410.00 78.64 413.28 74.24Q416.40 70.08 416.00 66.48Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M465.28 90.08Q465.60 91.68 462.96 91.84Q461.20 91.92 459.36 90.32Q457.84 88.96 456.96 85.92Q456.16 83.12 456.00 78Q455.84 72.24 455.44 70.08Q454.40 73.68 452.00 80.80Q450.56 84.72 450.24 85.28Q448.96 87.76 447.04 87.52Q443.20 86.64 441.12 83.20Q439.76 80.96 438.56 76.08Q437.28 70.72 436.40 68.88Q432.96 85.60 429.04 93.84Q428.48 95.04 425.68 93.68Q423.36 92.56 423.36 90.48Q423.36 89.76 425.04 85.36Q425.76 83.44 430.64 66.88Q432.32 61.12 434.16 46.64Q434.32 46.48 434.96 44.96Q435.36 43.84 436.40 43.84Q439.12 43.84 440.16 44.88Q440.16 47.20 440.92 52.36Q441.68 57.52 441.68 60.16Q442.40 64.64 443.04 69.20Q443.92 74.32 446.24 77.60Q453.92 56.24 456.00 43.84Q456.32 42.56 458.40 42.56Q461.36 42.56 461.76 44.48Q462.32 47.36 462.32 51.12Q462.32 52.32 462.16 56.32Q462.08 59.68 462.16 61.76Q462.88 78.64 465.28 90.08Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M496.80 48.72Q493.84 49.92 488.08 51.52Q482.32 53.12 479.36 54.32Q478.64 56.40 478.32 63.60Q479.60 64.08 481.28 64.08Q482.48 64.08 485.04 63.68Q487.60 63.28 488.80 63.28Q491.04 63.28 492.64 64.24Q493.76 65.84 493.76 66.32Q493.76 66.88 493.20 67.20Q493.04 67.28 492.08 68.32Q491.44 69.04 490.48 68.96Q488.80 69.36 484.32 69.44Q480.56 69.52 478.32 70.40Q476.80 76.32 476.80 79.76Q476.80 82.08 477.44 83.44Q481.20 86.08 490.48 85.68Q491.12 85.68 491.84 85.08Q492.56 84.48 493.04 84.48Q495.28 84 496.00 87.84Q496.24 89.12 495.56 90.20Q494.88 91.28 493.60 91.36Q483.92 91.68 476.80 89.84Q474.56 89.28 472.72 87.36Q470.88 85.44 470.64 83.04Q469.92 76.08 470.64 70.56Q468.40 69.04 468.64 67.60Q468.72 66.88 469.88 66.28Q471.04 65.68 471.20 65.04Q471.36 64.40 471.84 57.44Q467.36 56.56 467.44 54.08Q467.52 51.76 470.24 50.40Q472.80 49.36 475.36 48.32Q478.40 46.80 482.88 45.60Q486.72 44.56 490.64 43.60Q491.04 43.52 491.60 43.52Q493.76 43.52 496.64 45.20Q496.72 45.52 497.04 46.40Q497.36 47.28 497.36 47.68Q497.36 48.32 496.80 48.72Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M558.88 38.88Q558.16 41.76 556.16 42.24Q550.96 43.52 538.08 45.60Q536.48 65.52 536.48 78.80Q536.48 83.84 536.64 88.72Q536.72 90.24 536.48 91.04Q536.08 92.32 534.88 92.24Q532.56 92.16 531.04 90.28Q529.52 88.40 529.36 86.08Q529.20 83.12 529.20 79.84Q529.20 74.56 529.92 63.12Q530.64 52.16 530.56 46.40Q528.40 46.24 524.56 46.80Q520.16 47.44 518.48 47.44Q514.56 47.44 512.08 45.36Q511.12 43.28 511.12 43.20Q511.12 42.64 511.68 42Q514.24 41.12 522.16 40.40Q529.12 39.68 532.56 37.84Q535.36 38.72 538.96 38.72Q542.56 38.72 545.84 37.84Q546.80 37.76 550.72 36.72Q553.60 36 555.52 36.24Q556.96 36.24 556.72 37.44Q558.88 37.44 558.88 38.88Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M575.68 48.72Q572.72 49.92 566.96 51.52Q561.20 53.12 558.24 54.32Q557.52 56.40 557.20 63.60Q558.48 64.08 560.16 64.08Q561.36 64.08 563.92 63.68Q566.48 63.28 567.68 63.28Q569.92 63.28 571.52 64.24Q572.64 65.84 572.64 66.32Q572.64 66.88 572.08 67.20Q571.92 67.28 570.96 68.32Q570.32 69.04 569.36 68.96Q567.68 69.36 563.20 69.44Q559.44 69.52 557.20 70.40Q555.68 76.32 555.68 79.76Q555.68 82.08 556.32 83.44Q560.08 86.08 569.36 85.68Q570.00 85.68 570.72 85.08Q571.44 84.48 571.92 84.48Q574.16 84 574.88 87.84Q575.12 89.12 574.44 90.20Q573.76 91.28 572.48 91.36Q562.80 91.68 555.68 89.84Q553.44 89.28 551.60 87.36Q549.76 85.44 549.52 83.04Q548.80 76.08 549.52 70.56Q547.28 69.04 547.52 67.60Q547.60 66.88 548.76 66.28Q549.92 65.68 550.08 65.04Q550.24 64.40 550.72 57.44Q546.24 56.56 546.32 54.08Q546.40 51.76 549.12 50.40Q551.68 49.36 554.24 48.32Q557.28 46.80 561.76 45.60Q565.60 44.56 569.52 43.60Q569.92 43.52 570.48 43.52Q572.64 43.52 575.52 45.20Q575.60 45.52 575.92 46.40Q576.24 47.28 576.24 47.68Q576.24 48.32 575.68 48.72Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M604.64 42.80Q598.48 52.16 594.32 60.88Q595.28 63.20 599.44 70.24Q602.88 76 603.84 79.92Q603.20 80 602.48 81Q601.76 82 601.04 81.92Q598.08 81.68 596.24 79.20Q595.28 77.92 593.60 73.84Q592 70.24 590.56 68.80Q587.76 72.88 584.60 81.76Q581.44 90.64 578.80 94.56Q574.48 94.96 573.84 93.20Q573.60 92.48 573.60 91.76Q573.60 90.48 574.56 88.40Q575.92 85.44 576.08 85.04Q580.56 71.92 587.20 60.48Q584.80 55.12 578.80 48.96Q578.40 48.56 578.40 48.16Q578.40 46.64 580.80 45.76Q581.68 45.44 582.56 45.44Q584.88 45.44 587.12 48.48Q590.32 52.88 590.56 53.12Q590.96 52.56 594.48 46.16Q596.88 41.84 599.04 39.44Q600.64 38.96 603.04 39.28Q604.88 40.08 604.88 41.84Q604.88 42.40 604.64 42.80Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M646.48 38.88Q645.76 41.76 643.76 42.24Q638.56 43.52 625.68 45.60Q624.08 65.52 624.08 78.80Q624.08 83.84 624.24 88.72Q624.32 90.24 624.08 91.04Q623.68 92.32 622.48 92.24Q620.16 92.16 618.64 90.28Q617.12 88.40 616.96 86.08Q616.80 83.12 616.80 79.84Q616.80 74.56 617.52 63.12Q618.24 52.16 618.16 46.40Q616.00 46.24 612.16 46.80Q607.76 47.44 606.08 47.44Q602.16 47.44 599.68 45.36Q598.72 43.28 598.72 43.20Q598.72 42.64 599.28 42Q601.84 41.12 609.76 40.40Q616.72 39.68 620.16 37.84Q622.96 38.72 626.56 38.72Q630.16 38.72 633.44 37.84Q634.40 37.76 638.32 36.72Q641.20 36 643.12 36.24Q644.56 36.24 644.32 37.44Q646.48 37.44 646.48 38.88Z"></path>
                <path fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" d="M653.36 41.52Q652.88 47.12 649.28 61.68Q646.16 74.32 646.40 82.40Q646.40 83.12 645.56 83.72Q644.72 84.32 644.00 84.16Q639.92 83.36 639.68 80.16Q639.60 78.48 639.60 76.80Q639.60 69.28 642.00 58.40Q645.68 42.32 646.00 40.16Q646.16 39.20 647.20 38.80Q648.24 38.40 649.20 38.72Q650.56 39.12 651.92 39.52Q653.44 40.16 653.36 41.52M645.60 90.32Q645.76 91.44 645.28 92.52Q644.80 93.60 644.12 93.64Q643.44 93.68 643.12 94Q642.80 94.32 642.48 94.24Q638.24 92.64 637.68 90.08Q637.44 88.96 639.20 87.80Q640.96 86.64 641.68 86.72Q642.96 86.88 644.20 87.84Q645.44 88.80 645.60 90.32Z"></path>
            </g>
        </svg>
    </g>
</g>



    <g id="hand" class="svg-wrapper" ref="2" x="0" y="0" height="256" width="256" data-svg-origin="55.5 55.5" style="transform-origin: 0px 0px 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1); z-index: 1006;">
    <g data-svg-origin="56.5 56.5" style="transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, -1, 0, 113);">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="svg inline scale-it" role="img" ref="2" height="113" width="113" x="0" y="0" data-svg-origin="128 128" style="transform-origin: 0px 0px 0px; transform: matrix(0.4414, 0, 0, 0.4414, 71.5, 71.5);">
            <g id="Tables">
            </g>
            <g>
                <polygon fill="#383234" points="12.2,248.1 8.1,244 23.2,196.6 59.3,232.7  "></polygon>
                <polygon fill="#110F10" points="12.2,248.1 8.1,244 49,222.4 59.3,232.7  "></polygon>
                <polygon fill="#F9A665" points="59.3,232.7 23.2,196.6 32.6,159.3 96.6,223.3  "></polygon>
                <polygon fill="#BF7C4F" points="58.8,234.3 49,222.4 86.3,213 96.6,223.3  "></polygon>
                <polygon fill="#CA65A7" stroke="#E57AB0" stroke-miterlimit="10" points="222.7,94.9 160.2,32.4 183.9,7.9 247.9,71.9  "></polygon>
                <polygon fill="#9E5186" points="222.7,94.9 213.7,83.9 236.8,60.8 247.9,71.9  "></polygon>
                <polygon fill="#FEC345" points="95.5,222.2 32.6,159.3 160.2,32.4 222.7,94.9  "></polygon>
                <polygon fill="#D18828" points="96.6,223.3 86.8,211.3 212.4,84.6 222.7,94.9  "></polygon>
                <g>
                    <polygon fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="    183.9,7.9 247.9,71.9 96.6,223.3 12.2,248.1 8.1,244 32.6,159.3   "></polygon>
                    <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33" y1="159.7" x2="95.5" y2="222.2"></line>
                    <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="23.2" y1="196.6" x2="59.3" y2="232.7"></line>
                    <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="222.7" y1="94.9" x2="160.2" y2="32.4"></line>
                    <path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="    M59.3,132.6c-1.6,3.8,0.9,9.7,4.5,13.3c7.7,7.7,18.2,1.3,23.8,6.9c7,7-1.8,18.1,6.3,26.2c7.7,7.7,18.2,1.3,23.8,6.9    c3.6,3.6,4.8,8.6,3.2,12.4"></path>
                    <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="164.7" y1="132.5" x2="203.1" y2="94.1"></line>
                    <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="145.2" y1="152.1" x2="155.7" y2="141.6"></line>
                    <line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="130.1" y1="167.2" x2="135.4" y2="161.9"></line>
                </g>
            </g>
        </svg>
    </g>
</g>



  </svg>
</div>
              
            
!

CSS

              
                #stage-master
  width: 800px
  height: 600px

              
            
!

JS

              
                
// Polyfill for getTransformToElement
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
  return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());  
};

var svgID = '#svg-1',
    hand = '#hand',
    selectorsArr,
    multiplier = 0.15;

// look for compound paths in the original SVG
var paths = document.querySelectorAll(`${svgID} path`);

var newPaths = breakApartPaths(paths,$(svgID)[0]);

  $(`${svgID} path`).remove();

for( let path of newPaths ) {
  $(svgID)[0].appendChild(path);
}

MorphSVGPlugin.convertToPath(`${svgID} circle, ${svgID} rect, ${svgID} ellipse, ${svgID} line, ${svgID} polygon, ${svgID} polyline`);
selectorsArr = document.querySelectorAll(`${svgID} path`);

TweenMax.set(selectorsArr,{drawSVG: "0"});
TweenMax.to('#gp-1', 0.5, {x: 25, y: 25});

TweenLite.defaultEase = Linear.easeNone;

function reset() {
  TweenMax.set(selectorsArr,{drawSVG: "0"});
}

function drawIt() {

  var tl = new TimelineMax();
  
  for ( let path of selectorsArr ) {
    
    var root = $("#stage-master")[0];
    var t = path.getTransformToElement(root);    
    
    var TL = new TimelineMax(),
        time = (parseInt(path.getTotalLength())/100)*multiplier,
        data = path.getAttribute('d'),
        bzPath = MorphSVGPlugin.pathDataToBezier(data, {
          matrix: [t.a, t.b, t.c, t.d, t.e, t.f]
        });
    
    tl.fromTo(hand,multiplier/2,{x: hand.x, y: hand.y, scaleX: 1.1, scaleY: 1.1},{x: bzPath[0].x, y: bzPath[0].y, scaleX: 1, scaleY: 1, ease: Power4.easeIn}, 0)
      .fromTo(path, time, {drawSVG: "0"}, {drawSVG: "100%"}, multiplier)
      .to(hand, time, {bezier:{values:bzPath, type:"cubic"}}, multiplier);
    
    /* TL.fromTo(hand,multiplier/2,{x: hand.x, y: hand.y, scaleX: 1.1, scaleY: 1.1},{x: bzPath[0].x, y: bzPath[0].y, scaleX: 1, scaleY: 1, ease: Power4.easeIn}, 0)
      .fromTo(path, time, {drawSVG: "0"}, {drawSVG: "100%"}, multiplier)
      .to(hand, time, {bezier:{values:bzPath, type:"cubic"}}, multiplier);
    tl.add(TL); */
  }

  return tl;
}

function breakApartPaths(paths, svg) {
  
  var sepPaths = [];
   
  for (let path of paths ) {
    
    let beziers = MorphSVGPlugin.pathDataToRawBezier(path);
            
    if (beziers.length > 1) {
      var pieces = [];   
      for (let bezier of beziers) {
        
        var data = ["M", bezier.shift(), bezier.shift(), "C", ...bezier].join(" ");
        
        var newPath = path.cloneNode(true);
        newPath.setAttribute("d", data);
        if(pieces.length>0) {
          // check to see which is a longer path and place the longer one on bottom?
          var L1 = pieces[0].getTotalLength();
          var L2 = newPath.getTotalLength();
          if(L1 < L2) {
            pieces.unshift(newPath);
          } else {
            pieces.push(newPath);
          }
        } else {
          pieces.push(newPath);
        }
      }
      sepPaths = sepPaths.concat(pieces);
    } else {
      sepPaths.push(path);
    }
  }
  return sepPaths;
}

$('button.draw').on("click", function(){
  reset();
  var TL = drawIt();
  TL.play();
})

$('button.reset').on("click", function(){
  reset();
});
              
            
!
999px

Console