css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <h1>Random Access Runtime Controls</h1>
  <h2>Navigate seamlessly to any point in time of any animation</h2>

  <p>By using a simple UI control like an HTML5 input slider you can generate values between 0 and 1 to pass into the animation's progress() method.</p>

  <div class="nav">
    <span style="font-weight:700; color:#6fb936">drag the slider:&nbsp;</span>
    <input id="progressSlider" type="range" min="0" max="1" value="0" step="0.001" />
    <span id="progressDisplay">tl.progress()</span>
  </div>


  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 440" style="enable-background:new 0 0 1200 440;" xml:space="preserve">
    <style type="text/css">
      .background{fill:#000;}
      	.st1{fill:#848484;}
      	.st2{fill:#F41111;}
      	.st3{fill:#FFFFFF;}
      	.st4{fill:#88CE02;}
      	.st5{fill:#EFEFEF;}
      	.st6{fill:#001423;}
      	.st7{opacity:0.3;enable-background:new    ;}
      	.st8{fill-opacity:0;}
      	.st9{opacity:0.4;enable-background:new    ;}
      	.st10{fill:#88CE02;stroke:#000000;stroke-width:1.586;stroke-linejoin:round;stroke-miterlimit:10;}
    </style>


    <defs>
      <clipPath id="greensock-mask">
        <rect x="359" y="100" class="st2" width="841" height="159.2" />
      </clipPath>
    </defs>

    <rect id="background" x="0" class="background" width="1200" height="440" />
    <g>
      <g id="tagline">
        <g id="engaging">
          <path class="st1" d="M382.1,285.2c0-1.4,0.6-2,2-2h22.6c0.8,0,1.2,0.6,1.2,2v1c0,1.4-0.4,2-1.2,2h-18.9v14.9h16.9
				c0.8,0,1.2,0.6,1.2,2v1c0,1.4-0.4,2-1.2,2h-16.9v15.9h18.9c0.8,0,1.2,0.6,1.2,2v1c0,1.4-0.4,2-1.2,2h-22.8c-1.4,0-2-0.6-2-2v-42
				L382.1,285.2L382.1,285.2z" />
          <path class="st1" d="M416.7,304.6c0-5.3-0.8-7.9-0.8-8.1c0-1.2,2.6-1.4,3.5-1.4c1.6,0,1.8,2.6,2.2,4.3c2.6-3.1,6.5-4.9,10.2-4.9
				c6.7,0,10.6,3.9,10.6,10.6v22.6c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4v-22c0-3.9-2.4-6.3-6.7-6.3
				c-2.9,0-6.1,1.8-8.1,4.5v23.8c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4L416.7,304.6L416.7,304.6z" />
          <path class="st1" d="M456.8,326.1c-2.4-1-4.1-2.6-4.1-5.3c0-3.3,2.6-4.7,4.9-5.5c-3.9-1.8-5.9-5.5-5.9-9.8
				c0-6.1,4.5-11.2,13-11.2c1.6,0,3.1,0.2,4.3,0.4h11.2c0.8,0,1.2,0.6,1.2,2v0.8c0,1.4-0.4,2-1.2,2h-4.5c1.4,1.8,2.2,3.9,2.2,6.1
				c0,6.1-4.5,11.2-13,11.2h-0.6c-1.6,0-5.5,0.4-5.5,2.6c0,5.1,22,0,22,12.8c0,5.7-5.7,10.2-16.3,10.2c-8.6,0-14.7-1.8-14.7-8.6
				C449.5,330.2,452.5,327.6,456.8,326.1z M465,337.8c5.9,0,9.8-2.2,9.8-5.3c0-3.9-6.9-4.3-13-5.3c-2.6,1-6.5,3.3-6.5,6.1
				C455.2,336.9,459.7,337.8,465,337.8z M472.1,305.6c0-5.1-3.3-6.5-7.3-6.5c-4.1,0-7.3,1.6-7.3,6.5c0,5.1,3.3,6.5,7.3,6.5
				C468.8,312.1,472.1,310.7,472.1,305.6z" />
          <path class="st1" d="M507.5,307.6v-3.1c0-2.9-1.8-5.5-7.1-5.5c-5.9,0-9.6,2.6-10.2,2.6c-0.8,0-2.2-2.4-2.2-3.3
				c0-1.6,5.7-4.1,12.2-4.1c8.1,0,12.8,3.9,12.8,10.2V319c0,5.3,0.8,7.9,0.8,8.1c0,1.2-2.6,1.4-3.5,1.4c-1.6,0-1.8-2.6-2.2-4.5
				c-2.4,2.6-6.1,4.9-11,4.9c-6.3,0-11.2-3.1-11.2-9.8C485.9,308.4,497.8,307.6,507.5,307.6z M497.4,324.3c4.7,0,7.5-2.2,10.2-4.5
				v-7.7c-6.7,0-15.7,0-15.7,6.7C491.9,322.5,493.7,324.3,497.4,324.3z" />
          <path class="st1" d="M527.9,326.1c-2.4-1-4.1-2.6-4.1-5.3c0-3.3,2.6-4.7,4.9-5.5c-3.9-1.8-5.9-5.5-5.9-9.8
				c0-6.1,4.5-11.2,13-11.2c1.6,0,3.1,0.2,4.3,0.4h11.2c0.8,0,1.2,0.6,1.2,2v0.8c0,1.4-0.4,2-1.2,2h-4.5c1.4,1.8,2.2,3.9,2.2,6.1
				c0,6.1-4.5,11.2-13,11.2h-0.6c-1.6,0-5.5,0.4-5.5,2.6c0,5.1,22,0,22,12.8c0,5.7-5.7,10.2-16.3,10.2c-8.6,0-14.7-1.8-14.7-8.6
				C520.6,330.2,523.4,327.6,527.9,326.1z M535.8,337.8c5.9,0,9.8-2.2,9.8-5.3c0-3.9-6.9-4.3-13-5.3c-2.6,1-6.5,3.3-6.5,6.1
				C526.1,336.9,530.6,337.8,535.8,337.8z M543,305.6c0-5.1-3.3-6.5-7.3-6.5c-4.1,0-7.3,1.6-7.3,6.5c0,5.1,3.3,6.5,7.3,6.5
				C539.7,312.1,543,310.7,543,305.6z" />
          <path class="st1" d="M559.5,285.2v-3.9c0-0.8,0.8-1.4,2.6-1.4h0.8c1.8,0,2.6,0.6,2.6,1.4v3.9c0,0.8-0.8,1.4-2.6,1.4h-0.8
				C560.3,286.6,559.5,286,559.5,285.2z M559.7,296c0-0.8,0.8-1.4,2.6-1.4h0.2c1.8,0,2.6,0.6,2.6,1.4v31.4c0,0.8-0.8,1.4-2.6,1.4
				h-0.2c-1.8,0-2.6-0.6-2.6-1.4V296z" />
          <path class="st1" d="M576.6,304.6c0-5.3-0.8-7.9-0.8-8.1c0-1.2,2.6-1.4,3.5-1.4c1.6,0,1.8,2.6,2.2,4.3c2.6-3.1,6.5-4.9,10.2-4.9
				c6.7,0,10.6,3.9,10.6,10.6v22.6c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4v-22c0-3.9-2.4-6.3-6.7-6.3
				c-2.9,0-6.1,1.8-8.1,4.5v23.8c0,0.8-0.8,1.4-2.6,1.4H579c-1.8,0-2.6-0.6-2.6-1.4L576.6,304.6L576.6,304.6z" />
          <path class="st1" d="M616.7,326.1c-2.4-1-4.1-2.6-4.1-5.3c0-3.3,2.6-4.7,4.9-5.5c-3.9-1.8-5.9-5.5-5.9-9.8
				c0-6.1,4.5-11.2,13-11.2c1.6,0,3.1,0.2,4.3,0.4h11.2c0.8,0,1.2,0.6,1.2,2v0.8c0,1.4-0.4,2-1.2,2h-4.7c1.4,1.8,2.2,3.9,2.2,6.1
				c0,6.1-4.5,11.2-13,11.2H624c-1.6,0-5.5,0.4-5.5,2.6c0,5.1,22,0,22,12.8c0,5.7-5.7,10.2-16.3,10.2c-8.6,0-14.7-1.8-14.7-8.6
				C609.4,330.2,612.4,327.6,616.7,326.1z M624.9,337.8c5.9,0,9.8-2.2,9.8-5.3c0-3.9-6.9-4.3-13-5.3c-2.6,1-6.5,3.3-6.5,6.1
				C615.1,336.9,619.4,337.8,624.9,337.8z M632,305.6c0-5.1-3.3-6.5-7.3-6.5c-4.1,0-7.3,1.6-7.3,6.5c0,5.1,3.3,6.5,7.3,6.5
				C628.7,312.1,632,310.7,632,305.6z" />
        </g>
        <g id="the">
          <path class="st1" d="M665.2,299.5h-3.3c-0.8,0-1.2-0.6-1.2-2v-0.8c0-1.4,0.4-2,1.2-2h3.3l0.8-6.9c0-0.8,0.6-1.4,2-1.4h0.6
				c1.4,0,2,0.6,2,1.4v6.9h5.5c0.8,0,1.2,0.6,1.2,2v0.8c0,1.4-0.4,2-1.2,2h-5.5v20.2c0,3.9,1.6,4.9,3.5,4.9s2.2-0.4,2.9-0.4
				c0.8,0,1.4,2.4,1.4,3.1c0,1.8-3.1,2-4.7,2c-3.3,0-8.4-1.4-8.4-9L665.2,299.5L665.2,299.5z" />
          <path class="st1" d="M686.6,281.3c0-0.8,0.8-1.4,2.6-1.4h0.2c1.8,0,2.6,0.6,2.6,1.4v17.5c2.2-2.2,5.7-4.5,10-4.5
				c4.3,0,10.4,1.6,10.4,10.6v22.6c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4v-22c0-3.9-2.2-6.3-6.7-6.3
				c-4.9,0-8.1,4.5-8.1,4.5v23.8c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4L686.6,281.3L686.6,281.3z" />
          <path class="st1" d="M736.1,294.4c9,0,13.4,5.9,13.4,16.9c0,0.8-1.4,2.6-2.2,2.6h-20.6c0.6,7.1,3.7,10.4,10,10.4
				c5.7,0,8.8-2.6,9.6-2.6c0.8,0,2.2,2.4,2.2,3.3c0,1.6-5.1,4.1-11.6,4.1c-10.8,0-15.9-5.5-15.9-17.1
				C720.8,300.5,726.1,294.4,736.1,294.4z M743.6,309.2c0-6.7-2.6-10.2-7.7-10.2c-5.7,0-8.6,3.5-9.2,10.2H743.6z" />
        </g>
        <g id="internet">
          <path class="st1" d="M774.2,284.6c0-0.8,0.8-1.4,2.6-1.4h0.6c1.8,0,2.6,0.6,2.6,1.4v43c0,0.8-0.8,1.4-2.6,1.4h-0.6
				c-1.8,0-2.6-0.6-2.6-1.4V284.6z" />
          <path class="st1" d="M791.9,304.6c0-5.3-0.8-7.9-0.8-8.1c0-1.2,2.6-1.4,3.5-1.4c1.6,0,1.8,2.6,2.2,4.3c2.6-3.1,6.5-4.9,10.2-4.9
				c6.7,0,10.6,3.9,10.6,10.6v22.6c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4v-22c0-3.9-2.4-6.3-6.7-6.3
				c-2.9,0-6.1,1.8-8.1,4.5v23.8c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4L791.9,304.6L791.9,304.6z" />
          <path class="st1" d="M829.4,299.5h-3.3c-0.8,0-1.2-0.6-1.2-2v-0.8c0-1.4,0.4-2,1.2-2h3.3l0.8-6.9c0-0.8,0.8-1.4,2-1.4h0.6
				c1.4,0,2,0.6,2,1.4v6.9h5.5c0.8,0,1.2,0.6,1.2,2v0.8c0,1.4-0.4,2-1.2,2h-5.5v20.2c0,3.9,1.6,4.9,3.5,4.9c1.8,0,2.2-0.4,2.9-0.4
				c0.8,0,1.4,2.4,1.4,3.1c0,1.8-3.1,2-4.7,2c-3.3,0-8.4-1.4-8.4-9L829.4,299.5L829.4,299.5z" />
          <path class="st1" d="M863.4,294.4c9,0,13.4,5.9,13.4,16.9c0,0.8-1.4,2.6-2.2,2.6H854c0.6,7.1,3.7,10.4,10,10.4
				c5.7,0,8.8-2.6,9.6-2.6c0.8,0,2.2,2.4,2.2,3.3c0,1.6-5.1,4.1-11.6,4.1c-10.8,0-15.9-5.5-15.9-17.1
				C848.3,300.5,853.4,294.4,863.4,294.4z M870.9,309.2c0-6.7-2.6-10.2-7.7-10.2c-5.7,0-8.6,3.5-9.2,10.2H870.9z" />
          <path class="st1" d="M885.6,304.6c0-5.3-0.8-7.9-0.8-8.1c0-1.2,2.6-1.4,3.5-1.4c1.6,0,1.8,2.6,2.2,4.3c2.2-3.1,4.9-4.9,7.5-4.9
				c2.4,0,3.9,1,3.9,2.4c0,1.2-0.6,3.5-1.2,3.5c-0.8,0-1.4-0.6-3.7-0.6c-3.5,0-5.9,3.9-5.9,3.9v23.8c0,0.8-0.8,1.4-2.6,1.4h-0.2
				c-1.8,0-2.6-0.6-2.6-1.4L885.6,304.6L885.6,304.6z" />
          <path class="st1" d="M909,304.6c0-5.3-0.8-7.9-0.8-8.1c0-1.2,2.6-1.4,3.5-1.4c1.6,0,1.8,2.6,2.2,4.3c2.6-3.1,6.5-4.9,10.2-4.9
				c6.7,0,10.6,3.9,10.6,10.6v22.6c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4v-22c0-3.9-2.4-6.3-6.7-6.3
				c-2.9,0-6.1,1.8-8.1,4.5v23.8c0,0.8-0.8,1.4-2.6,1.4h-0.2c-1.8,0-2.6-0.6-2.6-1.4L909,304.6L909,304.6z" />
          <path class="st1" d="M958.5,294.4c9,0,13.4,5.9,13.4,16.9c0,0.8-1.4,2.6-2.2,2.6h-20.6c0.6,7.1,3.7,10.4,10,10.4
				c5.7,0,8.8-2.6,9.6-2.6c0.8,0,2.2,2.4,2.2,3.3c0,1.6-5.1,4.1-11.6,4.1c-10.8,0-15.9-5.5-15.9-17.1
				C943.2,300.5,948.5,294.4,958.5,294.4z M966,309.2c0-6.7-2.6-10.2-7.7-10.2c-5.7,0-8.6,3.5-9.2,10.2H966z" />
          <path class="st1" d="M981.7,299.5h-3.3c-0.8,0-1.2-0.6-1.2-2v-0.8c0-1.4,0.4-2,1.2-2h3.3l0.8-6.9c0-0.8,0.6-1.4,2-1.4h0.6
				c1.4,0,2,0.6,2,1.4v6.9h5.5c0.8,0,1.2,0.6,1.2,2v0.8c0,1.4-0.4,2-1.2,2h-5.5v20.2c0,3.9,1.6,4.9,3.5,4.9s2.2-0.4,2.9-0.4
				c0.8,0,1.4,2.4,1.4,3.1c0,1.8-3.1,2-4.7,2c-3.3,0-8.4-1.4-8.4-9L981.7,299.5L981.7,299.5z" />
        </g>
      </g>
      <g id="greensock-viewable" clip-path="url(#greensock-mask)">
        <g id="greensock">
          <path class="st3" d="M433.4,119.2c17.1,0,33,6.1,33,10.8c0,2.9-3.7,10-5.9,10c-1.8,0-10.2-7.5-26.9-7.5
			c-30.6,0-40.5,17.7-40.5,47.9c0,26.5,7.9,48.9,38.7,48.9c9,0,17.7-1,22.2-2.2v-34.8h-20.2c-2.4,0-3.5-1.6-3.5-5.1v-2.9
			c0-3.7,1-5.1,3.5-5.1h30.4c3.7,0,5.1,1.6,5.1,5.1V230c0,9.8-18.7,12.4-38.5,12.4c-34.4,0-53.4-19.4-53.4-60.5
			C377.4,138.8,397.3,119.2,433.4,119.2z" />
          <path class="st3" d="M487.2,177.3c0-14.3-2-21-2-21.8c0-3.3,7.1-4.1,9.4-4.1c4.1,0,5.1,6.9,6.1,11.4c5.9-8.4,12.8-13,20-13
			c6.7,0,10,2.9,10,6.7c0,3.3-1.4,9.4-3.5,9.4c-2.2,0-3.7-1.8-9.6-1.8c-9,0-15.9,10.6-15.9,10.6V238c0,2.4-2,3.9-6.9,3.9h-0.6
			c-4.9,0-6.9-1.4-6.9-3.9L487.2,177.3L487.2,177.3z" />
          <path class="st3" d="M577.8,149.8c23.6,0,35.6,15.7,35.6,45c0,2-3.7,7.1-5.7,7.1h-54.6c1.4,19.1,9.6,27.9,26.7,27.9
			c15.1,0,23.4-7.3,25.3-7.3c2.4,0,6.1,6.7,6.1,8.6c0,4.1-13.6,11-31.2,11c-28.7,0-42.4-14.7-42.4-45.6
			C537.5,166.1,551.3,149.8,577.8,149.8z M598,189.7c0-18.1-6.9-27.3-20.8-27.3c-15.1,0-23,9.2-24.2,27.3H598z" />
          <path class="st3" d="M667.4,149.8c23.6,0,35.6,15.7,35.6,45c0,2-3.7,7.1-5.7,7.1h-54.6c1.4,19.1,9.6,27.9,26.7,27.9
			c15.1,0,23.4-7.3,25.3-7.3c2.4,0,6.1,6.7,6.1,8.6c0,4.1-13.6,11-31.2,11c-28.7,0-42.4-14.7-42.4-45.6
			C627.3,166.1,641,149.8,667.4,149.8z M687.8,189.7c0-18.1-6.9-27.3-20.8-27.3c-15.1,0-23,9.2-24.2,27.3H687.8z" />
          <path class="st3" d="M718.8,177.3c0-14.3-2-21-2-21.8c0-3.3,7.1-4.1,9.4-4.1c4.1,0,5.1,6.9,6.1,11.4c7.3-8.1,17.3-13,26.9-13
			c17.7,0,28.1,10.6,28.1,27.9v59.9c0,2.4-2,3.9-6.9,3.9h-0.6c-4.9,0-6.9-1.4-6.9-3.9v-58.7c0-10.6-6.3-16.7-17.7-16.7
			c-7.7,0-16.1,4.7-21.8,12v63.3c0,2.4-2,3.9-6.9,3.9h-0.6c-4.9,0-6.9-1.4-6.9-3.9L718.8,177.3L718.8,177.3z" />
          <path class="st4" d="M818.2,212.1c3.1,0,11.6,7.9,25.5,7.9c7.3,0,16.3-2.2,16.3-12.6c0-20.4-49.9-12.4-49.9-53.2
			c0-25.5,20.8-35.4,40.9-35.4c18.3,0,31.2,6.3,31.2,12c0,4.7-5.3,15.1-9.6,15.1c-2.2,0-7.5-4.3-19.1-4.3
			c-13.4,0-16.1,6.3-16.1,10.2c0,19.8,49.9,11.8,49.9,52.3c0,28.7-20.2,38.3-39.1,38.3c-26.3,0-40.5-9.4-40.5-15.3
			C807.6,222.1,814.5,212.1,818.2,212.1z" />
          <path class="st4" d="M939.4,149.6c27.5,0,41.8,16.5,41.8,46.4c0,30.1-14.3,46.6-41.8,46.6s-42-16.5-42-46.6
			C897.4,165.8,911.9,149.6,939.4,149.6z M955.2,196c0-17.3-4.9-26.3-15.9-26.3s-16.1,9-16.1,26.3s5.1,26.5,16.1,26.5
			S955.2,213.3,955.2,196z" />
          <path class="st4" d="M1036.7,149.6c12.2,0,28.7,4.1,28.7,12c0,3.3-6.3,13.2-9.2,13.2c-0.6,0-1.6-0.6-3.1-1.2
			c-3.1-1.6-7.7-3.9-15.1-3.9c-13.9,0-19.6,8.6-19.6,26.3s5.3,26.5,18.5,26.5c8.1,0,13.6-2.4,16.9-4.1c1.4-0.6,2.4-1,3.1-1
			c3.9,0,9,9.8,9,13c0,9.8-24.6,12-30.1,12c-29.5,0-43.6-15.1-43.6-46C992.3,165.8,1005.8,149.6,1036.7,149.6z" />
          <path class="st4" d="M1078.5,116.6c0-3.7,3.1-5.5,10.4-5.5h4.9c7.3,0,10.4,1.8,10.4,5.5V185l0.6,0.2l21-31.4
			c2-2.9,5.5-3.3,10.6-3.3h6.3c6.5,0,9.8,1,9.8,2.6c0,0.8-0.6,2-1.6,3.5l-24,34.2l28.1,44.6c0.8,1.6,1.4,2.6,1.4,3.7
			c0,1.6-3.1,2.6-9.8,2.6h-7.3c-5.1,0-8.8-0.6-10.4-3.3l-24-39.7l-0.6,0.2v37.3c0,3.7-3.1,5.5-10.4,5.5h-4.9
			c-7.3,0-10.4-1.8-10.4-5.5L1078.5,116.6L1078.5,116.6z" />
        </g>
      </g>
      <g id="hero">
        <path d="M58.4,194.6C48,199.5,20.5,221.5,15.2,228c-5.5,6.5-7.1-3.7-1.4-20.6c4.5-13.6,15.9-32.2,35-48.1
			c11.2-9.2,35.8-22.4,50.9-30.1c3.1-1.6,42.6-18.3,77.8-26.7c3.1-0.8-3.7,5.1-4.7,8.4c-5.3,15.5-111,81.9-111,81.9L58.4,194.6z" />
        <path d="M207.3,381.3c1.8,11,0.2,11.8-11.2,13.2c-11.4,1.4-19.8-2.9-22.8-5.7c-3.1-2.9-3.7-9.2-0.6-14.9c1.8-3.7,3.7-4.9,4.7-9.4
			c1-4.3,1.8-5.3,2.6-6.9c0.8-1.4,1-2.9,1.2-12.8c0.2-10,0-28.7,1-36.7c1-8.1,36.3,3.7,36.3,3.7s-8.4,20.8-10.6,25.9
			c-2.2,5.1-2,14.9-2,16.9s-0.8,6.1-1.4,6.3c-0.6,0.2,2,5.5,0.8,8.6C204.4,372.4,207.1,379.7,207.3,381.3z" />
        <path d="M220.7,69.9c-1.2-7.7,0-23,1.6-25.5c5.1-6.9,32-7.7,37.7,0.4c2.4,3.7,2.2,12.2,1.8,17.7c-0.4,5.5-1.8,17.3-2,21.2
			c-0.2,2.9-29.7,7.3-36.3-0.4C221.8,81.3,220.7,69.9,220.7,69.9z" />
        <path d="M280.6,361.6c12.4,9,22,10.6,28.3,13.9c6.3,3.3,4.7,9.6-5.9,11.4c-8.6,1.6-22-1.6-31-1.6s-28.9,1-34.2-2.6
			c-6.1-4.3-3.5-12.2-3.5-12.2c1.6-4.5,5.7-14.5,4.5-22.6s-2.9-12.6-5.9-20.2c-3.1-7.5-5.3-26.1-2.4-27.1s2,0,5.7,0.8
			c3.7,0.8,7.7,2,15.7,2c7.9,0,16.7-1.2,19.8-1.8c3.1-0.6,5.5-1.2,4.5,5.1c-1,6.3-4.1,18.1-4.3,27.3c-0.2,9.2-0.2,19.8,0.4,21.6
			C272.9,357.3,277.4,359.4,280.6,361.6z" />
        <g>
          <g>
            <path class="st4" d="M237,90.3c-22.4,19.4-65.8,24.6-130.2,49.5c-16.5,6.3-60.5,25.3-71.1,45c35.6-20.6,48.9,7.7,51.7,36.9
					c2.6,27.3,16.3,41.6,51.3,40.7c36.1-0.8,47.1,20.2,57,44.8c19.4-94.3,50.3-112.6,70.3-128.7C308.5,144.1,256.4,83.4,237,90.3z" />
            <path class="st4" d="M237,90.3c-53.8,18.7-106.9,23.4-169.5,61.9c-14.9,9.2-46.2,29.9-52.3,69.7c22.8-25.3,75.6-57,140.1-77.2
					c32.6-10.2,56.4-16.9,85.3-28.1C238.7,103.5,238.7,98.4,237,90.3z" />
          </g>
          <path d="M305.7,201.9c0,0-3.9,13.2-11.6,17.5c0,0-5.7,2-17.1-4.3c-3.3-1.8-5.7-8.1-5.5-10.2c0.2-4.9,3.3-7.1,3.3-7.1
				s3.3-5.5,7.1-5.3c3.9,0.2,10.4,0.8,12.4-1C296.1,189.5,306.1,195.2,305.7,201.9z" />
          <path d="M222.6,73.8c0,0-0.8,10.4-2.2,16.9c-0.2,1.2-6.3,1.8-10.8,3.7c8.6,24.4,60.1,24.2,66.8,12.2c-3.3-2.2-9.8-5.7-12.8-6.9
				c-3.1-1.2-2.9-1-3.1-6.7c-0.2-5.7-0.6-16.3-1-19.1C259,70.9,227.5,70.9,222.6,73.8z" />
          <path class="st5" d="M224.6,73.8c0,0,0,5.9-0.6,11.6c-0.2,2.6-0.4,4.3-0.8,6.3c-0.2,1.2,6.9,6.1,9,16.9
				c9.8,21.8,32.4,11,41.8,0.6c-3.3-2.2-8.6-5.3-14.7-7.7c-3.1-1.2-1.6-3.9-1.8-9.6c-0.2-5.7-1-14.1-1.4-17.1
				C255.6,71.7,229.5,70.9,224.6,73.8z" />
          <path d="M222.6,73.8c0,0-0.2,3.7-0.8,7.9c2.6,2.6,6.1,6.3,8.8,8.6c1.8,1.6,6.3,1.4,10.4,1.4c3.7,0,6.9,0.4,8.4-0.4
				c3.3-1.6,7.9-5.7,10.6-8.8c-0.2-3.7-0.4-7.1-0.6-8.8C259,70.9,227.5,70.9,222.6,73.8z" />
          <path d="M241.1,89.3c-2.4,0-5.3-0.2-7.5-0.6c-1-0.2-2-0.8-2.9-1.2c-1.4-1-2.9-2.2-4.5-3.5c-3.3-2.4-3.5-3.9-3.5-4.5
				c1.4-12.8-0.4-23.6-0.4-23.6s-1.4-5.5,6.3-6.9s12.4-1.6,12.4-1.6s4.9,0,12.4,1.6c7.7,1.4,6.3,6.9,6.3,6.9s-1.8,10.8-0.4,23.6
				c0,0.6-0.2,2-3.5,4.5c-2.9,2-5.1,4.3-7.3,4.7C246.4,89.1,243.6,89.3,241.1,89.3z" />
          <path d="M241.1,42c-13.4,0-16.1,3.7-20,7.7c-0.8,1-0.2,7.1,1.2,20.2h1.8c0,0-1.2-3.7-1-7.9s1-4.1,0.4-5.1
				c-0.8-1.2-2.4-3.3,1.2-5.3c3.7-2,9.4,1.6,16.3,1.8c6.9-0.2,12.8-3.9,16.5-1.8c3.7,2,2,4.1,1.2,5.3c-0.8,1.2,0.2,0.8,0.4,5.1
				c0.2,4.3-1,7.9-1,7.9h1.8c1.2-13,2-18.7,1.4-19.8C258,45.7,254.6,42.2,241.1,42z" />
          <path d="M305.7,202.5c0,0-3.9,12.4-11.4,16.7c-1.6-0.8-1.4-2-2.9-3.9c-0.4-0.6-1.8-1-2.4-1.6c-0.6-0.6-0.4-1.6-1.4-2.4
				c-0.8-0.8-1.4-0.2-2.2-0.8c-0.8-0.8-1-1.8-1.6-2.4c-0.4-0.4-2-0.6-2.4-1c-1-1-10-2.9-9.6-4.9c0.8-3.1,2.4-5.3,2.4-5.3
				s3.9-5.7,7.7-5.5c3.9,0.2,7.5,1,9.6-0.8C293.7,188.5,306.3,196,305.7,202.5z" />
          <path d="M279.2,112.5c0,0,12.8-3.1,21.6,5.3c8.8,8.6,8.1,19.1,5.5,25.7c2.2,2.6,6.3,10,3.3,18.7c13.4,11.4,7.5,28.9-4.5,40.5
				c0,0-2.9-10.6-14.3-11.2c0.4-4.1-10.6-7.3-5.5-17.9c-7.7-1.8-7.5-7.1-8.8-13.6C275.5,153.4,279.2,112.5,279.2,112.5z" />
          <path class="st5" d="M274.5,118.2c0,0,14.9-7.5,23.6,1c8.8,8.6,6.3,17.9,3.7,24.4c2.2,2.6,7.5,10.2,4.3,19.1
				c-0.6,2-5.1,2-8.4,7.3c8.1-4.7,13.2-3.5,15.1,2.4c2.9,9.2-3.5,20.2-9,26.3c0-0.2-0.2-0.4-0.2-0.6c-0.8,3.1-1.8,9-7.9,15.5
				c-3.1,3.3-5.5,2.9-9,2c-4.1-1-5.5-2.9-11.2-5.9c-3.3-1.8-1.4-4.1-1.4-5.9c0-0.4,0.4-1,1-1.8c0.4-1,1.6-2.6,3.5-4.5
				c0,0,2.6-3.7,6.5-3.5c3.9,0.2,7.9-0.6,9-1.6l0,0c0-7.1-8.1-7.3-5.3-19.6c0.2-0.6,1.2-1.6,4.5-2c-4.9-1-7.1-1.2-10.6-4.5
				c-2.4-2.2-4.3-5.1-4.9-8.8C276.6,151.4,274.5,118.2,274.5,118.2z" />
          <path d="M231.5,105.4c-1.2-1.6-7.5-9.8-19.6-13c-3.5-1-5.7,1.8-9.2,3.9c-1-0.6-5.5-2.6-7.9-1.2s-4.1,2.9-6.5,3.9
				c-1.2-0.6-4.5-0.6-7.1,0.4c-2.6,0.8-6.7,2.6-10.6,7.9c-2.4,8.8,43.2,2.2,43.2,2.2L231.5,105.4z" />
          <path class="st4" d="M231.9,105.4c-6.5-2.2-5.5-9.8-20-11c-2.9-0.2-4.7,2-6.7,3.5c1,1,2,2.6,2.6,4.3c-1.8-2-5.1-4.7-8.4-5.3
				c-3.1-0.6-5.1,1.6-8.4,3.3c0.6,0.6,1.2,1.6,2,2.9c-2.9-1.8-4.9-2.4-8.8-1c-2.6,0.8-7.7,3.1-11.6,8.6c-2.4,8.8,41.1-1,41.1-1
				L231.9,105.4z" />
          <path d="M270.2,108.6c0,0,0-2.2-0.2-4.3c0-0.4-1.6-1.4-1.6-1.8l-0.4-0.4c0,0,3.3-1.8,5.7-0.8c2.6,0.8,4.1,4.3,4.1,4.3
				c4.7-1.6,5.1,0.2,7.3,2.6c4.9-1,5.5,0.8,8.6,5.3c0,0-3.7-0.6-10.8,0.6C275.9,115.1,270.2,108.4,270.2,108.6z" />
          <path class="st4" d="M269.4,107.6c0,0,1.2-1,0.8-1.2c2.2-1.2,5.3-2.6,6.7,1.2c4.7-1.6,5.3,0.6,7.5,3.1c5.7-2.6,6.1,0.6,6.5,2
				c-1.8,0-4.5,0.2-8.1,0.6C275.9,114.3,269.2,107.4,269.4,107.6z" />
          <path d="M200.2,102.5c0,0,11.6,4.1,21.4,3.5c9.8-0.8,26.5-1.6,35.4,3.7c0,0,9.2-3.3,17.7-1c8.6,2.2,24.2,16.9,19.6,32.4
				c-0.4,1-3.1,2.6-6.1,3.7c0,0,1.6,6.9-1.2,12.6c-2.9,5.5-9.2,16.1-9.4,30.8l0,0c-0.2,2.4-0.6,7.5-1,10
				c-15.9-0.6-40.3-6.5-64.4-6.1c0.2-2.6,0.4-4.3,0.6-6.9h0.6c-1.2-6.7-1.6-10.2-2.9-15.3c-7.7-4.9-15.9-10.6-22.8-21.4
				C181,137.5,200.2,102.5,200.2,102.5z" />
          <path d="M278.8,212.5c0,0,12.6,45.2-2.2,64.2c0,0,2.2,8.8-2.9,18.1c-0.8,4.1-1.8,7.7-2.4,11.8c-2.6,16.9-7.1,24-8.4,51.1
				l-12.2-0.2c0,0-1.4-19.6-5.7-29.9c-2.4-5.9-12-13.9-11.6-21.8c0.4-6.1,1.6-11.2,12-19.4c0.8-11.8-11-23-9.2-67L278.8,212.5z" />
          <path class="st5" d="M275.1,210.7c3.3,20.8,10.8,51.5-2.9,66.6c0.6,2.9,1,6.9,0.2,11.6c-0.4,2.4-1.2,5.1-2.2,7.9
				c-2,4.9-2.9,12-3.5,16.3c-2.6,16.9-2.6,17.7-3.9,44.8l-12.2-0.2c0,0-1.4-19.6-5.7-29.9c-2.4-5.9-7.5-11-7.9-18.9
				c-0.4-6.1,3.9-18.3,14.1-17.9c-0.6-24.6-12-19.8-15.1-71.1L275.1,210.7z" />
          <path class="st5" d="M200.2,102.5c0,0,4.5,1.4,9.4,1.8c4.9,0.4,10.2,0,14.9-0.2c9.8-0.8,23.6-1.8,32.8,3.5c0,0,5.1-1.6,10.6-1.2
				c2.4,0.2,4.9,2.2,7.7,3.1c9,2.2,17.5,17.1,13.6,30.6c-0.4,1-3.3,0-6.5,1c0.6,2.9,1,9.4-2.2,16.3c-3.5,6.9-7.9,15.9-7.1,33
				c-21.4-1-31-2.4-52.1-3.5c-1.8-7.5-3.1-15.1-3.3-18.9c2.9-1.4,4.5-2.6,6.7-5.1c-6.1,1-8.6,0.6-12.2-1.4
				c-3.7-2-10.2-8.6-13.4-12.8c-0.4-0.4-2.6,6.3-7.7,6.5c-1.8-2.6,5.9-10.2,4.5-13C190.6,131.6,200.2,102.5,200.2,102.5z" />
          <path d="M276.8,193.8c0,0,0.4,7.3,0.4,9.2c0,2,1.6,8.1,1.8,11c-2.2,3.9-12,12.6-29.7,15.9c-17.5,3.7-40.7-23.8-40.7-23.8
				c0.6-2.6,2.6-10.4,4.1-14.5c0.2-0.4,0.6-1.4,0.6-1.8C215,187,276.8,193.8,276.8,193.8z" />
          <path class="st5" d="M272.3,194.4c0,5.1,0.8,8.8,1.4,12c1,5.9,2.6,9.8,2.6,13.6c0,11.8-15.5,9.8-28.5,10.2
				c-17.5,3.7-32.4-23.8-32.4-23.8c1.2-4.7,2-10,3.9-14.5l0,0c0.2-2.4,0.6-5.5,0.8-6.9c24.9,0,42.4,1.4,52.6,2.4
				C273.1,189.7,272.7,193.5,272.3,194.4L272.3,194.4z" />
          <path d="M252.7,220.6c0,0-10.8-24-43.2-16.9c-7.7,21.8-18.1,46.8-11.4,73.9c-6.7,9.2-14.5,14.3-14.5,31.2
				c0,16.9,0.8,19.8,0.8,19.8l23.8,1.2c0,0,7.7-10,10.8-20.8c0.8-3.1,1.6-8.6,1-14.9c0.8-1.2,4.3-4.1,4.7-9.6c0,0,11.6-6.1,18.3-21
				C249.5,250.2,247.8,238.6,252.7,220.6z" />
          <path class="st5" d="M252.7,220.6c-0.6-2.2-8.8-24.2-38.9-17.7c-17.7,47.3-11.2,66.8-8.6,75.4c-12,15.3-17.5,18.5-15.1,49.5h15.9
				c7.3-11.6,9-15.9,9.4-31.2c0-0.6-2.2,1.2-3.9,3.3c1.2-6.3,4.7-7.5,7.3-11.4c1.2-1.6,2.2-4.1,2.2-7.3c14.3-9.6,19.6-21.6,22.6-34
				C246.2,238.6,249.1,224.5,252.7,220.6z" />
          <path d="M202.4,187.8c0,0,5.5,0.2,10.4,1.8c4.7,1.6,4.7,2.6,6.5,4.7s6.3,5.1,5.5,8.1c-0.4,1.6-1.4,2-2.9,3.5
				c-0.6,0.6-5.1,5.5-6.1,6.1c-0.6,0.4-1.4,1-2,1.4c-0.6,0.4-2.4,1.6-3.1,2c-2,1-3.5,1.6-5.7,1.4c0,0-5.1-0.2-8.4-3.7
				c0,0-0.4-1.6,0.4-2.4c0,0-4.3-3.7-5.5-6.1c-1.2-2.4-1.2-5.9-0.4-7.7C191.6,195.2,199.6,190.1,202.4,187.8z" />
          <path d="M207.5,386l-0.6,5.1c0,0-1.8,2.2-15.5,2c-13.9-0.2-17.5-4.5-18.7-6.7l-0.8-5.3c0,0,2.6-3.9,3.3-3.9
				c4.5,0.4,19.8,6.5,30.4,8.1C206.5,385.4,206.7,385.8,207.5,386z" />
          <path d="M237,375.6c0,2.2-0.2,2.2-0.2,4.5c2.4,1.8,8.6,2.9,20.2,2.6c16.9-0.4,32.6,5.1,51.7,1.8l0.2-3.7l-1.8-0.2l-67.8-5.5
				L237,375.6z" />
          <path d="M251.9,382.8c1.6,0,3.3,0,5.1,0c11-0.4,21.4,2,32.6,2.6c5.9-0.2,13.2-1.6,12.6-5.9l-57.8-4.9
				C240.9,378.5,243.6,381.8,251.9,382.8z" />
          <path d="M185.5,297c1.8,1.2,14.3,8.6,34.4,7.5c-0.4,3.9-0.2,11.4-9.2,24.6c-4.5,6.5-8.4,17.9-9.2,32.4c0.2,3.3,2,6.1-0.4,10.4
				c0.8,2.6,4.1,7.9,5.7,11.2c1.6,3.3,2.4,6.9-8.4,7.1c-11,0.2-28.7-1-26.3-9.6c1.2-4.5,4.7-9.2,5.1-11c0.4-1.8,0.4-7.3,3.9-11
				c3.1-10.2,2-20,1.4-29.1C181.6,320,181.4,304.8,185.5,297z" />
          <path d="M204.4,131c14.5-19.4,2.2-34.8-21-30.1c-9.4,1.8-18.7,8.4-19.4,20.2c-3.1,0.4-10,0.8-13.4,13.4
				c-2.6,9.8-4.1,11.6-8.8,16.5c-3.1,3.5,0.2,10.6,2.4,15.7c7.5,17.5,30.8,19.1,46.4,32.4c5.3-1.4,10.8-7.3,12.4-11.2
				c-13.2-15.7-10.4-21.8-15.7-29.9C193.2,155.9,206.3,147.9,204.4,131z" />
          <path class="st5" d="M201.6,129.8c0.8-1.2,2.2-3.9,2.9-4.9c0.2-0.2,2.4,3.7,2.6,3.5c5.5-9,6.9-22,0.6-23.2
				c-1.4-0.2-4.1-0.8-6.3-1.6c-4.1-1.4-7.7-1.4-14.3-0.2c-9,1.6-17.9,8.1-17.9,17.5c0,0.6,6.3,2.4,8.1,10c-3.1-4.3-8.4-9-14.7-4.9
				c-6.7,4.3-3.3,14.1-12.2,24.2c-3.1,3.5-2.6,7.5,0.6,15.7c5.3,12.8,30.4,19.8,44,32c3.3-1.4,5.5-4.7,7.1-7.1
				c-9.2-9.6-12.8-18.5-15.5-25.1c-3.3-7.5-6.9-11.8-14.1-17.5c3.7,1.4,6.5,2.9,8.1,4.1c1.8,1.2,4.5,1.4,6.9,0.6
				C196.5,149.8,201.2,137.5,201.6,129.8z" />
          <path d="M290.2,133.1c-0.6,7.7-6.3,3.9-9.4,2.4c-6.1-2.6-12.2-4.5-19.4-4.5c-7.1,0-16.3,0.6-24.2,2.6c-11,3.1-14.3,2.9-19.1,0.4
				c-4.9-2.6-13.4-9.2-13.4-9.2s-0.2,2,1.8,4.7c2.6,3.3,8.6,7.3,16.5,10c3.9,1.2,6.9,0.4,10.4-0.4c18.1-4.5,37.3-5.3,53.4,4.5
				c0.8,0.4,3.7-0.8,4.9-2.6C293.3,138.4,290.2,133.1,290.2,133.1z" />
          <path class="st6" d="M197.5,210.7c1.6,1,3.7,1.6,5.9,3.5c0,0-1.8,0-2.6-0.8C199.8,212.7,197.7,210.9,197.5,210.7L197.5,210.7z" />
          <path class="st5" d="M256.4,49.1c-0.6-1.8-5.1-5.1-15.5-5.1c-11.2,0-14.5,3.5-14.7,5.3c0,0.6-0.8,7.1-1,9.8c0,0,0,3.3,0.2,8.1
				c0.2,3.3,1,5.1,1.4,9.4c0.4,4.5,1.6,7.3,3.9,11c1,0.6,1.8,1.2,2.9,1.4c4.1,0.8,11.2,1,15.1,0c2.2-0.6,5.1-4.5,5.7-7.9
				c0.8-4.3,1.6-7.3,1.8-10c0.4-2.6,0.6-8.6,0.8-10.2C257.6,56.5,256.6,49.5,256.4,49.1z" />
          <path d="M235,300.9c0,0,10.8,4.7,37.5,0.6c0,0-7.5,37.9-4.1,56.8c0,0,3.5,4.9,29.1,14.3c0,0,11.4,2.9,11,8.6
				c0,0,0.4,1.2-13.4,0.8s-26.9-2.9-36.1-2.9c-9.2,0-18.9,0.4-20.6-2.2c-1.8-2.4,0.4-8.8,3.1-12.4c2.9-3.9,2-6.7,1.8-13.6
				C242.7,332.7,228.9,313.9,235,300.9z" />
          <path class="st4" d="M232.8,304.4c-1.4,2,0.2,9.8,2.2,17.3c2,7.5,6.5,12,7.5,24.4c1,12.2,1.2,13.9-2.2,21s-4.5,13.6,7.5,13.9
				c12,0.2,18.5-0.2,30.8,1.6c12.2,1.8,16.5,2.4,23.2,1.4s8.1-3.3,5.3-5.3c-2.9-2-14.7-4.3-19.8-8.4c-4.9-3.7-18.7-9.8-18.9-11.4
				c-0.6-5.5-0.8-25.5,0.2-32c1-6.5,2.4-15.9,2.9-18.3s2.4-4.9-1-4.1c-3.5,0.8-16.5,2.6-26.3,2C234.4,306,233.4,303.7,232.8,304.4z" />
          <path class="st7" d="M239.7,367.3c3.5,1.6,8.6,2.9,12.4,2.9c0,0-1.4,6.7,0.8,10.8c2.2,4.1-16.3,1.6-16.3,1.6l-0.8-14.5
				L239.7,367.3z" />
          <path class="st7" d="M293.7,384.8c3.3-1,5.5-4.7,2.9-8.1c-2.9-3.5-5.3-4.1-1.6-4.3c3.7-0.2,17.1,7.9,17.1,7.9l-6.9,6.3
				L293.7,384.8z" />
          <path class="st7" d="M232.2,312.3c4.7,1.6,11.8,2,17.9,1.8c6.1-0.2,15.3-1,21.2-3.1c5.9-2,3.5,2.2,3.5,2.2l-3.3,3.1
				c0,0-7.7,3.1-20.4,2.9c-14.9-0.2-19.4-1.8-19.4-1.8L232.2,312.3z" />
          <path class="st7" d="M232.6,322.5c4.7,1.6,11.8,2,17.9,1.8c6.1-0.2,14.3-0.2,20.2-2.4c2.4-0.8,1,2.6,1,2.6l-1,1.8
				c0,0-7.9,2.9-20.4,2.6c-14.9-0.2-17.5-1.4-17.5-1.4L232.6,322.5z" />
          <path class="st8" d="M235,300.9c0,0,17.7,6.3,37.7,2c0,0-7.7,36.5-4.3,55.2c0,0,3.5,4.9,29.1,14.3c0,0,11.4,2.9,11,8.6
				c0,0,0.4,1.2-13.4,0.8c-13.9-0.4-26.9-2.9-36.1-2.9c-9.2,0-18.9,0.4-20.6-2.2c-1.8-2.4,0.4-8.8,3.1-12.4c2.9-3.9,2-6.7,1.8-13.6
				C242.7,332.7,228.9,313.9,235,300.9z" />
          <path class="st8" d="M235,300.9c0,0,17.7,6.1,37.7,1.8c0,0-7.7,36.7-4.3,55.4c0,0,3.5,4.9,29.1,14.3c0,0,11.4,2.9,11,8.6
				c0,0,0.4,1.2-13.4,0.8c-13.9-0.4-27.1-4.3-36.1-2.9c-9.6,1.6-18.9,1-20.6-2.2c-1.4-2.6,0.4-8.8,3.1-12.4c2.9-3.9,2-6.7,1.8-13.6
				C242.7,332.7,228.9,313.9,235,300.9z" />
          <path d="M219.1,179.7c0,1.4,15.9,9.4,24.6,11c8.8,1.6,27.1,0,29.9-0.6l-0.4,2.9c0,0-21.8,3.3-38.5-1.2
				c-16.7-4.5-14.9-5.5-14.9-5.5L219.1,179.7z" />
          <g>
            <path class="st5" d="M185.1,353.4c2.4,1.2,11.2,3.5,16.9,2.2c0.8-0.2,0-14.1,2.2-20.4c3.3-8.8,8.6-15.9,11-31.4
					c-8.6-0.8-18.3-3.1-23.4-4.7C185.3,319.2,187.5,336.3,185.1,353.4z" />
            <path class="st5" d="M198.7,366.3c1.4,0.4,2.4,2,2.9,1c0.8-1.8-1.4-5.3-1.6-7.7c0-0.2,0,0,0-0.2c-1.8-1.6-14.3-1.8-13.4-1
					c-1.4,2.6-3.7,2.2-4.5,7.5c-0.4,2.6,2.9,0.4,5.9,0.2c-5.5,3.7-11.8,8.4-12.8,12.4c-1.2,5.7,0.8,7.3,6.9,10.4
					c5.3,1.2,11.6,1.4,16.5,1.2c5.5-1,6.5-3.7,4.9-7.3C201,377.3,199.4,370.1,198.7,366.3z" />
          </g>
          <path d="M201,101.7c6.7,3.9,16.1,2.9,19.6,2.6c0.8,0,9-1.4,9.4-1.2c0.8,0.2,0.8,0.8,0.8,0.8s-3.1,1.6-10,2
				c-6.5,0.4-14.3,0-18.5-2C197.1,101.7,201,101.7,201,101.7z" />
          <path d="M270.2,105.6c1.2,0.8,9.2,3.9,12.6,7.5c3.1,3.3,1.4,3.1,0.8,2.2c-0.8-1-7.1-5.3-9.6-6.3s-5.5-2.9-5.5-3.3
				S270.2,105.6,270.2,105.6z" />
          <path class="st5" d="M200,190.1c5.9-0.4,12,1,15.9,5.1c2,2,5.3,4.3,4.9,6.3c0,0.6-1.2,2.2-2.2,3.5c-0.6,0.8-2.4,2.6-3.1,3.3
				c-0.8,0.6-3.7,2.9-4.3,3.3c-0.6,0.4-1.4,1.4-2,1.6c-2,1-4.3,0.2-6.3-0.8c-2-1,0.4-1.2-1.8-2.9c-5.5-3.9-8.6-6.5-6.3-14.1
				C194.9,194,197.1,192.3,200,190.1z" />
        </g>
        <path class="st9" d="M148,143.4c-18.3,7.3-65,30.6-78.2,37.7l0,0c11,6.9,16.1,23.6,17.7,40.5c0.2,1.6,0.4,3.1,0.6,4.7
			c0.2,1.4,0.4,2.4,0.6,3.1c0,0.2,0,0.6,0.2,0.8c12-32.8,55-67.4,56.6-70.1c0.8-1.2-1-6.5,1.8-11.6C151.1,142,158.2,139.2,148,143.4
			z" />
        <path class="st9" d="M191.6,297.2c9.4-18.7,9.6-36.7,9.4-57.6c0-8.8,6.3-21.2,3.1-17.7c-12.2,13.6-43,39.3-65.2,40.7
			C170,261.6,182.2,277.3,191.6,297.2z" />
        <path d="M51.9,198.4c11.6-8.4,71.7-40.3,86.2-44.8c14.5-4.7,10-10.2,10-10.2s-58.7,25.3-93.7,47.1" />
        <path class="st9" d="M223,139.6c-4.7-1.8-8.4,3.7-7.1,9c1.2,5.3,12.2,11.2,11.6,30.6c-0.4,15.9-3.9,22.4-3.9,22.4l-7.7-9.8
			c0,0-1.2-22-3.9-25.3c-2.6-3.3-11-9.2-14.3-12.2c-3.3-3.1,3.7-7.1,3.3-12.8c-0.4-5.5,3.5-16.5,3.5-16.5L223,139.6z" />
        <path class="st9" d="M251.3,226.3c-0.4,15.3,3.1,37.9,4.5,48.7c1.4,10.8,3.3,11.6,0,16.5c-3.3,4.7-7.5,12.4-7.5,12.4l-14.1-1.2
			c0,0,11.2-14.3,11.8-16.9c0.6-2.6-5.7-22.8-5.7-22.8L251.3,226.3z" />
        <path class="st9" d="M224.2,83.8c2.9,6.3,6.3,9.2,11.8,11c3.3,1.2,16.1,2.9,21.2-2.9c2.2-2.6,0.8-9.8,0.8-9.8l-11.6,9.4l-15.7-2.9
			l-1.8-4.7L224.2,83.8z" />
        <path class="st10" d="M225.4,97.8c5.3,3.5,18.5,6.7,22.2,7.3c3.7,0.8,9.6-3.9,12.4-5.1c3.1-1.4,8.4-2.2,14.5,3.3
			c0.6,0.6-1.4,3.3-1.4,3.3c-0.2-0.2-1.4-0.2-3.1-1c-1.6-0.8-3.1-1.4-5.5-1.2c-10.2,1.2-11.8,4.7-20.8,2.6s-11.2-3.7-20-3.3" />
        <path class="st4" d="M223.6,98.4c6.7,2.9,19.8,5.9,23.4,6.7s9.6-2.9,12.4-4.7c5.1-3.3,11.6-0.6,14.7,2.9c2,2.2,2.9,3.7,2.9,4.3
			c0,0.8-2.4,0-2.4,0c-1.4-0.6-3.1-0.8-4.3-1.6c-1.6-0.8-3.3-2-5.7-1.8c-10.2,1.2-12.2,4.7-21,2.6s-11-3.9-20.4-3.3" />
        <path d="M192,288.7c-0.4-0.4,0.4-0.8,0-0.8c-2.6,0-6.3-2-8.4-4.9c-8.8-12.6-21.6-21-44.8-20.4c-34.8,0.8-48.7-13.4-51.3-40.7
			c-1.4-14.9-5.5-29.3-13.9-37.5l-4.9,3.1c9.4,8.1,12.4,21.4,14.5,39.5c3.3,27.3,25.3,39.9,50.9,40.3c26.7,0.4,36.3,5.9,46.2,19.4
			c3.3,4.3,6.9,5.7,9.8,6.3L192,288.7z" />
        <path class="st9" d="M286.5,157.7c0.6,3.1,2.2,9,5.5,11.8c1.4,1.4,1.6,1.8,0.4,1.8c-1.2,0-10.2-0.4-10.2-0.4l-2.4-4.3L286.5,157.7
			z" />
      </g>
    </g>
  </svg>
  <p style="margin-top:-3px">The buttons below let you jump to any point in the animation</p>
  <div class="nav" style="margin-top:-3px"">
    <button id="playLabel">tl.play("greensock")</button>
    <button id="playEnd">tl.play(-0.5)</button>
    <button id="reverseFromEnd">tl.reverse(0)</button>
    <button id="restart">tl.restart()</button>

  </div>

</div>
<div class="brandBar">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GreenSock-logo-text-outlines.svg"></div>
            
          
!
            
              /* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

svg {
  width:50%;
}


#progressSlider {
  width:600px;
}

button {
  text-transform:none;
}

h1 {
  font-size:30px;
}

h2 {
  font-size:20px;
}
            
          
!
            
              //From 7 Hidden Gems of GSAP (Net Magazine)
//Read full article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca#.t6xniz19i
var tl = new TimelineLite({ onUpdate:adjustUI}),
    progressSlider = document.getElementById("progressSlider"),
    progressDisplay = document.getElementById("progressDisplay"),
    playLastSecondBtn = document.getElementById("playEnd"),
    playLabelBtn = document.getElementById("playLabel"),
    reverseFromEndBtn = document.getElementById("reverseFromEnd"),
    restartBtn = document.getElementById("restart");
    

tl.from("#hero", 0.5, {scale:0.2, opacity:0, ease:Back.easeOut, transformOrigin:"50% 50%"})
  .from("#greensock", 0.5, {yPercent:115, ease:Back.easeOut}, "greensock")
  .staggerFrom("#tagline g", 0.3, {y:-40, opacity:0}, 0.1, "-=0.2");

function update(){
  tl.progress(progressSlider.value).pause();
  updateProgressDisplay();
}

function adjustUI() {
  progressSlider.value = tl.progress();
  updateProgressDisplay();
}

function updateProgressDisplay() {
  progressDisplay.innerHTML = "tl.progress(" + progressSlider.value + ")";
}

progressSlider.addEventListener("input", update);

//buttons

playLastSecondBtn.onclick = function() {
  tl.play(-0.5);
}

playLabelBtn.onclick = function() {
  tl.play("greensock");
}

restartBtn.onclick = function() {
  tl.restart();
}

reverseFromEndBtn.onclick = function() {
  tl.reverse(0);
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console