Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
      <defs>
 <pattern id="graph" 
           x="28" y="8" width="30" height="30"
           patternUnits="userSpaceOnUse">
  <line x1="0" x2="800" y1="0" y2="0" stroke="#7CC6FE" stroke-width="1" opacity="0.3"/> 
  <line x1="10" x2="10" y1="0" y2="600" stroke="#7CC6FE" stroke-width="1" opacity="0.3"/> 
  
  </pattern>      
       
<g id="allNumbers" class="labelGroup" transform="translate(0, 36)" stroke-miterlimit="10" stroke-width="4" fill="none" stroke="#616163" stroke-linecap="round" stroke-linejoin="round">
      <g class="one numLabel" >
        <path d="M156.16,281.94c0,3.3,0-3.3.06,0,0,2.4,0,15.11-.27,17.49-.51,4.08-1.92,9.81-.1,13.51" />
        <path d="M155.69,312.94s.83-21.58.33-31" />
        <path d="M156.38,312.94c-.83-6.83-.93-24.12-1-31,0-1.46,0,1.43.24,0,.41-2,1.43,2.05,1.52,0" />
        <path d="M155.6,281.94c.78,9-1.33,22.07-.14,31" />
        <path d="M156.45,281.94c-.43,9.08-.95,31-.95,31" />
        <path d="M157.2,281.94c-2.29,9-3.24,21.71-2.81,31" />
      </g>
      <g class="two numLabel" >
        <path d="M151.18,287.54a8.73,8.73,0,0,1,6.33-4.64c2.88-.45,6.23,1,7,3.8a6.42,6.42,0,0,1-1.46,5.47,24.64,24.64,0,0,1-4.38,3.89,51,51,0,0,0-13.06,15.17,86.5,86.5,0,0,0,15.3-1.73c1.83-.37,3.88-.77,5.45.25" />
        <path d="M150.29,287a13.84,13.84,0,0,1,7.34-3.55c2-.3,4.44.06,5.39,1.86.83,1.57.14,3.51-.79,5-2.32,3.78-5.95,6.54-9.2,9.56s-6.31,6.69-6.87,11.09h20.4" />
        <path d="M150.93,286.39a8,8,0,0,1,4.74-2.06,16.07,16.07,0,0,1,5.21.43,2.77,2.77,0,0,1,1.45.66,2.38,2.38,0,0,1,.51,1.13,6.38,6.38,0,0,1-.25,3.77,10.64,10.64,0,0,1-2.17,3l-6.72,7.4c-2.82,3.11-5.67,6.26-7.65,10a10.53,10.53,0,0,1,2.85-.33c.93,0,1.84.17,2.75.29a106.55,106.55,0,0,0,12.24.65,3.39,3.39,0,0,0,2.14-.45" />
        <path d="M150.7,286.14q3.81-1,7.7-1.66a3.05,3.05,0,0,1,3,.72,5.46,5.46,0,0,1,2,2.19,4.12,4.12,0,0,1-.68,3.57c-1.38,2.14-3.64,3.55-5.16,5.58-.78,1-1.35,2.24-2.1,3.3a36.08,36.08,0,0,1-3.94,4.17,62.23,62.23,0,0,0-5.58,6.85c2.89-1.11,6.11-.66,9.17-.2l5.53.83c1.66.25,3.47.47,4.93-.36" />
        <path d="M150.85,285.85a24.72,24.72,0,0,1,11.28-1.29,2.71,2.71,0,0,1,.89.22,1.8,1.8,0,0,1,.85,1.11c.36,1.21-.24,2.49-.84,3.61-2.71,5.09-5.69,10.11-9.7,14.24-2.34,2.41-5,4.5-7.13,7.08a47.43,47.43,0,0,1,15.27-.32,17,17,0,0,0,3.89.3" />
        <path d="M150.79,286.22a10.42,10.42,0,0,1,11.26-.45,3.14,3.14,0,0,1,.86.71,2.59,2.59,0,0,1,.48,1.39c.26,2.84-1.87,5.27-3.82,7.34q-6.6,7-12.74,14.39c6.21-.56,12.38,1.83,18.59,1.4" />
      </g> 
       <g class="three numLabel">
        <path d="M149.68,285.09a32.93,32.93,0,0,1,5.11-1.08,10.17,10.17,0,0,1,3.85.06,4.34,4.34,0,0,1,3,2.3c.72,1.63,0,3.56-1,5a10.87,10.87,0,0,1-8.41,4.32,8.53,8.53,0,0,1,9.29,2,9.83,9.83,0,0,1,2.16,9.42,7.17,7.17,0,0,1-2.76,4,6.87,6.87,0,0,1-2.88,1,9.62,9.62,0,0,1-9.08-4.11" />
        <path d="M149.47,284.67l6-.22c1.7-.06,3.7,0,4.68,1.42s.46,3-.44,4.27a29.09,29.09,0,0,1-3.27,3.2c-1.25,1.27-2.72,3-4.41,2.43a16.9,16.9,0,0,1,4.83-.61,5.64,5.64,0,0,1,4.26,2.07,7.62,7.62,0,0,1,1.17,3.81,39.28,39.28,0,0,1,.25,4.2,5.93,5.93,0,0,1-.62,3.18,6.38,6.38,0,0,1-2.94,2.11,9.07,9.07,0,0,1-3.83,1.1c-2.21,0-4-1.63-5.66-3.14" />
        <path d="M149.27,284.51a45.47,45.47,0,0,1,9.11.24,3.67,3.67,0,0,1,2.39.94,3.06,3.06,0,0,1,.37,2.83,7.93,7.93,0,0,1-5.8,5.6c-1.49.34-3.08.25-4.49.82a23.48,23.48,0,0,1,6.57,1.09,8.06,8.06,0,0,1,4.85,4.32,11.5,11.5,0,0,1,.43,5c-.11,1.75-.4,3.75-1.88,4.68a4.91,4.91,0,0,1-2.45.59,18.27,18.27,0,0,1-9.54-2.25" />
        <path d="M149.05,284.48a31.92,31.92,0,0,1,7.43.46,9.11,9.11,0,0,1,3.64,1.31,4.31,4.31,0,0,1,1.95,3.4,4.41,4.41,0,0,1-2.46,3.75,11.34,11.34,0,0,1-4.38,1l-4.47.43a24.83,24.83,0,0,1,8.15,3.11,7.65,7.65,0,0,1,2.86,2.59,8.76,8.76,0,0,1,.91,3.85c.13,2,0,4.24-1.49,5.43a4.88,4.88,0,0,1-2.25.91,14.71,14.71,0,0,1-10-1.7" />
        <path d="M150.32,285a7,7,0,0,1,4-1.12,8.13,8.13,0,0,1,5.55,1.69,4.37,4.37,0,0,1,1.15,5.29,6.42,6.42,0,0,1-3.67,2.45,33.91,33.91,0,0,1-5,1.29l2.51.25a11.53,11.53,0,0,1,4.93,1.25,6.84,6.84,0,0,1,3,4.52,11.67,11.67,0,0,1-.38,5.5,5.52,5.52,0,0,1-1.54,2.77,5.4,5.4,0,0,1-2.88,1,15.59,15.59,0,0,1-9.19-1.73" />
        <path d="M149,284.79a17.34,17.34,0,0,1,9.52.55,5.77,5.77,0,0,1,1.88,1,4.17,4.17,0,0,1,.61,5.06,6.82,6.82,0,0,1-4.44,3,20.16,20.16,0,0,1-5.49.28c2.29.29,4.57.66,6.84,1.09a7.57,7.57,0,0,1,2,.57,5.49,5.49,0,0,1,2.39,2.51,10.74,10.74,0,0,1,1,5.89c-.18,1.93-.86,4-2.46,5.05s-3.67,1-5.59.82a14,14,0,0,1-3.7-.64,4.7,4.7,0,0,1-2.77-2.41" />
      </g> 
      <g class="four numLabel">
        <path d="M158,311.17a117.48,117.48,0,0,0,1.58-13.09c.31-4.78.32-9.69-1.3-14.2l-4.71,5c-3.3,3.5-6.65,7.06-8.9,11.31a.46.46,0,0,0-.08.39c.05.15.25.21.41.24a64.81,64.81,0,0,0,22,.19" />
        <path d="M157.92,311.32a67.53,67.53,0,0,0,.25-27.92,28,28,0,0,1-4,5.39c-1.14,1.11-2.45,2-3.67,3a30.24,30.24,0,0,0-6.22,7,2.27,2.27,0,0,0-.39.87,1.57,1.57,0,0,0,1.16,1.53,5.1,5.1,0,0,0,2.06,0c6.78-.68,13.68,1,20.41-.09" />
        <path d="M158.07,311.6a80.2,80.2,0,0,0-.25-28.9,68.4,68.4,0,0,1-8.82,9.79c-1.18,1-2.44,1.95-3.54,3.06a15.27,15.27,0,0,0-3.22,4.86c5.07,1.37,10.44.3,15.7.16,3.39-.08,6.8.23,10.17-.18" />
        <path d="M159.13,311c-.3-3.77.43-7.55.31-11.33,0-1.28-.17-2.55-.31-3.82l-1.52-14c-3.68,7.15-11.76,11.36-15,18.73a.93.93,0,0,0-.12.54c.07.46.67.57,1.14.58l8.78.18c1.81,0,3.63.07,5.44,0A53.13,53.13,0,0,0,170.34,300" />
        <path d="M158.52,311a33.69,33.69,0,0,0,.55-6.35l.27-11.94a44.63,44.63,0,0,0-.19-6.54,21.27,21.27,0,0,0-1.09-4.57,100.26,100.26,0,0,0-14,19.69q12.53.38,25-.32" />
        <path d="M157.83,311.62q.93-15.75.87-31.53a255.11,255.11,0,0,0-15.63,20.67,8.81,8.81,0,0,0,3.89,0c8-1.07,16,1.1,24,.57" />
      </g>  
       <g class="five numLabel">
        <path d="M167.36,282.48a34.23,34.23,0,0,0-16.1.21c-1.42.36-3,1-3.55,2.32a5.19,5.19,0,0,0-.26,2l.09,9.88a27.37,27.37,0,0,1,14.79.88,6.67,6.67,0,0,1,3.9,2.76,4.75,4.75,0,0,1-.38,4.63,9.25,9.25,0,0,1-3.69,3.09,18.07,18.07,0,0,1-16,.09" />
        <path d="M167.65,282.51q-8.88-.13-17.77.32a1.76,1.76,0,0,0-1,.26c-.47.37-.44,1.08-.38,1.68a29.28,29.28,0,0,1-.92,10.46,20.58,20.58,0,0,1,11.53,2.2c2.12,1.1,4.19,2.8,4.64,5.15a3.87,3.87,0,0,1-.12,2,5.21,5.21,0,0,1-1.09,1.65,14.17,14.17,0,0,1-7.71,4.53,10.71,10.71,0,0,1-8.6-2" />
        <path d="M167.06,282.56q-8.16.74-16.31,1.63a1.36,1.36,0,0,0-1.5,1.71v9.87A44.24,44.24,0,0,1,162,297.54c2.13.62,4.54,1.77,4.9,4s-1.34,3.86-3.05,5A21.32,21.32,0,0,1,147,309.66l.8-1.05" />
        <path d="M168.05,283.08q-9.42-.15-18.85.35a1.6,1.6,0,0,0-1.17.38,1.62,1.62,0,0,0-.28,1.15l.12,8.43a1.86,1.86,0,0,0,.42,1.43,1.9,1.9,0,0,0,1.35.29c3.11-.14,6.3-.29,9.25.67s5.69,3.3,6.16,6.37a7.54,7.54,0,0,1-2.32,6.34,11.48,11.48,0,0,1-6.24,2.93c-3.67.6-7.78-.33-10.17-3.17" />
        <path d="M167.24,283.55l-19.1.5a.92.92,0,0,0-.52.13.88.88,0,0,0-.23.73l-.1,10a1.43,1.43,0,0,0,.16.82c.27.39.83.4,1.3.38,3.78-.2,7.7-.48,11.23.87s6.57,4.89,6,8.63a4.37,4.37,0,0,1-.67,1.79,5.33,5.33,0,0,1-1,1.09,12.63,12.63,0,0,1-9.11,2.53,21.78,21.78,0,0,1-9-3.24" />
        <path d="M166.85,283.29l-16.85.6a1,1,0,0,0-1.15,1.14c-.09,3.83,0,7.66.25,11.47a11.64,11.64,0,0,1,15.08,10.27,3.69,3.69,0,0,1-.17,1.65c-.55,1.43-2.32,1.89-3.85,2.1a61.72,61.72,0,0,1-11.37.51c-1.3-.07-2.88-.36-3.33-1.59" />
      </g> 
       <g class="six numLabel">

        <path d="M161.65,283.41c-4.12,1.81-7.54,4.89-10.71,8.08a22.76,22.76,0,0,0-4.68,6,8.73,8.73,0,0,0-.35,7.4,4,4,0,0,0,1.08,1.45,5.53,5.53,0,0,0,1.72.8l4.81,1.64a5.53,5.53,0,0,0,3.36.38,4.82,4.82,0,0,0,2-1.46c1.69-1.84,3.15-4.42,2.19-6.73a6.29,6.29,0,0,0-3.77-3.09,9.57,9.57,0,0,0-7-.29c-2.23.92-3.91,3.36-3.4,5.72" />
        <path d="M160.77,282.61a39,39,0,0,0-10.39,7.69c-3.45,3.58-6.35,8.53-5,13.33a8.82,8.82,0,0,0,11.59,5.93c2.85-1.06,5.14-4,4.58-7a6.18,6.18,0,0,0-4.71-4.6,9.4,9.4,0,0,0-6.69,1.18c-1.91,1.09-3.65,3-3.43,5.19" />
        <path d="M159.94,282.87a48.77,48.77,0,0,0-11,10.37,18.6,18.6,0,0,0-3.55,6.42,8.17,8.17,0,0,0,1.1,7,7.51,7.51,0,0,0,5.53,2.71,11.53,11.53,0,0,0,6.07-1.55,4.86,4.86,0,0,0,2.35-2.23,5.32,5.32,0,0,0,0-3.23c-.43-1.83-1.31-3.92-3.16-4.29-1.28-.25-2.52.43-3.75.87-1.92.69-4,.8-5.84,1.75s-3.19,3.26-2.15,5" />
        <path d="M160.24,283.21c-3.39,2.12-6.82,4.28-9.54,7.22a22.71,22.71,0,0,0-4.85,8.26,11.08,11.08,0,0,0-.57,2.66,7.88,7.88,0,0,0,4.62,7.45,9.12,9.12,0,0,0,8.86-1,5,5,0,0,0,1.54-1.62,6.1,6.1,0,0,0,.54-2.31c.14-1.71.09-3.59-1-4.91a5.12,5.12,0,0,0-1.78-1.3,8.61,8.61,0,0,0-12.2,6.52" />
        <path d="M161,282.75a39.74,39.74,0,0,0-10.56,6.8,17.39,17.39,0,0,0-1.76,1.78,21.92,21.92,0,0,0-3.39,7,6.75,6.75,0,0,0-.5,2.37,6.56,6.56,0,0,0,.69,2.31c1.1,2.42,2.49,5,4.9,6.06,2.59,1.19,5.62.43,8.34-.44a4.93,4.93,0,0,0,1.53-.69,3.86,3.86,0,0,0,1.14-1.61,8.28,8.28,0,0,0,.5-4.89,4.23,4.23,0,0,0-.81-1.88,4.63,4.63,0,0,0-1.67-1.15,10.88,10.88,0,0,0-8.32-.42,8.25,8.25,0,0,0-5.22,6.29" />
        <path d="M160.75,282.52a34.62,34.62,0,0,0-14.08,12.77,13.05,13.05,0,0,0-1.75,3.86,8.67,8.67,0,0,0,1.24,6.66,8.81,8.81,0,0,0,8.49,3.87,8,8,0,0,0,6.55-6.49,5.37,5.37,0,0,0-.2-2.55,5.27,5.27,0,0,0-4-3.18,10.05,10.05,0,0,0-5.25.59,10.52,10.52,0,0,0-4.34,2.6,5.62,5.62,0,0,0-1.58,4.67" />
      </g> 
      <g class="seven numLabel">
        <path d="M147.62,282.48a103.21,103.21,0,0,0,18.85,0c-3.49,9.05-7,18.17-12.23,26.35" />
        <path d="M148.46,283a52.17,52.17,0,0,1,17.84-.78l-12.36,26.95" />
        <path d="M148.66,282.61a65.06,65.06,0,0,0,17.13.16l-4.32,12.36a54.34,54.34,0,0,1-4.31,10.07c-1.08,1.82-2.41,3.58-2.76,5.67" />
        <path d="M148.67,282.77l16.16,0-2.9,13a34.72,34.72,0,0,1-2.93,9.12c-1.17,2.18-2.86,4.25-3,6.73" />
        <path d="M148.42,283.36a160.54,160.54,0,0,1,16.11-.88c.44,0,1,.08,1.12.51a1,1,0,0,1-.12.66l-11.94,27.91.59-.71" />
        <path d="M147.87,282.55a74,74,0,0,0,18.92,0,250.3,250.3,0,0,0-10.63,28.84" />
        <path d="M148.33,282.43a16,16,0,0,0,4.47.64l12.43.58c-4,9.35-4.75,20.14-10.5,28.53" />
      </g>  
       <g class="eight numLabel">
        <path d="M155.78,281.31a5.11,5.11,0,0,0-5.05,2.2,4,4,0,0,0-.68,2.4,6.07,6.07,0,0,0,1.06,2.63,35.15,35.15,0,0,0,5.57,7.15c.53.52,1.09,1,1.57,1.57a11.31,11.31,0,0,1,1.12,1.64c1.35,2.4,2.12,5.35,1.13,7.93a6.52,6.52,0,0,1-4,3.83c-2.25.76-4.72.23-7-.53a3.65,3.65,0,0,1-1.58-.86,3.46,3.46,0,0,1-.64-1.16c-.91-2.45-1-5.46.71-7.42a11.21,11.21,0,0,1,3.47-2.29,36.46,36.46,0,0,0,3.67-2.17,14.86,14.86,0,0,0,2-1.55,17.12,17.12,0,0,0,2-2.45l2.1-3a9.49,9.49,0,0,0,1.69-3.22,3.21,3.21,0,0,0-1-3.31,4.63,4.63,0,0,0-1.89-.65c-1.7-.31-3.42-.56-5.14-.76" />
        <path d="M156.19,281.52c-1.73.35-3.6.81-4.69,2.19a5.17,5.17,0,0,0-.58,4.82,13.57,13.57,0,0,0,2.71,4.24,34.41,34.41,0,0,1,5,6.72c1.23,2.5,1.66,5.58.37,8.06a4.6,4.6,0,0,1-1,1.35,5,5,0,0,1-1.49.82,8.69,8.69,0,0,1-5.69.32,6.36,6.36,0,0,1-4.12-3.78,11,11,0,0,1-.36-4.17,4.56,4.56,0,0,1,.41-2c.75-1.39,2.59-1.64,4.13-2a14.24,14.24,0,0,0,10.62-11.18,4.23,4.23,0,0,0,0-2,4.4,4.4,0,0,0-2.41-2.42,13.08,13.08,0,0,0-5-1.42" />
        <path d="M156,281.33a6.78,6.78,0,0,0-4.65,1.22,3.89,3.89,0,0,0-1.49,1.73,4.19,4.19,0,0,0-.15,1.93c.34,2.75,2,5.18,3.79,7.29s3.86,4,5.31,6.4,2.25,5.36,1.27,8a4.71,4.71,0,0,1-1.22,1.87,5.55,5.55,0,0,1-2,1.08,11,11,0,0,1-7.4-.14,4.83,4.83,0,0,1-3.32-3.53,8.7,8.7,0,0,1-.35-4.14,5.92,5.92,0,0,1,2-3.59,9.76,9.76,0,0,1,1.82-1.07c2.79-1.37,5.68-2.63,8.07-4.63s4.23-4.9,4.11-8a3.76,3.76,0,0,0-.3-1.45,4.37,4.37,0,0,0-1.92-1.76,7.9,7.9,0,0,0-3.43-1.21c-1.17-.06-2.37.31-3.52.05" />
        <path d="M155.86,281.4c-1.54-.26-3,.57-4.39,1.36a2.69,2.69,0,0,0-1.3,1.23,2.54,2.54,0,0,0-.1,1,13.87,13.87,0,0,0,.5,3.8c.69,2.16,2.32,3.88,3.78,5.62a48.26,48.26,0,0,1,5.63,8.32,5.8,5.8,0,0,1,.93,3.12,4,4,0,0,1-.59,1.7,6.69,6.69,0,0,1-4.63,3,11.62,11.62,0,0,1-5.6-.57,6.91,6.91,0,0,1-2.25-1.13,5.18,5.18,0,0,1-1.65-3,10,10,0,0,1,.05-3.49,5.22,5.22,0,0,1,.49-1.69c.81-1.53,2.65-2.1,4.25-2.75a20.13,20.13,0,0,0,8.61-6.76,10.08,10.08,0,0,0,2-4.42,5.15,5.15,0,0,0-1.43-4.49c-1.68-1.5-4.21-1.35-6.45-1.11" />
        <path d="M156.13,281.63c-1.66-.61-3.47.28-4.89,1.32a3.8,3.8,0,0,0-1.44,1.62,4.17,4.17,0,0,0,.24,2.75,14.21,14.21,0,0,0,1.82,4.09,16,16,0,0,0,1.85,2c1.61,1.58,3.13,3.25,4.65,4.92a11.4,11.4,0,0,1,2.12,2.88,7.8,7.8,0,0,1-.7,6.92,5.9,5.9,0,0,1-1.54,1.86,5.81,5.81,0,0,1-2.08.92,11,11,0,0,1-7.34-.46,5,5,0,0,1-1.94-1.44,6.53,6.53,0,0,1-1-2.81,6.73,6.73,0,0,1,.24-4.46,7,7,0,0,1,2.82-2.43l8.07-4.77a12.94,12.94,0,0,0,3.56-2.7,11,11,0,0,0,1.72-3.37,7,7,0,0,0,.46-2.11,4.76,4.76,0,0,0-2.66-4.08,8.91,8.91,0,0,0-5-.77" />
        <path d="M156.16,281.31,153,282.57a4.43,4.43,0,0,0-2.21,1.45,4.21,4.21,0,0,0-.53,1.92,10,10,0,0,0,0,2.62c.42,2.5,2.35,4.43,4.08,6.28q1.54,1.65,3,3.39c1.48,1.77,2.93,3.78,3,6.08a6.41,6.41,0,0,1-3.06,5.48,8.23,8.23,0,0,1-6.33.88,6.28,6.28,0,0,1-1.91-.79,6.74,6.74,0,0,1-2.68-5.13,6.61,6.61,0,0,1,1-4.55c1.08-1.44,2.88-2.1,4.53-2.81,3.45-1.49,6.8-3.66,8.62-6.95a12.2,12.2,0,0,0,1.07-2.68,6,6,0,0,0,.19-2.67,5.1,5.1,0,0,0-3.13-3.53,10.4,10.4,0,0,0-4.83-.58" />
        <path d="M156.38,281.43c-2.09-.29-4.47-.14-5.93,1.38S149,287.05,150,289a14.93,14.93,0,0,0,4.6,4.73,18.89,18.89,0,0,1,4.84,4.5,12.06,12.06,0,0,1,1.72,6.94,7.58,7.58,0,0,1-.5,2.83,6.33,6.33,0,0,1-4.12,3.28,19.15,19.15,0,0,1-5.4.48c-1.52,0-3.23-.1-4.26-1.21a5.37,5.37,0,0,1-1.09-2.51c-.51-2.25-.77-4.8.53-6.71a7.84,7.84,0,0,1,2.58-2.2c4.28-2.52,9.67-3.83,12.33-8a9.3,9.3,0,0,0,1.21-7c-.4-1.74-3.1-2.61-6.29-2.61" />
      </g>
       <g class="nine numLabel">
        <path d="M159.39,294.32a8.57,8.57,0,0,1-8.71-.13,6.56,6.56,0,0,1-2.38-8c1.15-2.3,3.73-3.54,6.25-4a5.56,5.56,0,0,1,2.72,0c2.27.69,3.17,3.37,3.73,5.68.59,2.47,1.2,5,.7,7.54a14.22,14.22,0,0,1-2.23,4.92,37.61,37.61,0,0,1-8.64,9.29" />
        <path d="M158.86,294.54a33,33,0,0,1-6.12-.39,4.3,4.3,0,0,1-1.65-.51,4.67,4.67,0,0,1-1.3-1.55,7.41,7.41,0,0,1-1.25-3,4.69,4.69,0,0,1,1.37-3.61,6.33,6.33,0,0,1,9,.3c2.16,2.58,1.82,6.38,1.2,9.68a26.16,26.16,0,0,1-2,6.91,17.86,17.86,0,0,1-8,7.85l.11-.53" />
        <path d="M159.35,294.32c-2,1.46-4.83.64-7-.48a10.47,10.47,0,0,1-3.24-2.29,4.46,4.46,0,0,1-1.16-3.69,5.36,5.36,0,0,1,.85-1.87c1.59-2.39,4.65-4.26,7.28-3.12a6.13,6.13,0,0,1,2.27,1.87,11.73,11.73,0,0,1,2.55,7.59c-.09,3.17-1.47,6.16-2.82,9-1.81,3.84-4.09,8.09-8.19,9.18l.69-.44" />
        <path d="M160.25,295.65a10.45,10.45,0,0,1-11.46-3.23,5.92,5.92,0,0,1-1.46-3.94,5.43,5.43,0,0,1,2.76-4.08,7.6,7.6,0,0,1,11.48,5.67c.33,3.06-1.19,6-2.66,8.69-2.48,4.55-5.07,9.23-9.11,12.47l1.1-1.12" />
        <path d="M160.46,295a6.17,6.17,0,0,1-5.48-.29,18.25,18.25,0,0,1-4.42-3.57,3.18,3.18,0,0,1-1.08-1.66,2.78,2.78,0,0,1,.68-1.94c1.93-2.7,5.71-4.44,8.64-2.89a6.63,6.63,0,0,1,3.16,5.57,15,15,0,0,1-1.48,6.48A42.46,42.46,0,0,1,150,311.48l.88-.81" />
        <path d="M160,296.93a10.09,10.09,0,0,1-9.89-5.67,3.5,3.5,0,0,1-.41-2,4.13,4.13,0,0,1,1.05-1.86c1.4-1.71,3.12-3.51,5.33-3.55a6.57,6.57,0,0,1,4.36,2.08,7.58,7.58,0,0,1,2.6,4.19,8.84,8.84,0,0,1-1.22,5.12,55.35,55.35,0,0,1-11.63,15.85" />
        <path d="M158.73,296.67c-1.36-.41-2.72-.85-4.06-1.31a8.23,8.23,0,0,1-3.56-2,5.94,5.94,0,0,1,1.77-8.83,8.72,8.72,0,0,1,6.9,1.17,5.82,5.82,0,0,1,2,4.82,14,14,0,0,1-1.45,5.18A51.42,51.42,0,0,1,150,310.86" />
      </g>
      <g class="ten numLabel">
        <path d="M144.85,312.94c-2.79-5.65.31-29.75.31-31m18.69.75c-3.71.51-6.88,3.18-8.72,6.43a24.81,24.81,0,0,0-2.73,10.79,15.78,15.78,0,0,0,1.09,7.81c1.15,2.4,3.63,4.32,6.27,4.1a7.57,7.57,0,0,0,4.53-2.4,17.38,17.38,0,0,0,4.58-9.35,33.88,33.88,0,0,0-.08-10.54c-.3-2.2-.82-4.56-2.49-6s-4.86-1.26-5.59.84" />
        <path d="M143.39,312.94c-.43-9.29.52-22,2.81-31m15.92,1.55c-2.92-.05-5,2.78-6.42,5.33a30,30,0,0,0-2.32,4.81c-1.48,4.27-1.11,9,.08,13.37.45,1.68,1.12,3.46,2.59,4.4a5,5,0,0,0,4.6.17,10.11,10.11,0,0,0,3.67-3,21.85,21.85,0,0,0,3.83-20.27,5.8,5.8,0,0,0-1-2,6.9,6.9,0,0,0-3.18-1.8c-2.05-.7-4.72-1.25-6.08.45" />
        <path d="M144.46,312.94c-1.19-8.93.92-22,.14-31m16.34,1.24c-2.9.56-5.06,3-6.46,5.63a21.57,21.57,0,0,0-1,18.2c1,2.35,2.71,4.73,5.23,5.09a5.7,5.7,0,0,0,4.45-1.49,11.07,11.07,0,0,0,2.68-4c2.23-5.19,2.23-11,2-16.67-.1-2-.35-4.28-1.9-5.58s-3.52-1.18-5.39-1c-1.37.14-3,.53-3.42,1.83" />
        <path d="M144.5,312.94s.52-21.92.95-31m14.35,1.57c-2.35,2-3.78,4.91-5.15,7.7a22.32,22.32,0,0,0-1.87,4.6,17,17,0,0,0,1.13,10c.88,2.29,2.23,4.68,4.55,5.48a6.24,6.24,0,0,0,6.19-1.74,12.65,12.65,0,0,0,3-6,26.79,26.79,0,0,0-1-16.08,6,6,0,0,0-1.07-1.92,6.16,6.16,0,0,0-2.16-1.33,9.63,9.63,0,0,0-3.81-.94,3.88,3.88,0,0,0-3.34,1.75" />
        <path d="M145.38,312.94c-1.09-9,.49-25.54.73-31m12.6,2.5c-2,.92-3.1,3-4.09,5-1.54,3.05-3.12,6.27-3,9.68a14.72,14.72,0,0,0,.94,4.29,23.7,23.7,0,0,0,2.9,5.64c1,1.35,2.26,2.67,3.91,2.75a5,5,0,0,0,3.45-1.53,14.55,14.55,0,0,0,4.25-8,30.76,30.76,0,0,0,.22-9.14,26,26,0,0,0-1.58-7.37,4.08,4.08,0,0,0-.71-1.23,4,4,0,0,0-3.3-.95c-1.71.11-3.63.75-4.31,2.33" />
        <path d="M145,281.94c.5,9.42-.33,31-.33,31m15.61-29.88a25.85,25.85,0,0,0-4.24,3.51,12.64,12.64,0,0,0-2.09,2.68,16.48,16.48,0,0,0-1.5,6.05,20.84,20.84,0,0,0-.14,5.95,21.4,21.4,0,0,0,2.69,6.58,8.82,8.82,0,0,0,1,1.62c1.75,2,5,2,7.37.75a9.36,9.36,0,0,0,4.44-5.25,18.26,18.26,0,0,0,.69-5.05c.2-4.61.36-9.46-1.74-13.57a5.5,5.5,0,0,0-2.53-2.72,7.23,7.23,0,0,0-1.91-.41c-2-.22-4.24-.34-5.59,1.09" />
      </g> 
 
 </g>       
       </defs>
 
 <rect fill="url(#graph)" width="800" height="600"/>
      <g class="track" stroke-miterlimit="10" stroke-width="4" fill="none" stroke="#616163" stroke-linecap="round" stroke-linejoin="round" >
        <path d="M141.83,335.29c45.42-5.81,92.28-3.18,138.51-1.46,128.1,4.79,253.69-.33,384.3-3-34.59,1-146.9.17-168.46.78-13.56.38-342.31,3.4-362.55,2.52" />
        <path d="M132.8,333.25c81.95-1.19,164-2.38,245.85.17,46.17,1.45,236.61,2.11,285.33-2.41" />
        <path d="M138,333.67c59.57-.17,120.19-.93,180.35.2,72.33,1.35,144.59.17,216.91-1.5,43.51-1,76.66-1.87,130-3.7" />
        <path d="M139.36,332.75l167,.72c24.69.1,49.39.21,74.08.6,51.84.82,269.08-1.36,286.47-2.58" />
        <path d="M665.26,331.08c-137.47,4.42-248.06,2.42-367.65,1.06-60.32-.69-105,1.67-165.31-.05" />
        <path d="M138.18,333.67c93.15,1.86,186.45,3.72,279.47.06,20.86-.82,178.68.77,246.64-1.79" />
        <path d="M667.7,331.48q-100.25-.51-200.47-.16c-16.88.05-33.8.13-50.57,1.35-9.82.72-19.57,1.83-29.43,2.31-20.64,1-41.26-2-62-1.85-45.15.37-137.06,1.37-190.9-.06" />         
      </g>
 <g class="wholeFlower">
 <g class="flowerHead" transform="translate(0,0)" stroke-miterlimit="10" stroke-width="4"  stroke="#616163" stroke-linecap="round" stroke-linejoin="round" fill="#FCFCFF">
  
         <path d="M155.68,167c2.37-.64,4.85,1.1,5.9,3.32s1,4.76.95,7.21a21.87,21.87,0,0,1,6.3-3.4,7.37,7.37,0,0,1,6.8,1.17c1.8,1.59,2.22,4.73.48,6.37,3.16-1.65,7-1.1,10.49-.5a7.9,7.9,0,0,1,3.84,1.37,5.38,5.38,0,0,1,1.54,2.31,8.59,8.59,0,0,1-8.54,11.61c6.19,1.22,10.76,8,9.26,14.18a7.17,7.17,0,0,1-3.51,4.88c-2.56,1.24-5.61.19-8.44.5a28.59,28.59,0,0,1-.48,10.39,6.13,6.13,0,0,1-.79,2.07,5.39,5.39,0,0,1-3.56,2c-5.92,1.13-11.92-2.34-15.69-7a39.94,39.94,0,0,1-12.62,4.91c-2.62.52-5.53.73-7.79-.7a8.12,8.12,0,0,1-3.3-5.13,22.39,22.39,0,0,1-.25-6.23,8.39,8.39,0,0,1-5.88,2.31,20.68,20.68,0,0,1-6.36-1.1c-3.76-1.12-8-3.06-8.87-6.88-.84-3.56,1.81-7.19,5.12-8.73s7.12-1.49,10.77-1.42a17.31,17.31,0,0,1-5.74-4.18,8.59,8.59,0,0,1-2.14-6.62,2.67,2.67,0,0,1,.68-1.58,3.06,3.06,0,0,1,1.79-.66,16.58,16.58,0,0,1,6.86.64,14.21,14.21,0,0,1-1.75-6.7,6.61,6.61,0,0,1,3.38-5.75c3.27-1.56,7.11.71,9.53,3.4a13.26,13.26,0,0,1,15.88-11.91m.21,12a22.32,22.32,0,0,1-6.12.76c-1-.07-2.09-.29-3.14-.29a12.06,12.06,0,0,0-4.08.9c-5,1.86-9.75,5.41-11.66,10.62-2.14,5.81-.35,12.45,2.53,17.89a21.3,21.3,0,0,0,3.59,5.13c3.32,3.3,8.13,4.56,12.7,4.3s9-1.89,13.18-3.72A16.28,16.28,0,0,0,170,213a18,18,0,0,0,3-3.23l3.62-4.56a16.89,16.89,0,0,0,2.66-4.12,11.45,11.45,0,0,0-1.08-9.71,23.82,23.82,0,0,0-6.85-7c-3.81-2.79-8.42-5.21-12.93-4.08" />
        <path d="M153.22,167.61a8.1,8.1,0,0,1,9.09,11,19,19,0,0,1,7.08-4,5.9,5.9,0,0,1,2.69-.33,4.59,4.59,0,0,1,3.27,3,13.38,13.38,0,0,1,.63,4.59c3.39-1.53,7.29-2.4,10.84-1.28s6.46,4.75,5.82,8.41c-.72,4.08-5.06,6.34-9,7.73a11.42,11.42,0,0,1,7.27,17,3.67,3.67,0,0,1-1.52,1.55,4.4,4.4,0,0,1-1.88.24l-7-.12a13.8,13.8,0,0,1-2,11.15,5.29,5.29,0,0,1-4.69,2.69c-5.36.34-10.36-2.93-14-6.92-3.62,4.61-10.31,5.38-16.13,4.76a5.6,5.6,0,0,1-2.9-.9,5.15,5.15,0,0,1-1.3-1.72,19,19,0,0,1-2.16-8.78,13.68,13.68,0,0,1-8.61,3.21,22.67,22.67,0,0,1-5.6-.8,11.46,11.46,0,0,1-4.36-1.78c-2.06-1.57-3-4.24-3.26-6.8-.22-1.83-.1-3.91,1.21-5.2a6.54,6.54,0,0,1,2.28-1.3,30.3,30.3,0,0,1,11.69-1.95c-3.73-1.83-7.87-4.16-8.78-8.21a5.16,5.16,0,0,1,0-2.59,5.37,5.37,0,0,1,4.74-3.43,12.76,12.76,0,0,1,6,1.31,5.79,5.79,0,0,1-1.43-9.91,7.84,7.84,0,0,1,6.3-1.21,23,23,0,0,1,6.13,2.47,10.19,10.19,0,0,1,10-11.81m8.21,12a60.09,60.09,0,0,0-13.41.8c-4.39.92-8.7,2.94-11.56,6.4-4.69,5.66-4.55,14.31-1,20.74a16.71,16.71,0,0,0,3.32,4.32,25.88,25.88,0,0,0,3.29,2.4,24.58,24.58,0,0,0,5.81,3.09c4.42,1.43,9.23.28,13.69-1a35.12,35.12,0,0,0,9-3.75A19.58,19.58,0,0,0,180,197.32a9.17,9.17,0,0,0-.26-2.86,11.84,11.84,0,0,0-1.47-2.93l-3.83-6.15a7.09,7.09,0,0,0-1.79-2.16,6.79,6.79,0,0,0-1.94-.82,124.2,124.2,0,0,0-12.76-3.11" />
        <path d="M154.2,167.47c2.5.73,5.12,1.53,7,3.39s2.48,5.15.69,7a61.12,61.12,0,0,0,5.06-3.6,9.79,9.79,0,0,1,5.73-2.08c2.07.08,4.2,1.49,4.5,3.54.42,2.81-2.5,5-3,7.85,2.42-1.57,5.08-3.21,8-3a13.6,13.6,0,0,1,4.2,1.23c2.35,1,4.93,2.19,5.86,4.56a6.15,6.15,0,0,1,.06,3.93,9,9,0,0,1-10.42,6.06,9.06,9.06,0,0,1,8.68,3.65,12.21,12.21,0,0,1,1.88,9.47,8.37,8.37,0,0,1-1.32,3.32,7.81,7.81,0,0,1-6,2.87,22.9,22.9,0,0,1-6.75-1c1.8,1,3.8,2.31,4.05,4.35a6.56,6.56,0,0,1-.41,2.66c-.74,2.46-1.63,5.1-3.75,6.54-1.92,1.3-4.39,1.32-6.7,1.2a20.39,20.39,0,0,1-7.06-1.34,8.28,8.28,0,0,1-4.83-5.06,11.32,11.32,0,0,1-3.22,4.51,9.72,9.72,0,0,1-3.16,1.34,32.58,32.58,0,0,1-5.29,1,10,10,0,0,1-3.89-.23,8,8,0,0,1-4.83-5.32,23.55,23.55,0,0,1-.75-7.4,42.25,42.25,0,0,1-11,2.4c-3.77.13-7.74-.86-10.46-3.49s-3.8-7.09-1.86-10.34c1.54-2.58,4.63-3.93,7.63-4.15a28.19,28.19,0,0,1,8.9,1.27,27.39,27.39,0,0,1-5.91-4.19,9.37,9.37,0,0,1-2.92-6.45,5.72,5.72,0,0,1,3.93-5.5c2.07-.53,4.2.4,6.14,1.32a6.92,6.92,0,1,1,9.68-9.83c1-2.83,2.09-5.75,4.15-7.94s5.37-3.51,8.14-2.35m5.62,12.67a56.91,56.91,0,0,0-12.31.6,19.18,19.18,0,0,0-10.75,5.61,17,17,0,0,0-4,12,26.22,26.22,0,0,0,4,12.2,16.93,16.93,0,0,0,5.61,6.06c3.91,2.32,8.79,2,13.3,1.43a41.54,41.54,0,0,0,11.14-2.65,16.93,16.93,0,0,0,8.5-7.4c1.59-3.07,1.88-6.63,2.14-10.08.28-3.71.4-7.9-2.13-10.62-1.69-1.81-4.19-2.56-6.57-3.23l-12.57-3.54" />
        <path d="M153.17,167.5a8.3,8.3,0,0,1,8.63,10.55,20.31,20.31,0,0,1,9.5-5.38,2.07,2.07,0,0,1,2.74,1.06c1.74,2.57,2.71,6.26.72,8.65a8,8,0,0,1,8.82-2.09,11.46,11.46,0,0,1,6.45,6.8,6.7,6.7,0,0,1,.38,4.42,5.67,5.67,0,0,1-3.92,3.4,14.4,14.4,0,0,1-5.36.23,10,10,0,0,1,8.55,2.92,12.3,12.3,0,0,1,3.39,8.51,7,7,0,0,1-.8,3.62c-1,1.76-3.07,2.66-5,3.22a27.81,27.81,0,0,1-11.15.84,10.19,10.19,0,0,1,4.83,7.81,7.8,7.8,0,0,1-4.68,7.6,11.64,11.64,0,0,1-4.44.53c-6.48-.18-10.58-2.48-13.61-8.21.35,1.89-2.5,4.27-4.13,5.29a4.74,4.74,0,0,1-2,.54c-2.91.31-6.09.33-8.46-1.38-2.88-2.07-3.65-6-3.49-9.59a16.94,16.94,0,0,1-17.08.31,11.93,11.93,0,0,1-5.47-6.17,7.65,7.65,0,0,1,1.54-7.83c2.94-2.91,7.75-2.29,11.8-1.46a14.83,14.83,0,0,1-6.32-8.05c-.6-1.88-.7-4.22.78-5.53a5.14,5.14,0,0,1,3.8-.92,14.55,14.55,0,0,1,5.48,1.47,10.16,10.16,0,0,1-2.43-9.52,4.16,4.16,0,0,1,1.73-2.61,4.43,4.43,0,0,1,3.07-.19,15.15,15.15,0,0,1,5.6,2.47,12.54,12.54,0,0,1,10.57-11.94m4.52,13.29c-7.92-.52-14.19,1.34-17.82,4.68-2.93,2.71-5.54,5.87-6.67,9.69a10,10,0,0,0-.47,4,13,13,0,0,0,1.46,4.06,45.65,45.65,0,0,0,5.2,8.69,17.38,17.38,0,0,0,8.11,5.84,20.54,20.54,0,0,0,8.8.36,46.71,46.71,0,0,0,10.77-2.82c2.39-.94,4.8-2.16,6.31-4.23.85-1.17,2.37-2.54,2.87-3.9a30.86,30.86,0,0,0,2.16-13.17,11.89,11.89,0,0,0-2-6c-1.68-2.57-5.47-3.21-8.1-4.8-1.76-1.07-7.62-1.55-10.76-2.07" />
        <path d="M142.19,178.79c.88-3.87,2.73-7.69,5.95-10s8-2.69,11.06-.15c2.51,2.09,3.35,5.56,3.64,8.82,2.26-1.42,3.73-4,6.26-4.86a5.86,5.86,0,0,1,6.31,2.21,7.6,7.6,0,0,1,.88,6.81,21.06,21.06,0,0,1,8.48-.68c2.19.19,4.53.65,6,2.27,2.07,2.28,1.54,6.07-.34,8.5s-4.77,3.86-7.56,5.19a4.58,4.58,0,0,1,4.44.52,9.31,9.31,0,0,1,2.93,3.58,13.41,13.41,0,0,1,1.35,10c-1,3.29-4.16,6-7.6,5.87a12.93,12.93,0,0,1-3.84-1,10.25,10.25,0,0,1-13.26,14.32c-3.42-1.59-5.67-4.89-7.74-8-1.2,3.56-5,5.64-8.73,6.18a13.33,13.33,0,0,1-6.69-.57A11,11,0,0,1,137,215.92a19.09,19.09,0,0,1-16.53.17,8.8,8.8,0,0,1-2.59-1.74,8.38,8.38,0,0,1-2.09-5.13c-.29-3,.54-6.34,2.94-8.19s5.66-1.82,8.67-1.72a19,19,0,0,1-3.8-6.76c-.63-2.52-.15-5.49,1.83-7.18s5.55-1.41,6.73.92a20,20,0,0,1,0-8.5,6.13,6.13,0,0,1,1.15-2.71,4.71,4.71,0,0,1,5.63-.91,8,8,0,0,1,3.73,4.71m19.49.54a40.25,40.25,0,0,0-14.15.52c-4.59,1.17-9,3.78-11.46,7.82a17.75,17.75,0,0,0-2.31,10.79,30.88,30.88,0,0,0,3.2,10.69,15.81,15.81,0,0,0,4.37,5.92c2.37,1.77,5.41,2.3,8.32,2.79,3.39.56,6.92,1.12,10.22.14,1.79-.53,3.42-1.5,5.18-2.16a19.76,19.76,0,0,0,3.06-1.23,12.24,12.24,0,0,0,3-2.77c3.95-4.59,8.12-9.77,8-15.83a15.41,15.41,0,0,0-5.45-11,27,27,0,0,0-11.22-5.55" />
        <path d="M132.8,187.53a18.43,18.43,0,0,1-2.23-5.14,6.28,6.28,0,0,1,1.06-5.33,6.18,6.18,0,0,1,3.37-1.91,6.88,6.88,0,0,1,4.75.43,4.48,4.48,0,0,1,2.46,3.91,17,17,0,0,1,14.18-12.76,4,4,0,0,1,2.35.26,4.29,4.29,0,0,1,1.67,2.36,36.35,36.35,0,0,1,2.2,8.84c1.72-1.69,3-3.81,4.8-5.4s4.48-2.59,6.63-1.49a7.64,7.64,0,0,1,2.92,3.35,9.21,9.21,0,0,1,1.38,3.86,3.62,3.62,0,0,1-1.75,3.49,23.52,23.52,0,0,1,6.5-1.95,8,8,0,0,1,6.34,1.82,9.43,9.43,0,0,1,2.45,5c.45,2.12.56,4.46-.57,6.31-1.59,2.64-5,3.37-8.06,3.86a15.91,15.91,0,0,1,9.37,12.4,5.14,5.14,0,0,1-.22,2.67c-.69,1.59-2.54,2.29-4.24,2.68a30.92,30.92,0,0,1-7.3.78,28.81,28.81,0,0,1-.51,7.87,9.77,9.77,0,0,1-4.43,6.28,10.74,10.74,0,0,1-4.06,1.12,14.55,14.55,0,0,1-8.79-1.55,9,9,0,0,1-4.68-7.32,32.18,32.18,0,0,1-9.92,6.34,10.28,10.28,0,0,1-6.47.88,8.23,8.23,0,0,1-5.27-5.48,24.43,24.43,0,0,1-.94-7.82,23.52,23.52,0,0,1-7.56,2.31,14,14,0,0,1-5.69-.3,10,10,0,1,1,6.58-18.86,17.09,17.09,0,0,1-3.9-5,6.31,6.31,0,0,1,.28-6.11c1.23-1.74,4-2.38,5.58-.95m30.74-7.19a26.61,26.61,0,0,0-20.45,3,17.35,17.35,0,0,0-5.67,5.27,15.81,15.81,0,0,0-1.94,11.15,27.19,27.19,0,0,0,4.6,10.53,20.52,20.52,0,0,0,4.77,5.23,17.58,17.58,0,0,0,7.09,2.88,25.06,25.06,0,0,0,14.63-1.68A27.26,27.26,0,0,0,177.15,205a19.68,19.68,0,0,0,3-9.86,14.67,14.67,0,0,0-13.24-14.61c-2.28-.23-4.64.08-6.82-.64" />

      </g> 
 <g class="stalk" stroke-miterlimit="10" stroke-width="4"  stroke="#616163" stroke-linecap="round" stroke-linejoin="round" fill="#FCFCFF">
        <path d="M155.33,291.94c0-7.12-.05,7.13-.07,0,0-5.19,0-32.62.27-37.77.52-8.81,1.93-21.19.1-29.17" />
        <path d="M155.8,225s-.84,46.59-.34,66.94" />
        <path d="M155.11,225c.82,14.76.93,52.09,1,66.94,0,3.15,0-3.08-.25,0-.41,4.36-1.42-4.44-1.52,0" />
        <path d="M155.88,291.94c-.77-19.39,1.34-47.65.14-66.94" />
        <path d="M155,291.94c.43-19.61.95-66.94.95-66.94" />
        <path d="M154.29,291.94c2.29-19.47,3.24-46.88,2.81-66.94" />
      </g>  
  
</g>     
 
<g class="dragger" stroke-miterlimit="10" stroke-width="4"  stroke="#616163" stroke-linecap="round" stroke-linejoin="round" fill="#FCFCFF" fill-opacity="0.97">
           <path d="M123.61,293.49c.56-.38,29.75-.88,44.72-.15,3.82.19,8.38-.33,12.36-.48,4.37-.16,4.37,1,4.48,2.13A74.1,74.1,0,0,1,184,307.9a4.34,4.34,0,0,1-.88,2.19,4.06,4.06,0,0,1-2.93,1c-19.67.4-31.92.79-48.38-.06a2.79,2.79,0,0,1-1.56-.38,3,3,0,0,1-.94-1.86c-1.11-5-4.22-9.95-5.33-14.92m10.38,19.31q1.18,20.7,4.21,41.24a2.43,2.43,0,0,0,.83,1.79,2.4,2.4,0,0,0,1.57.16c10.42-1.28,20.85,1,31.28-.31a3,3,0,0,0,3.28-3.38c1.55-12.59,2.76-28.75,3.65-41.41" />
        <path d="M123.25,293.25a352.67,352.67,0,0,1,35.62,0c5.44.3,10.92.73,16.31,0,3.18-.44,6.71-1.23,9.38.55-.95,5.91-2.37,16.38-3.71,17.54s-8.73.83-13.12.66c-12.23-.49-21.23-.49-34.82-.53a3.18,3.18,0,0,1-2-.71,3.89,3.89,0,0,1-.87-1.17c-2.74-5-3.51-9.08-6.32-16.08m10,20.64c4,13.36,1.1,24.39,4.31,37.95.1.4.21,3.16.48,3.46.86,1,2.25.76,3.54.7,4.32-.2,6.66-.2,10.52-.44,3.58-.22,6.66.53,10.61,1,3.13.4,6.65.4,9.23-.58.36-.14.8-.9,1.13-1.1a1.26,1.26,0,0,0,.42-1,323.2,323.2,0,0,1,5.7-41.78" />
        <path d="M126,292.87c8.48.28,17,.57,25.44.71a69.88,69.88,0,0,0,9.27-.26,56,56,0,0,1,5.76-.61,44,44,0,0,1,5.83.53,114.37,114.37,0,0,0,12.69.49c-2.85,4.78-2,10.89-3.86,16.15a1.66,1.66,0,0,1-.45.77,1.69,1.69,0,0,1-1.08.25l-6.55,0a66.88,66.88,0,0,0-7.75.33c-2.39.3-4.75.85-7.16,1-2.65.12-5.31-.31-8-.42-6.05-.26-12.17,1.08-18.13,0a3.35,3.35,0,0,1-1.41-.49,3.57,3.57,0,0,1-1.12-1.89q-2.78-8.15-5.32-16.37M134,313.32,135.23,327c.15,1.75.3,3.5.48,5.24A203.93,203.93,0,0,0,139.27,355a1.78,1.78,0,0,0,.6,1.18,1.7,1.7,0,0,0,.92.19l16,.42c4.49.11,9,.23,13.46.33,1.35,0,3-.08,3.62-1.27a3.94,3.94,0,0,0,.32-1.81c.21-11.25,4.57-22.11,4.79-33.36a90.13,90.13,0,0,1,.19-9.73" />
        <path d="M123.12,292.79c2.77-.09,8.54-.18,11.31-.27a58,58,0,0,1,7,.05c1.24.11,2.46.3,3.69.46,13.14,1.65,38.94-.67,39.67.4s-1.42,6.17-1.76,9.35a36.47,36.47,0,0,1-1.5,7.16,1,1,0,0,1-.29.5,1,1,0,0,1-.56.14c-11.6.54-23.22.54-34.83.55H131.45a1.24,1.24,0,0,1-.81-.19,1.23,1.23,0,0,1-.31-.61,97.13,97.13,0,0,0-7.1-17.52m9.91,18.26c.16,1,.31,4,.45,5,1.56,10.63,3.53,21.34,3.92,32.07.09,2.63-.12,6.47,1.17,7.76,1.82.6,8.74,0,13.16.48,6.6.67,13.78.49,19,.94a2.24,2.24,0,0,0,1.85-.94,3.45,3.45,0,0,0,.48-1.21c1.2-4.84,7.06-36.5,5.92-44.25" />
        <path d="M124.75,293.06l24.53.88c2.12.08,4.25.15,6.37.1s4.24-.25,6.35-.35c7.63-.36,15.25.44,22.84,1.24-2.12,5.16-.2,11.39-2.67,16.39A1,1,0,0,1,181,312l-10.9.2c-9.28.17-18.55-1.29-27.82-.85a54.85,54.85,0,0,1-8.76-.19c-1.07-.12-2.43.54-3-.39a2.1,2.1,0,0,1-.21-.51,100.29,100.29,0,0,0-7.13-16.86m9.38,17.69c3.25,13.68,3.86,29.94,5.7,43.89a1.39,1.39,0,0,0,.38.92,1.36,1.36,0,0,0,1,.15c11.4-1.16,23.13,2.58,34.24-.22a52.31,52.31,0,0,1,.65-12.18c.38-2.21.91-4.39,1.38-6.59,1.8-8.36,2.52-16.57,4.1-25.44" />
      </g> 
 
<use xlink:href="#allNumbers" class="potNumbers"/>

 
 <circle class="follower" cx="150" cy="300" r="0"/>
</svg>
              
            
!

CSS

              
                body {
 background-color: #FCFCFF;
 overflow: hidden;
 text-align:center;

}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}


.numLabel{
 
 pointer-events:none;
}

.dragger{
 -webkit-tap-highlight-color:transparent;
}



              
            
!

JS

              
                var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    potNumbers = select('.potNumbers'),
    follower = select('.follower'),
    wholeFlower = select('.wholeFlower'),
    stalk = select('.stalk'),
    labelGroup = select('.labelGroup'),
    flowerHead = select('.flowerHead'),
    dragger = select('.dragger'),
    one = select('.one'),
    two = select('.two'),
    track = select('.track'),
    stalkLines = selectAll('.stalk path'),
    twoLines = selectAll('.two path'),
    fourLines = selectAll('.four path'),
    threeLines = selectAll('.three path'),
    fiveLines = selectAll('.five path'),
    sixLines = selectAll('.six path'),
    sevenLines = selectAll('.seven path'),
    eightLines = selectAll('.eight path'),
    nineLines = selectAll('.nine path'),
    tenLines = selectAll('.ten path'),
    flowerHeadLines = selectAll('.flowerHead path'),
    oneLines = selectAll('.one path'),
    twoLines = selectAll('.two path'),
    oneLines = selectAll('.one path'),
    draggerLines = selectAll('.dragger path'),
    trackLines = selectAll('.track path'),
    allNumLabels = selectAll('.numLabel'),
    numDraggerLines = draggerLines.length-1,
    numTrackLines = trackLines.length-1,
    fps = 18,
    maxDragX = 486,
    step = maxDragX/9,
    dragId = 1,
    labelId = 1,
    oldDragId = -1,
    followerVX = 0,
    spring = 0.25,
    friction = 0.5
  

TweenMax.set('svg', {
  visibility: 'visible'
})
TweenMax.set(allNumLabels, {
 scale:0.8,
 transformOrigin:'50% 50%',
 alpha:0
})
TweenMax.set(flowerHead, {
 transformOrigin:'50% 50%',
 scale:0
})
TweenMax.set([labelGroup, draggerLines], {
 transformOrigin:'50% 50%'
})

TweenMax.set([stalk, wholeFlower], {
 transformOrigin:'50% 100%'
})

TweenMax.set(stalk, {
 scaleY:0.3
})

Draggable.create(dragger, {
 type:'x',
 bounds:{minX:0, maxX:maxDragX},
 onDrag:onUpdate,
 throwProps:true,
 onThrowUpdate:onUpdate,
 onPress:onPress,
 onRelease:onRelease,
 overshootTolerance:0,
 snap:function(value){
  return Math.round(value/step) * step
 }
})

function onUpdate(){
 
 oldDragId = dragId;
 
 dragId = Math.round(dragger._gsTransform.x/step);
 labelId = dragId + 1;
 
/*  TweenMax.to([labelGroup, flowerHead],1, {
  x:dragger._gsTransform.x,
  ease:Elastic.easeOut.config(0.85,0.31)
 })
 */
 TweenMax.set([ wholeFlower], {
  x:dragger._gsTransform.x
 })
 TweenMax.set([potNumbers], {
  //x:wholeFlower._gsTransform.x
 })
 
 if(oldDragId == dragId){return;}
 TweenMax.set(allNumLabels[oldDragId], {
  alpha:0
 })
 TweenMax.fromTo(allNumLabels[dragId], 1, {
  alpha:0,
  //y:55,
  //scale:0
 }, {
  //scale:0.8,
  //y:55,
  alpha:1,
  ease:Elastic.easeOut.config(0.5,0.3)
 })
}

 TweenMax.to(wholeFlower, 1, {
 rotation:'+=0',
 repeat:-1,
 modifiers:{
  rotation:function(rotation){
   //followerVX += -(dragger._gsTransform.x - flowerHead._gsTransform.x) * spring;
   //followerVX *= friction;
   return followerVX
  }
 }
})

 TweenMax.to(follower, 1, {
 x:'+=0',
 repeat:-1,
 modifiers:{
  x:function(x){
   followerVX += -(dragger._gsTransform.x - follower._gsTransform.x) * spring;
   followerVX *= friction;
   return follower._gsTransform.x - followerVX
  }
 }
}) 

TweenMax.to(potNumbers, 1, {
 x:'+=0',
 repeat:-1,
 modifiers:{
  x:function(x){
   return wholeFlower._gsTransform.x + followerVX
  }
 }
})

function onPress(){
 var tl = new TimelineMax().timeScale(1.6);
 
 tl.to(labelGroup, 0.2, {
  //y:-97,
  scale:0,
  alpha:0
  //ease:Elastic.easeOut.config(0.5,0.3)
 })
 .set(labelGroup, {
  y:-97,
  alpha:1,
  scale:0
 })
  .to(stalk, 0.2, {
  scaleY:1
 })
 .to(flowerHead, 0.8, {
  scale:1,
  //delay:0.2,
  ease:Elastic.easeOut.config(0.85,0.53)
 })
 .to(labelGroup, 0.6, {
  //y:-97,
  scale:1,
  //alpha:1,
  ease:Elastic.easeOut.config(0.85,0.53)
 },'-=0.6')

 
 
}



function onRelease(){
 
 TweenMax.killTweensOf(flowerHead)
 var tl = new TimelineMax();
 
 tl.to(labelGroup, 0.1, {
  //y:36,
  //ease:Elastic.easeOut.config(0.5,0.3)
  alpha:0
 })
  .set(flowerHead, {
  scale:0  
 })
 
 //TweenMax.killTweensOf(flowerHead)
 .set(labelGroup, {
  y:36
 }) 
 .to(labelGroup, 0.1, {
  //y:36,
  //ease:Elastic.easeOut.config(0.5,0.3)
  alpha:1
 })
.to(stalk, 0.2, {
  scaleY:0.3
 },'-=0.1') 
 TweenMax.to(dragger, 0.2, {
  //y:-0,
  ease:Elastic.easeOut.config(0.5,0.3)
 }) 
 
}

var draggerTl = new TimelineMax().timeScale(fps);
   draggerTl.to({frameId: 0}, numDraggerLines, {
      frameId: numDraggerLines,
      ease: SteppedEase.ease.config(numDraggerLines),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(draggerLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var flowerHeadTl = new TimelineMax().timeScale(fps);
   flowerHeadTl.to({frameId: 0}, flowerHeadLines.length-1, {
      frameId: flowerHeadLines.length-1,
      ease: SteppedEase.ease.config(flowerHeadLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(flowerHeadLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var trackTl = new TimelineMax().timeScale(fps);
   trackTl.to({frameId: 0}, numTrackLines, {
      frameId: numTrackLines,
      ease: SteppedEase.ease.config(numTrackLines),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(trackLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var oneTl = new TimelineMax().timeScale(fps);
   oneTl.to({frameId: 0}, oneLines.length-1, {
      frameId: oneLines.length-1,
      ease: SteppedEase.ease.config(oneLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(oneLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


var twoTl = new TimelineMax().timeScale(fps);
   twoTl.to({frameId: 0}, twoLines.length-1, {
      frameId: twoLines.length-1,
      ease: SteppedEase.ease.config(twoLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(twoLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


var threeTl = new TimelineMax().timeScale(fps);
   threeTl.to({frameId: 0}, threeLines.length-1, {
      frameId: threeLines.length-1,
      ease: SteppedEase.ease.config(threeLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(threeLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


var fourTl = new TimelineMax().timeScale(fps);
   fourTl.to({frameId: 0}, fourLines.length-1, {
      frameId: fourLines.length-1,
      ease: SteppedEase.ease.config(fourLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(fourLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


var fiveTl = new TimelineMax().timeScale(fps);
   fiveTl.to({frameId: 0}, fiveLines.length-1, {
      frameId: fiveLines.length-1,
      ease: SteppedEase.ease.config(fiveLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(fiveLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var sixTl = new TimelineMax().timeScale(fps);
   sixTl.to({frameId: 0}, sixLines.length-1, {
      frameId: sixLines.length-1,
      ease: SteppedEase.ease.config(sixLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(sixLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var sevenTl = new TimelineMax().timeScale(fps);
   sevenTl.to({frameId: 0}, sevenLines.length-1, {
      frameId: sevenLines.length-1,
      ease: SteppedEase.ease.config(sevenLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(sevenLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


var eightTl = new TimelineMax().timeScale(fps);
   eightTl.to({frameId: 0}, eightLines.length-1, {
      frameId: eightLines.length-1,
      ease: SteppedEase.ease.config(eightLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(eightLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


var nineTl = new TimelineMax().timeScale(fps);
   nineTl.to({frameId: 0}, nineLines.length-1, {
      frameId: nineLines.length-1,
      ease: SteppedEase.ease.config(nineLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(nineLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var tenTl = new TimelineMax().timeScale(fps);
   tenTl.to({frameId: 0}, tenLines.length-1, {
      frameId: tenLines.length-1,
      ease: SteppedEase.ease.config(tenLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(tenLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })

var stalkTl = new TimelineMax().timeScale(fps);
   stalkTl.to({frameId: 0}, stalkLines.length-1, {
      frameId: stalkLines.length-1,
      ease: SteppedEase.ease.config(stalkLines.length-1),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(stalkLines, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      },
    repeat:-1
    })


//ScrubGSAPTimeline(tl);

onUpdate()


              
            
!
999px

Console