cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <div id="container">
<svg class="indicator" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 800 350" enable-background="new 0 0 800 350" xml:space="preserve">
  <circle id="circ-a" opacity="0.4" fill="#A1C3E5" cx="403.4" cy="166.8" r="57.3"/>
  <ellipse id="circ-b" transform="matrix(0.9949 0.1008 -0.1008 0.9949 15.2227 -25.0379)" opacity="0.4" fill="#A1C3E5" cx="255.3" cy="138" rx="195.2" ry="128.9"/>
  <ellipse id="circ-c" transform="matrix(0.9896 -0.1439 0.1439 0.9896 -11.811 87.5875)" opacity="0.4" fill="#A1C3E5" cx="599.7" cy="125.5" rx="196.3" ry="121.5"/>
  <ellipse id="circ-d" transform="matrix(0.9941 0.1083 -0.1083 0.9941 27.733 -58.1516)" opacity="0.4" fill="#A1C3E5" cx="549.1" cy="226.2" rx="214.6" ry="123.3"/>
</svg>

<svg class="movement" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 800 350" enable-background="new 0 0 800 350" xml:space="preserve">
  <g id="Layer_2">
    <g id="scene1">
      <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFB65E" stroke-miterlimit="10" d="M394 165.5c0 0-211-21.5-218 26.5s-100.7 51-81.8-6S69 5 129 61s123.7 75 113.8 21S400-3 357 64 195 227 394 165.5z"/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#A1C3E5" stroke-width="2" stroke-miterlimit="10" points=" 117.5 137.7 100.4 148.3 82.7 138.7 82.1 118.4 99.3 107.8 117 117.5 "/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#7DA1CA" stroke-width="2" stroke-miterlimit="10" points=" 116.3 147 91.7 151.8 75.3 132.8 83.6 109 108.2 104.2 124.5 123.2 "/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#7A616D" stroke-width="2" stroke-miterlimit="10" points=" 107.6 158 78.1 150.2 70.2 120.6 92 98.9 121.5 106.7 129.4 136.3 "/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C67D39" stroke-width="2" stroke-miterlimit="10" points=" 80.1 163 60 128.5 80.1 94 120.2 94 140.2 128.5 120.2 163 "/>
    </g>
    <g id="triangles">
      <path id="drawline" fill="none" stroke="#A1C3E5" stroke-width="2" stroke-miterlimit="10" d="M402.5,163c0,0,135.5-71,143.5-95
		s-62.172-42-11.086-49S669.5-21,638.25,51S532,69.219,538,127.109S817,131,748,77S602-7,603,43s90.621,66.374,72.811,41.187
		S545,111.5,563,185.75s-92.631,70.323-99.312,34.25S412,160.5,402.5,163z"/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#7A616D" points="444.9 138 473 89.4 501 138 "/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#7DA1CA" points="424.9 150 444.3 116.4 463.7 150 "/>
      <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#A1C3E5" points="412.7 158 425.6 135.6 438.6 158 "/>
      <line fill="#3B3454" x1="487.8" y1="77" x2="478" y2="107.8"/>
      <line fill="#3B3454" x1="525" y1="114" x2="538" y2="114"/>
      <line fill="#3B3454" x1="523.8" y1="63" x2="546" y2="89"/>
    </g>
    <g id="scene3">
      <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#7DA1CA" stroke-width="2" stroke-miterlimit="10" d="M408 173.3c0 0-112.2 107.7-39.1 136.7s85.2-79 132.2-56S678 361 666 315s-37.4-160.4 0.8-141.7S614 11 542 158s-63 63-63 43S435.2 143.2 408 173.3z"/>
      <rect x="719.6" y="145.1" transform="matrix(0.7223 -0.6916 0.6916 0.7223 93.2643 552.6075)" fill-rule="evenodd" clip-rule="evenodd" fill="#C67D39" width="30.1" height="30.1"/>
      <rect x="696.6" y="140.2" transform="matrix(0.8771 -0.4804 0.4804 0.8771 13.4545 360.0042)" fill-rule="evenodd" clip-rule="evenodd" fill="#F29E41" width="27" height="27"/>
      <rect x="672.9" y="136.9" transform="matrix(0.9592 -0.2827 0.2827 0.9592 -13.6318 199.3472)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFC164" width="22" height="20"/>
      <rect x="652" y="131" transform="matrix(0.9965 -0.0833 0.0833 0.9965 -9.3077 55.812)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFEDB6" width="25" height="17"/>
      <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#6785BA" stroke-width="2" stroke-miterlimit="10" cx="487.8" cy="242.9" r="18"/>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#A1C3E5" stroke-width="2" stroke-miterlimit="10" d="M408 173.3C408 173.3 306 254 379 284s10-90 73-38 180 124 160 57 54-106 81-64 96 19 62-19 -42-122-126-64 -99 42-100 9.5 -66.6-30.5-70.3 9.5S413.4 199.7 408 173.3z"/>
      <g id="scene3-flare">
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="664.5" y1="100" x2="670.5" y2="107.8"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="697.5" y1="89" x2="697.5" y2="114"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="748" y1="101.5" x2="728.4" y2="128.5"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="728.382" y1="220" x2="720" y2="187.084"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="683.92" y1="196.5" x2="691.73" y2="175"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="637" y1="185.75" x2="657.998" y2="160.18"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="629" y1="156" x2="647.499" y2="151.397"/>
      </g>
    </g>
    <g id="middle-circle">
      <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFC164" cx="402.5" cy="165.5" r="9.5"/>
      <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFB65E" stroke-miterlimit="10" cx="402.5" cy="165.5" r="18.7"/>
      <g id="flare">
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="401.5" y1="136" x2="401.5" y2="99"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="433.7" y1="156" x2="458.7" y2="146.8"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="377" y1="151.8" x2="340" y2="139.5"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="368.9" y1="190" x2="344.1" y2="203"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="401.5" y1="203" x2="401.5" y2="225"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="433.7" y1="184.2" x2="446.2" y2="190"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="434" y1="172.5" x2="446" y2="172.5"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="383.8" y1="130" x2="393" y2="145.7"/>
        <line fill="none" stroke="#FFC164" stroke-miterlimit="10" x1="358.5" y1="172" x2="372" y2="172"/>
      </g>
    </g>
  </g>
</svg>

<svg class="allrule" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 800 350" enable-background="new 0 0 800 350" xml:space="preserve">
  <g id="ruler">
    <circle fill="#FFFFFF" cx="608.5" cy="33.4" r="3.2"/>
    <path fill="#FFFFFF" d="M615.6 33.4c0-3.9-3.2-7.1-7.1-7.1 -3.7 0-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5 -3.7 0-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5s-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5s-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5 -3.7 0-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5 -3.7 0-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5s-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5 -3.7 0-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5s-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5 -3.7 0-6.7 2.8-7.1 6.5h-27.8c-0.3-3.6-3.4-6.5-7.1-6.5 -3.9 0-7.1 3.2-7.1 7.1s3.2 7.1 7.1 7.1c3.7 0 6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5 3.7 0 6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5s6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5 3.7 0 6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5s6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5 3.7 0 6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5 3.7 0 6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5s6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5s6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5 3.7 0 6.7-2.8 7.1-6.5h27.8c0.3 3.6 3.4 6.5 7.1 6.5C612.4 40.4 615.6 37.3 615.6 33.4zM189.6 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C195 36.9 192.6 39.2 189.6 39.2zM231.5 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C236.9 36.9 234.5 39.2 231.5 39.2zM273.4 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C278.8 36.9 276.4 39.2 273.4 39.2zM315.2 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C320.7 36.9 318.2 39.2 315.2 39.2zM357.1 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C362.6 36.9 360.1 39.2 357.1 39.2zM399 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C404.5 36.9 402 39.2 399 39.2zM440.9 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C446.4 36.9 443.9 39.2 440.9 39.2zM482.8 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C488.3 36.9 485.8 39.2 482.8 39.2zM524.7 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C530.2 36.9 527.7 39.2 524.7 39.2zM566.6 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3 0 5.5 2.3 5.8 5.2 -1.3 0-2.6-0.5-3.4-1.5 -0.6-0.6-1.4-1-2.3-1 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c0.9 0 1.8-0.4 2.3-1 0.9-1 2.1-1.5 3.4-1.5C572.1 36.9 569.6 39.2 566.6 39.2zM608.5 39.2c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8c3.2 0 5.8 2.6 5.8 5.8S611.7 39.2 608.5 39.2z"/>
    <rect x="188.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="195.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="202.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="209.9" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="216.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="223.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="230.8" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="195.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="202.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="209.9" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="216.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="223.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="230.8" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="237.8" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="244.8" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="251.8" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="258.8" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="265.7" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="272.7" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="279.7" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="286.7" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="293.7" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="300.7" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="307.6" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="314.6" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="321.6" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="328.6" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="335.6" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="342.5" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="349.5" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="356.5" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="363.5" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="370.5" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="377.4" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="384.4" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="391.4" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="398.4" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="405.4" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="412.4" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="419.3" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="426.3" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="433.3" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="440.3" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="447.3" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="454.2" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="461.2" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="468.2" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="475.2" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="482.2" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="489.2" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="496.1" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="503.1" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="510.1" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="517.1" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="524.1" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="531" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="538" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="545" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="552" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="559" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="566" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="572.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="579.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="586.9" y="67" fill="#E2E4E8" width="1.3" height="20.9"/>
    <rect x="593.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="600.9" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
    <rect x="607.8" y="67" fill="#E2E4E8" width="1.3" height="11.4"/>
  </g>
  <g id="a">
    <circle fill="#F29E41" cx="237.8" cy="180.6" r="1.9"/>
    <rect x="237.2" y="122.5" fill="#F29E41" width="1.3" height="58.1"/>
    <path fill="#F29E41" d="M245.7 107.2l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1 5.6 0 10.1-4.5 10.1-10.1C247.9 111.2 247.1 109 245.7 107.2zM237.8 119.6c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S238.9 119.6 237.8 119.6z"/>
    <path fill="#FFFFFF" d="M239.4 110.1h-2.8l-0.6 2.2h-1.5l2.7-8.3h1.7l2.7 8.3h-1.6L239.4 110.1zM239 108.9l-0.3-1c-0.3-0.9-0.5-1.8-0.7-2.7h-0.1c-0.2 0.9-0.5 1.9-0.7 2.7l-0.3 1H239z"/>
  </g>
  <g id="b_2_">
    <circle fill="#7A616D" cx="285.7" cy="152.8" r="1.9"/>
    <rect x="285" y="123.3" fill="#7A616D" width="1.3" height="29.5"/>
    <path fill="#7A616D" d="M293.5 108l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1 5.6 0 10.1-4.5 10.1-10.1C295.8 112 294.9 109.8 293.5 108zM285.7 120.4c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S286.7 120.4 285.7 120.4z"/>
    <path fill="#FFFFFF" d="M283.4 104.8h2.7c1.7 0 3 0.5 3 2 0 0.8-0.4 1.5-1.4 1.8v0.1c1.2 0.2 1.9 0.9 1.9 2 0 1.7-1.4 2.4-3.2 2.4h-2.9V104.8zM285.9 108.3c1.2 0 1.7-0.4 1.7-1.2 0-0.8-0.5-1.1-1.6-1.1h-1.1v2.3H285.9zM286.1 112c1.2 0 1.9-0.5 1.9-1.4 0-0.9-0.7-1.3-1.9-1.3h-1.2v2.7H286.1z"/>
  </g>
  <g id="c">
    <circle fill="#C67D39" cx="336.7" cy="180.6" r="1.9"/>
    <rect x="336.1" y="122.5" fill="#C67D39" width="1.3" height="58.1"/>
    <path fill="#C67D39" d="M344.6 107.2l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1 5.6 0 10.1-4.5 10.1-10.1C346.8 111.2 346 109 344.6 107.2zM336.7 119.6c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S337.8 119.6 336.7 119.6z"/>
    <path fill="#FFFFFF" d="M337.8 103.9c1 0 1.8 0.5 2.4 1.1l-0.8 0.9c-0.4-0.4-0.9-0.7-1.5-0.7 -1.4 0-2.3 1.1-2.3 3 0 1.9 0.9 3 2.3 3 0.7 0 1.3-0.3 1.8-0.8l0.8 0.9c-0.7 0.8-1.5 1.2-2.6 1.2 -2.1 0-3.8-1.5-3.8-4.3C334 105.5 335.7 103.9 337.8 103.9z"/>
  </g>
  <g id="d">
    <circle fill="#C15D7E" cx="506.2" cy="152.8" r="1.9"/>
    <rect x="505.6" y="123.3" fill="#C15D7E" width="1.3" height="29.5"/>
    <path fill="#C15D7E" d="M514.1 108l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1s10.1-4.5 10.1-10.1C516.4 112 515.5 109.8 514.1 108zM506.2 120.4c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S507.3 120.4 506.2 120.4z"/>
    <path fill="#FFFFFF" d="M504 104.8h2.2c2.5 0 4 1.4 4 4.1 0 2.8-1.5 4.2-4 4.2h-2.3V104.8zM506.1 111.9c1.7 0 2.6-1 2.6-3 0-2-1-2.9-2.6-2.9h-0.6v5.9H506.1z"/>
  </g>
  <g id="seconds">
    <path fill="#A2C2DD" d="M201.6 49.4c0.2-0.1 0.4-0.2 0.6-0.3 0.2-0.1 0.4-0.2 0.6-0.3l0.7-0.1v5.4h0.9v0.6H201.9v-0.6h0.9v-4.6c-0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.4 0.2-0.6 0.3V49.4zM206.4 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2s0.3 0.1 0.4 0.1 0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5 -0.1-0.1-0.2-0.2-0.4-0.3s-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3 -0.2-0.1-0.4-0.2-0.5-0.3 -0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0s0.3 0.1 0.5 0.1c0.2 0.1 0.3 0.1 0.4 0.2 0.1 0.1 0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5 0.1 0.1 0.2 0.2 0.4 0.3 0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.5 0.4 0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4s-0.2 0.2-0.4 0.3c-0.2 0.1-0.3 0.2-0.5 0.2s-0.4 0.1-0.5 0.1 -0.4 0-0.6 0c-0.2 0-0.4 0-0.6-0.1 -0.2 0-0.4-0.1-0.5-0.2 -0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L206.4 53.6zM215.3 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM220.8 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8s0.4 0.4 0.7 0.5 0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5s-0.8 0.2-1.2 0.2c-0.5 0-0.9-0.1-1.2-0.2 -0.4-0.2-0.6-0.4-0.9-0.7 -0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L220.8 49.6zM248.4 54.8h-3.9l0-0.6c0.2-0.2 0.4-0.4 0.6-0.6s0.5-0.4 0.7-0.7c0.2-0.2 0.5-0.5 0.7-0.7 0.2-0.2 0.4-0.5 0.6-0.7s0.3-0.4 0.4-0.6c0.1-0.2 0.2-0.4 0.2-0.6 0-0.1 0-0.3-0.1-0.4 -0.1-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.2-0.2-0.4-0.2s-0.3-0.1-0.5-0.1c-0.2 0-0.3 0-0.5 0.1 -0.1 0-0.3 0.1-0.4 0.2 -0.1 0.1-0.2 0.2-0.3 0.3 -0.1 0.1-0.2 0.3-0.2 0.4l-0.4-0.4c0.1-0.2 0.2-0.3 0.3-0.5 0.1-0.1 0.3-0.3 0.4-0.4 0.2-0.1 0.3-0.2 0.5-0.2s0.4-0.1 0.6-0.1c0.3 0 0.5 0 0.8 0.1 0.2 0.1 0.4 0.2 0.6 0.3s0.3 0.3 0.4 0.5c0.1 0.2 0.1 0.4 0.1 0.6 0 0.3-0.1 0.5-0.2 0.8 -0.1 0.3-0.3 0.5-0.5 0.8 -0.2 0.3-0.4 0.5-0.7 0.8s-0.6 0.5-0.9 0.8c-0.1 0.1-0.3 0.2-0.4 0.4 -0.1 0.1-0.3 0.2-0.4 0.4h3.1V54.8zM250 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2s0.3 0.1 0.4 0.1 0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5 -0.1-0.1-0.2-0.2-0.4-0.3s-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3 -0.2-0.1-0.4-0.2-0.5-0.3 -0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0s0.3 0.1 0.5 0.1c0.2 0.1 0.3 0.1 0.4 0.2 0.1 0.1 0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5 0.1 0.1 0.2 0.2 0.4 0.3 0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.5 0.4 0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4s-0.2 0.2-0.4 0.3c-0.2 0.1-0.3 0.2-0.5 0.2s-0.4 0.1-0.5 0.1 -0.4 0-0.6 0c-0.2 0-0.4 0-0.6-0.1 -0.2 0-0.4-0.1-0.5-0.2 -0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L250 53.6zM258.9 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM264.4 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8s0.4 0.4 0.7 0.5 0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5s-0.8 0.2-1.2 0.2c-0.5 0-0.9-0.1-1.2-0.2 -0.4-0.2-0.6-0.4-0.9-0.7 -0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L264.4 49.6zM286.8 51.3c0 0 0.1 0 0.1 0s0.1 0 0.1 0c0.2 0 0.5 0 0.7-0.1 0.2 0 0.4-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.4 0.1-0.1 0.1-0.3 0.1-0.5 0-0.2 0-0.3-0.1-0.4 -0.1-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.2-0.1-0.4-0.2s-0.3-0.1-0.5-0.1c-0.3 0-0.6 0.1-0.8 0.2 -0.2 0.1-0.4 0.3-0.6 0.6l-0.4-0.4c0.1-0.2 0.2-0.3 0.3-0.4 0.1-0.1 0.3-0.2 0.4-0.3s0.3-0.1 0.5-0.2c0.2 0 0.4-0.1 0.6-0.1 0.2 0 0.5 0 0.7 0.1 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.2 0.4 0.2 0.7 0 0.2 0 0.4-0.1 0.5s-0.1 0.3-0.2 0.4 -0.2 0.2-0.4 0.3c-0.1 0.1-0.3 0.2-0.5 0.2l0 0c0.2 0 0.4 0.1 0.5 0.2 0.2 0.1 0.3 0.2 0.4 0.3 0.1 0.1 0.2 0.3 0.3 0.4 0.1 0.2 0.1 0.3 0.1 0.5 0 0.3-0.1 0.5-0.2 0.7 -0.1 0.2-0.3 0.4-0.5 0.5s-0.4 0.3-0.7 0.3c-0.3 0.1-0.6 0.1-0.8 0.1 -0.2 0-0.4 0-0.6-0.1 -0.2 0-0.4-0.1-0.5-0.2 -0.2-0.1-0.3-0.2-0.4-0.3 -0.1-0.1-0.2-0.3-0.2-0.4l0.3-0.4c0.1 0.1 0.1 0.3 0.2 0.4s0.2 0.2 0.3 0.3c0.1 0.1 0.3 0.1 0.4 0.2 0.1 0 0.3 0.1 0.5 0.1 0.2 0 0.4 0 0.6-0.1 0.2-0.1 0.3-0.1 0.5-0.2s0.2-0.2 0.3-0.4c0.1-0.1 0.1-0.3 0.1-0.5 0-0.2 0-0.4-0.1-0.5 -0.1-0.1-0.2-0.3-0.3-0.4s-0.3-0.2-0.5-0.2c-0.2 0-0.4-0.1-0.7-0.1 0 0-0.1 0-0.2 0 -0.1 0-0.1 0-0.2 0L286.8 51.3zM291.1 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2s0.3 0.1 0.4 0.1 0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5 -0.1-0.1-0.2-0.2-0.4-0.3s-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3 -0.2-0.1-0.4-0.2-0.5-0.3 -0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0s0.3 0.1 0.5 0.1c0.2 0.1 0.3 0.1 0.4 0.2 0.1 0.1 0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5 0.1 0.1 0.2 0.2 0.4 0.3 0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.5 0.4 0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4s-0.2 0.2-0.4 0.3c-0.2 0.1-0.3 0.2-0.5 0.2s-0.4 0.1-0.5 0.1 -0.4 0-0.6 0c-0.2 0-0.4 0-0.6-0.1 -0.2 0-0.4-0.1-0.5-0.2 -0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L291.1 53.6zM300 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM305.5 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8s0.4 0.4 0.7 0.5 0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5s-0.8 0.2-1.2 0.2c-0.5 0-0.9-0.1-1.2-0.2 -0.4-0.2-0.6-0.4-0.9-0.7 -0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L305.5 49.6zM326.8 54.8v-1.5h-2.9v-0.5l2.8-4h0.9v3.9h0.9v0.6h-0.9v1.5H326.8zM326.8 52.7v-3.4l-0.4 0.6 -1.9 2.8H326.8zM329.7 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2s0.3 0.1 0.4 0.1 0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5 -0.1-0.1-0.2-0.2-0.4-0.3s-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3 -0.2-0.1-0.4-0.2-0.5-0.3 -0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0s0.3 0.1 0.5 0.1c0.2 0.1 0.3 0.1 0.4 0.2 0.1 0.1 0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5 0.1 0.1 0.2 0.2 0.4 0.3 0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.5 0.4 0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4s-0.2 0.2-0.4 0.3c-0.2 0.1-0.3 0.2-0.5 0.2s-0.4 0.1-0.5 0.1 -0.4 0-0.6 0c-0.2 0-0.4 0-0.6-0.1 -0.2 0-0.4-0.1-0.5-0.2 -0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L329.7 53.6zM338.6 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM344.1 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8s0.4 0.4 0.7 0.5 0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5s-0.8 0.2-1.2 0.2c-0.5 0-0.9-0.1-1.2-0.2 -0.4-0.2-0.6-0.4-0.9-0.7 -0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L344.1 49.6zM365.9 53.5c0.2 0.2 0.4 0.4 0.6 0.5 0.2 0.1 0.5 0.2 0.7 0.2 0.2 0 0.4 0 0.6-0.1s0.3-0.2 0.5-0.3c0.1-0.1 0.2-0.3 0.3-0.4 0.1-0.2 0.1-0.3 0.1-0.5 0-0.2 0-0.3-0.1-0.5 -0.1-0.2-0.1-0.3-0.2-0.4 -0.1-0.1-0.2-0.2-0.4-0.3 -0.2-0.1-0.3-0.1-0.5-0.1 -0.2 0-0.4 0-0.5 0.1 -0.2 0.1-0.3 0.2-0.4 0.3l-0.7 0v-3.2h3.3v0.6h-2.6l-0.1 1.8c0.2-0.1 0.3-0.2 0.5-0.2 0.2 0 0.4-0.1 0.5-0.1 0.3 0 0.6 0 0.8 0.1 0.2 0.1 0.4 0.2 0.6 0.4 0.2 0.2 0.3 0.4 0.4 0.6 0.1 0.2 0.1 0.5 0.1 0.8 0 0.3 0 0.5-0.2 0.8 -0.1 0.2-0.2 0.4-0.4 0.6 -0.2 0.2-0.4 0.3-0.7 0.4s-0.6 0.2-0.9 0.2c-0.2 0-0.3 0-0.5 0 -0.2 0-0.3-0.1-0.5-0.1s-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.2-0.3-0.4L365.9 53.5zM370.8 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2s0.3 0.1 0.4 0.1 0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3s0.1-0.3 0.1-0.4c0-0.2 0-0.3-0.1-0.5 -0.1-0.1-0.2-0.2-0.4-0.3s-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3 -0.2-0.1-0.4-0.2-0.5-0.3 -0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0 0.2 0 0.3 0.1 0.5 0.1 0.2 0.1 0.3 0.1 0.4 0.2s0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5 0.1 0.1 0.2 0.2 0.4 0.3 0.2 0.1 0.3 0.2 0.5 0.3s0.4 0.2 0.6 0.3c0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.5 0.4 0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4 -0.1 0.1-0.2 0.2-0.4 0.3 -0.1 0.1-0.3 0.2-0.5 0.2s-0.4 0.1-0.5 0.1c-0.2 0-0.4 0-0.6 0 -0.2 0-0.4 0-0.6-0.1 -0.2 0-0.4-0.1-0.5-0.2 -0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L370.8 53.6zM379.7 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM385.2 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.7 0.5s0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5 -0.4 0.1-0.8 0.2-1.2 0.2 -0.5 0-0.9-0.1-1.2-0.2 -0.4-0.2-0.6-0.4-0.9-0.7 -0.2-0.3-0.4-0.6-0.5-1s-0.2-0.8-0.2-1.2c0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L385.2 49.6zM412.5 49.7c-0.1-0.1-0.3-0.3-0.5-0.3 -0.2-0.1-0.4-0.1-0.6-0.1 -0.2 0-0.4 0-0.5 0.1 -0.2 0.1-0.3 0.2-0.4 0.3 -0.1 0.1-0.2 0.2-0.3 0.4 -0.1 0.2-0.2 0.3-0.2 0.5 -0.1 0.2-0.1 0.4-0.1 0.6 0 0.2 0 0.4 0 0.6 0.1-0.1 0.2-0.3 0.3-0.4s0.2-0.2 0.4-0.2c0.1-0.1 0.3-0.1 0.4-0.1 0.2 0 0.3 0 0.5 0 0.3 0 0.5 0 0.8 0.1 0.2 0.1 0.4 0.2 0.6 0.4 0.2 0.2 0.3 0.4 0.4 0.6 0.1 0.2 0.1 0.5 0.1 0.8 0 0.3 0 0.5-0.1 0.8 -0.1 0.2-0.2 0.5-0.4 0.6 -0.2 0.2-0.4 0.3-0.6 0.4 -0.2 0.1-0.5 0.2-0.8 0.2 -0.4 0-0.7-0.1-1-0.2 -0.3-0.1-0.5-0.3-0.7-0.6 -0.2-0.3-0.3-0.6-0.4-0.9s-0.1-0.8-0.1-1.2c0-0.4 0.1-0.9 0.2-1.3 0.1-0.4 0.3-0.7 0.5-1 0.2-0.3 0.5-0.5 0.8-0.7 0.3-0.2 0.7-0.3 1.1-0.3 0.3 0 0.6 0.1 0.8 0.1 0.2 0.1 0.4 0.2 0.6 0.4L412.5 49.7zM411.1 51.5c-0.2 0-0.3 0-0.5 0.1 -0.1 0-0.3 0.1-0.4 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.2 0.2-0.2 0.4 0 0.1 0 0.1 0 0.1 0 0 0 0.1 0 0.1s0 0 0 0c0 0 0 0 0 0 0 0.2 0 0.4 0.1 0.6 0.1 0.2 0.1 0.4 0.3 0.5 0.1 0.1 0.3 0.3 0.4 0.4 0.2 0.1 0.4 0.1 0.6 0.1 0.2 0 0.4 0 0.5-0.1 0.2-0.1 0.3-0.2 0.4-0.3 0.1-0.1 0.2-0.3 0.3-0.4 0.1-0.2 0.1-0.3 0.1-0.5s0-0.4-0.1-0.5c-0.1-0.2-0.1-0.3-0.2-0.4 -0.1-0.1-0.2-0.2-0.4-0.3C411.5 51.5 411.3 51.5 411.1 51.5zM414.4 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2 0.1 0 0.3 0.1 0.4 0.1s0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5s-0.2-0.2-0.4-0.3 -0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3s-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0 0.2 0 0.3 0.1 0.5 0.1 0.2 0.1 0.3 0.1 0.4 0.2s0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5s0.2 0.2 0.4 0.3c0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3s0.4 0.2 0.5 0.4c0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4 -0.1 0.1-0.2 0.2-0.4 0.3 -0.1 0.1-0.3 0.2-0.5 0.2 -0.2 0.1-0.4 0.1-0.5 0.1 -0.2 0-0.4 0-0.6 0 -0.2 0-0.4 0-0.6-0.1s-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L414.4 53.6zM423.3 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM428.8 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.7 0.5s0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5 -0.4 0.1-0.8 0.2-1.2 0.2 -0.5 0-0.9-0.1-1.2-0.2s-0.6-0.4-0.9-0.7c-0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L428.8 49.6zM454.1 48.8v0.4l-2.5 5.6h-0.8l2.4-5.3H450v-0.6H454.1zM455.5 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2 0.1 0 0.3 0.1 0.4 0.1s0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5s-0.2-0.2-0.4-0.3 -0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3s-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0 0.2 0 0.3 0.1 0.5 0.1 0.2 0.1 0.3 0.1 0.4 0.2s0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5s0.2 0.2 0.4 0.3c0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3s0.4 0.2 0.5 0.4c0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4 -0.1 0.1-0.2 0.2-0.4 0.3 -0.1 0.1-0.3 0.2-0.5 0.2 -0.2 0.1-0.4 0.1-0.5 0.1 -0.2 0-0.4 0-0.6 0 -0.2 0-0.4 0-0.6-0.1s-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L455.5 53.6zM464.4 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM469.9 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.7 0.5s0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5 -0.4 0.1-0.8 0.2-1.2 0.2 -0.5 0-0.9-0.1-1.2-0.2s-0.6-0.4-0.9-0.7c-0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L469.9 49.6zM495.8 48.7c0.3 0 0.5 0 0.8 0.1s0.4 0.2 0.6 0.3 0.3 0.3 0.4 0.5c0.1 0.2 0.2 0.4 0.2 0.6 0 0.4-0.1 0.7-0.3 0.9 -0.2 0.2-0.5 0.4-0.9 0.5 0.4 0.1 0.8 0.3 1 0.6 0.2 0.3 0.3 0.6 0.3 1 0 0.3-0.1 0.5-0.2 0.7 -0.1 0.2-0.3 0.4-0.5 0.5 -0.2 0.1-0.4 0.2-0.7 0.3s-0.5 0.1-0.8 0.1c-0.3 0-0.5 0-0.8-0.1s-0.5-0.2-0.7-0.3c-0.2-0.1-0.3-0.3-0.5-0.5s-0.2-0.4-0.2-0.7c0-0.4 0.1-0.7 0.3-1s0.6-0.5 1-0.6c-0.4-0.1-0.7-0.3-0.9-0.5s-0.3-0.5-0.3-0.9c0-0.2 0.1-0.4 0.2-0.6 0.1-0.2 0.2-0.3 0.4-0.5 0.2-0.1 0.4-0.2 0.6-0.3C495.3 48.7 495.5 48.7 495.8 48.7zM495.8 54.3c0.2 0 0.4 0 0.5-0.1 0.2 0 0.3-0.1 0.4-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.5 0-0.2 0-0.3-0.1-0.5 -0.1-0.1-0.2-0.3-0.3-0.4s-0.3-0.2-0.4-0.3c-0.2-0.1-0.3-0.1-0.5-0.2 -0.2 0-0.4 0.1-0.5 0.2 -0.2 0.1-0.3 0.2-0.4 0.3s-0.2 0.2-0.3 0.4c-0.1 0.1-0.1 0.3-0.1 0.5 0 0.2 0 0.3 0.1 0.5s0.2 0.2 0.3 0.3c0.1 0.1 0.3 0.2 0.4 0.2C495.4 54.2 495.6 54.3 495.8 54.3zM495.8 49.2c-0.2 0-0.3 0-0.5 0.1 -0.1 0-0.3 0.1-0.4 0.2 -0.1 0.1-0.2 0.2-0.3 0.3s-0.1 0.3-0.1 0.4c0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.5 0.3 0.9 0.4 0.4-0.1 0.7-0.2 0.9-0.4 0.2-0.2 0.3-0.4 0.3-0.7 0-0.2 0-0.3-0.1-0.4s-0.1-0.2-0.3-0.3c-0.1-0.1-0.2-0.1-0.4-0.2S495.9 49.2 495.8 49.2zM499.2 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2 0.1 0 0.3 0.1 0.4 0.1s0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5s-0.2-0.2-0.4-0.3 -0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3s-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0 0.2 0 0.3 0.1 0.5 0.1 0.2 0.1 0.3 0.1 0.4 0.2s0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5s0.2 0.2 0.4 0.3c0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3s0.4 0.2 0.5 0.4c0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4 -0.1 0.1-0.2 0.2-0.4 0.3 -0.1 0.1-0.3 0.2-0.5 0.2 -0.2 0.1-0.4 0.1-0.5 0.1 -0.2 0-0.4 0-0.6 0 -0.2 0-0.4 0-0.6-0.1s-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L499.2 53.6zM508.1 54.8h-3.8v-6.1H508v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM513.6 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.7 0.5s0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5 -0.4 0.1-0.8 0.2-1.2 0.2 -0.5 0-0.9-0.1-1.2-0.2s-0.6-0.4-0.9-0.7c-0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L513.6 49.6zM535.5 53.8c0.1 0.2 0.3 0.3 0.5 0.4 0.2 0.1 0.4 0.1 0.7 0.1 0.3 0 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.3 0.5-0.5 0.1-0.2 0.2-0.5 0.3-0.8s0.1-0.6 0.1-0.9v0c-0.2 0.3-0.4 0.4-0.6 0.6 -0.3 0.1-0.6 0.2-0.9 0.2 -0.3 0-0.6 0-0.8-0.1s-0.4-0.2-0.6-0.4 -0.3-0.4-0.4-0.6c-0.1-0.2-0.1-0.5-0.1-0.8s0-0.5 0.1-0.8c0.1-0.2 0.2-0.4 0.4-0.6 0.2-0.2 0.4-0.3 0.7-0.4s0.5-0.1 0.9-0.1c0.3 0 0.6 0.1 0.9 0.2 0.3 0.1 0.5 0.3 0.7 0.6 0.2 0.2 0.3 0.6 0.4 0.9 0.1 0.4 0.1 0.8 0.1 1.2 0 0.5-0.1 0.9-0.2 1.3 -0.1 0.4-0.3 0.7-0.5 1 -0.2 0.3-0.5 0.5-0.8 0.7 -0.3 0.2-0.6 0.2-1 0.2 -0.3 0-0.6-0.1-0.8-0.2s-0.4-0.3-0.6-0.4L535.5 53.8zM536.9 51.9c0.2 0 0.3 0 0.5-0.1 0.1 0 0.3-0.1 0.4-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.2-0.2 0.2-0.4 0 0 0 0 0-0.1 0 0 0-0.1 0-0.1 0-0.2 0-0.4-0.1-0.6 -0.1-0.2-0.1-0.4-0.2-0.5 -0.1-0.2-0.3-0.3-0.4-0.4 -0.2-0.1-0.4-0.1-0.6-0.1 -0.2 0-0.4 0-0.5 0.1 -0.2 0.1-0.3 0.2-0.4 0.3s-0.2 0.3-0.3 0.4c-0.1 0.2-0.1 0.3-0.1 0.5 0 0.2 0 0.4 0.1 0.5 0.1 0.2 0.1 0.3 0.2 0.4 0.1 0.1 0.2 0.2 0.4 0.3C536.5 51.9 536.7 51.9 536.9 51.9zM540.4 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2 0.1 0 0.3 0.1 0.4 0.1s0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5s-0.2-0.2-0.4-0.3 -0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3s-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0 0.2 0 0.3 0.1 0.5 0.1 0.2 0.1 0.3 0.1 0.4 0.2s0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5s0.2 0.2 0.4 0.3c0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3s0.4 0.2 0.5 0.4c0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4 -0.1 0.1-0.2 0.2-0.4 0.3 -0.1 0.1-0.3 0.2-0.5 0.2 -0.2 0.1-0.4 0.1-0.5 0.1 -0.2 0-0.4 0-0.6 0 -0.2 0-0.4 0-0.6-0.1s-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L540.4 53.6zM549.3 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM554.8 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.7 0.5s0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5 -0.4 0.1-0.8 0.2-1.2 0.2 -0.5 0-0.9-0.1-1.2-0.2s-0.6-0.4-0.9-0.7c-0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L554.8 49.6zM571.9 49.4c0.2-0.1 0.4-0.2 0.6-0.3 0.2-0.1 0.4-0.2 0.6-0.3l0.7-0.1v5.4h0.9v0.6h-2.5v-0.6h0.9v-4.6c-0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.4 0.2-0.6 0.3V49.4zM578.2 48.7c0.4 0 0.7 0.1 1 0.2 0.3 0.2 0.5 0.4 0.7 0.7 0.2 0.3 0.3 0.6 0.4 1 0.1 0.4 0.1 0.8 0.1 1.3 0 0.5 0 0.9-0.1 1.2s-0.2 0.7-0.4 0.9 -0.4 0.5-0.7 0.6c-0.3 0.1-0.6 0.2-0.9 0.2 -0.4 0-0.7-0.1-1-0.2s-0.5-0.4-0.6-0.6 -0.3-0.6-0.4-1 -0.1-0.8-0.1-1.2c0-0.5 0-0.9 0.1-1.3 0.1-0.4 0.2-0.7 0.4-1s0.4-0.5 0.7-0.6C577.6 48.7 577.9 48.7 578.2 48.7zM578.2 49.3c-0.2 0-0.4 0.1-0.6 0.2s-0.3 0.3-0.4 0.5c-0.1 0.2-0.2 0.5-0.3 0.8 -0.1 0.3-0.1 0.6-0.1 1 0 0.2 0 0.4 0 0.6 0 0.2 0 0.4 0.1 0.6 0 0.2 0.1 0.4 0.2 0.5 0.1 0.2 0.1 0.3 0.3 0.4s0.2 0.2 0.4 0.3c0.1 0.1 0.3 0.1 0.5 0.1 0.2 0 0.4-0.1 0.6-0.2 0.2-0.1 0.3-0.3 0.4-0.5 0.1-0.2 0.2-0.5 0.2-0.8 0.1-0.3 0.1-0.6 0.1-1 0-0.2 0-0.4 0-0.6 0-0.2 0-0.4-0.1-0.6 0-0.2-0.1-0.4-0.1-0.5s-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.3S578.4 49.3 578.2 49.3zM581.6 53.6c0.1 0.1 0.2 0.2 0.3 0.3 0.1 0.1 0.3 0.1 0.4 0.2 0.1 0 0.3 0.1 0.4 0.1s0.3 0 0.4 0c0.2 0 0.4 0 0.6-0.1 0.2 0 0.3-0.1 0.5-0.2 0.1-0.1 0.2-0.2 0.3-0.3 0.1-0.1 0.1-0.3 0.1-0.4 0-0.2 0-0.3-0.1-0.5s-0.2-0.2-0.4-0.3 -0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2 -0.2-0.1-0.4-0.2-0.6-0.3s-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.4-0.5s-0.1-0.4-0.1-0.6c0-0.3 0.1-0.5 0.2-0.7 0.1-0.2 0.3-0.4 0.5-0.5 0.2-0.1 0.4-0.2 0.7-0.3 0.3-0.1 0.5-0.1 0.8-0.1 0.2 0 0.3 0 0.5 0 0.2 0 0.3 0.1 0.5 0.1 0.2 0.1 0.3 0.1 0.4 0.2s0.2 0.2 0.3 0.3l-0.3 0.5c-0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.3 0-0.4 0 -0.2 0-0.3 0-0.5 0.1 -0.2 0-0.3 0.1-0.5 0.2s-0.2 0.2-0.3 0.3c-0.1 0.1-0.1 0.3-0.1 0.4 0 0.2 0 0.3 0.1 0.5s0.2 0.2 0.4 0.3c0.2 0.1 0.3 0.2 0.5 0.3 0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.4 0.2 0.6 0.3s0.4 0.2 0.5 0.4c0.2 0.1 0.3 0.3 0.4 0.5 0.1 0.2 0.1 0.4 0.1 0.6 0 0.2 0 0.4-0.1 0.5 -0.1 0.2-0.2 0.3-0.3 0.4 -0.1 0.1-0.2 0.2-0.4 0.3 -0.1 0.1-0.3 0.2-0.5 0.2 -0.2 0.1-0.4 0.1-0.5 0.1 -0.2 0-0.4 0-0.6 0 -0.2 0-0.4 0-0.6-0.1s-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.3-0.3L581.6 53.6zM590.5 54.8h-3.8v-6.1h3.6v0.6h-2.9v2h2.8v0.6h-2.8v2.2h3V54.8zM596 49.6c-0.4-0.3-0.9-0.5-1.5-0.5 -0.3 0-0.5 0-0.7 0.1 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.3 0.3-0.4 0.4 -0.1 0.2-0.2 0.3-0.3 0.5s-0.1 0.4-0.2 0.6c0 0.2-0.1 0.4-0.1 0.6 0 0.3 0 0.6 0.1 0.9 0.1 0.3 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.7 0.5s0.6 0.2 1 0.2c0.3 0 0.7 0 1-0.1 0.3-0.1 0.6-0.2 0.8-0.4l0.2 0.6c-0.3 0.2-0.6 0.4-0.9 0.5 -0.4 0.1-0.8 0.2-1.2 0.2 -0.5 0-0.9-0.1-1.2-0.2s-0.6-0.4-0.9-0.7c-0.2-0.3-0.4-0.6-0.5-1 -0.1-0.4-0.2-0.8-0.2-1.2 0-0.3 0-0.6 0.1-0.8 0.1-0.3 0.1-0.5 0.3-0.8 0.1-0.2 0.3-0.5 0.4-0.7 0.2-0.2 0.4-0.4 0.6-0.5 0.2-0.1 0.5-0.3 0.7-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.4 0 0.7 0.1 1 0.2 0.3 0.1 0.6 0.3 0.8 0.5L596 49.6z"/>
  </g>
  <g id="b_1_">
    <circle fill="#7A616D" cx="447.3" cy="152.8" r="1.9"/>
    <rect x="446.6" y="123.3" fill="#7A616D" width="1.3" height="29.5"/>
    <path fill="#7A616D" d="M455.1 108l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1 5.6 0 10.1-4.5 10.1-10.1C457.4 112 456.5 109.8 455.1 108zM447.3 120.4c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S448.3 120.4 447.3 120.4z"/>
    <path fill="#FFFFFF" d="M445 104.8h2.7c1.7 0 3 0.5 3 2 0 0.8-0.4 1.5-1.4 1.8v0.1c1.2 0.2 1.9 0.9 1.9 2 0 1.7-1.4 2.4-3.2 2.4h-2.9V104.8zM447.5 108.3c1.2 0 1.7-0.4 1.7-1.2 0-0.8-0.5-1.1-1.6-1.1h-1.1v2.3H447.5zM447.7 112c1.2 0 1.9-0.5 1.9-1.4 0-0.9-0.7-1.3-1.9-1.3h-1.2v2.7H447.7z"/>
  </g>
  <g id="b">
    <circle fill="#7A616D" cx="588.2" cy="152.8" r="1.9"/>
    <rect x="587.5" y="123.3" fill="#7A616D" width="1.3" height="29.5"/>
    <path fill="#7A616D" d="M596 108l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1 5.6 0 10.1-4.5 10.1-10.1C598.3 112 597.4 109.8 596 108zM588.2 120.4c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S589.2 120.4 588.2 120.4z"/>
    <path fill="#FFFFFF" d="M585.9 104.8h2.7c1.7 0 3 0.5 3 2 0 0.8-0.4 1.5-1.4 1.8v0.1c1.2 0.2 1.9 0.9 1.9 2 0 1.7-1.4 2.4-3.2 2.4h-2.9V104.8zM588.4 108.3c1.2 0 1.7-0.4 1.7-1.2 0-0.8-0.5-1.1-1.6-1.1h-1.1v2.3H588.4zM588.6 112c1.2 0 1.9-0.5 1.9-1.4 0-0.9-0.7-1.3-1.9-1.3h-1.2v2.7H588.6z"/>
  </g>
  <g id="b_3_">
    <circle fill="#7A616D" cx="199.7" cy="152.8" r="1.9"/>
    <rect x="199.1" y="123.3" fill="#7A616D" width="1.3" height="29.5"/>
    <path fill="#7A616D" d="M207.5 108l-7.8-10.8 -7.8 10.8c-1.4 1.7-2.3 4-2.3 6.4 0 5.6 4.5 10.1 10.1 10.1 5.6 0 10.1-4.5 10.1-10.1C209.8 112 209 109.8 207.5 108zM199.7 120.4c-1.1 0-1.9-0.9-1.9-1.9s0.9-1.9 1.9-1.9c1.1 0 1.9 0.9 1.9 1.9S200.7 120.4 199.7 120.4z"/>
    <path fill="#FFFFFF" d="M197.4 104.8h2.7c1.7 0 3 0.5 3 2 0 0.8-0.4 1.5-1.4 1.8v0.1c1.2 0.2 1.9 0.9 1.9 2 0 1.7-1.4 2.4-3.2 2.4h-2.9V104.8zM199.9 108.3c1.2 0 1.7-0.4 1.7-1.2 0-0.8-0.5-1.1-1.6-1.1h-1.1v2.3H199.9zM200.1 112c1.2 0 1.9-0.5 1.9-1.4 0-0.9-0.7-1.3-1.9-1.3h-1.2v2.7H200.1z"/>
  </g>
</svg>

<div class="dialog dialog1">
  <p class="first">Current Position on GSAP's Timeline</p>
</div>
  
<div class="dialog dialog2">
  <p class="mt">Adjust the Timing of Your Animations</p>
</div>
  
<div class="dialog dialog3">
  <p class="mt">Tween your tweens<br>
    tl.timeScale(1.8);</p>
</div>
  
<div class="dialog dialog4">
  <p>The GSAP Timeline makes animation a breeze!</p>
</div>
  
 <div class="dialog dialog5">
   <p><a href="https://codepen.io/sdras">Follow sdras on Codepen</a> for more demos</p>
</div>
</div><!--container-->
            
          
!
            
              html, body, #container {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
}

svg {
  margin: 0 auto;
  display: table;
  width: 800px;
  height: 350px;
}

html {
  background: #638DB7;
}

.dialog {
  width: 400px;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -200px;
}

.dialog, svg {
  visibility: hidden;
}

p {
  font-size: 30px;
  font-family: 'Muli', sans-serif;
  text-align: center;
  color: #A1C3E5;
  a {
    color: #bcd7f2;
    transition: 0.75 color ease;
    text-decoration: none;
    &:hover {
      color: #fff;
      transition: 0.5 color ease;
    }
  }
}

.mt {
  margin-top: 120px;
}

.allrule, .indicator, .movement {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -400px;
}

@media (max-width: 700px) {
 container { width: 100%; }
 svg { 
   width: 100% !important; 
   height: auto !important;
 }
 .allrule, .indicator, .movement {
    top: 0;
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important; 
  }
  p { font-size: 15px; }
}

            
          
!
            
              TweenMax.ticker.fps(60);

var $mf = $("#middle-circle #flare"), 
    $s1p = $("#scene1 path"),
    $mcc = $("#middle-circle circle"),
    $mcf = $("#middle-circle #flare line"),
    $s3p = $("#scene3 path"),
    $s3c =$("#scene3 circle"),
    $s3r =$("#scene3 rect"),
    $s2l =$("#drawline"),
    $s3fl =$("#scene3-flare line"),
    $alr =$(".allrule"),
    $di1 =$(".dialog1 p"),
    $di2 =$(".dialog2 p"),
    $di3 =$(".dialog3 p"),
    $tri = $("#triangles polygon");

var $a =$("#a"),
    $b =$("#b"),
    $b2 =$("#b_1_"),
    $b3 =$("#b_2_"),
    $b4 =$("#b_3_"),
    $c =$("#c"),
    $d = $("#d"),
		$circ1 = $("#circ-a"),
    $circ2 = $("#circ-b"),
    $circ3 = $("#circ-c"),
    $circ4 = $("#circ-d"),
		$allB = $([$b, $b2, $b3, $b4]),
    $allI = $([$a, $b, $b2, $b3, $b4, $c, $d]),
		$ind = $(".indicator");

TweenMax.set([$a, $b, $b2, $b3, $b4, $c, $d, $mcf, $alr, $di1], {
  opacity: 0
});
TweenMax.set($tri, {perspective:400});
TweenMax.set($(".dialog, svg"), { visibility:"visible" }); 
TweenMax.set($("#indicator circle, #indicator ellipse"), {css:{transformPerspective:400, perspective:400, transformStyle:"preserve-3d"}}); 
TweenMax.set([$s1p, $s3p, $s3fl, $mcf], {
  drawSVG:'100% 100%'
});
TweenMax.set($circ4, {
  x:60, y:-40, scale:0.9
});
TweenMax.set($s2l, {
  drawSVG:'0% 0%'
});
TweenMax.set($("#circ-a, #circ-b, #circ-c, #circ-d"), {
  opacity:0
});

//scene one
function sceneOne() {
  var tl = new TimelineLite();
  
tl.fromTo($s1p, 1, {drawSVG:'100% 100%'}, {drawSVG:'99% 100%', ease:Sine.easeIn});
tl.add("soflare");
tl.to($s1p, 1, {drawSVG:'0% -5%', ease:Sine.easeIn}, "soflare")
.staggerFromTo($("#scene1 polygon"), 0.6, {opacity:0, scale:0.3, rotation:90, transformOrigin:"50% 50%"}, {opacity:1, scale:1, rotation:90, transformOrigin:"50% 50%", ease:Expo.easeOut}, 0.3, "soflare")
.staggerTo($("#scene1 polygon"), 0.4, {opacity:0, scale:3, rotation:90, transformOrigin:"50% 50%", ease:Circ.easeOut}, 0.08, "soflare+=1.9");
  
return tl;
} 

//midCirc
function midCirc() {
  var tl = new TimelineLite();

tl.add("mid");
tl.set($mcf, {opacity:0});
tl.staggerFrom($mcc, 0.3, {opacity:0, scale:0, transformOrigin:"50% 50%", ease:Expo.easeOut}, 0.08, "mid")
.staggerTo($mcc, 0.3, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Expo.easeOut}, 0.08, "mid")
.staggerTo($mcc, 0.3, {opacity:0, scale:5, transformOrigin:"50% 50%", ease:Circ.easeIn}, 0.08, "mid+=0.3")
.fromTo($mcf, 0.6, {opacity:1, drawSVG:"0% 20%"}, {opacity:0, drawSVG:"80% 100%"}, "mid+=0.3");
  
return tl;
}

//scene two
function sceneTwo() {
  var tl = new TimelineLite();
  
tl.fromTo($s2l, 0.3, {drawSVG:'0% 0%'}, {drawSVG:'0% 8%', ease:Sine.easeIn})
.to($s2l, 0.3, {drawSVG:'92% 100%', ease:Sine.easeIn})
.to($s2l, 0.3, {drawSVG:'100% 100%', ease:Sine.easeIn})
.staggerFromTo($tri, 0.6, {opacity:0, scaleX:0, transformOrigin:"0% 100%"}, {opacity:1, scaleX:1, transformOrigin:"0% 100%"}, 0.08, "-=1")
.staggerTo($tri, 0.7, {opacity:0, scaleX:0, y:-80, x:150, transformOrigin:"0% 100%", ease:Expo.easeOut}, 0.1);
  
return tl;
}

//scene three
function sceneThree() {
  var tl = new TimelineLite();
  
tl.fromTo($s3p, 1, {drawSVG:'100% 100%'}, {drawSVG:'99% 100%', ease:Sine.easeIn});
tl.add("drawpaths");
tl.to($s3p, 1, {drawSVG:'0% -5%', ease:Sine.easeIn}, "drawpaths")
.fromTo($s3c, 0.3, {opacity:0}, {opacity:1}, "drawpaths")
.to($s3c, 1, {rotationX:-300, y:300, x:300, scale:5, opacity:0, ease:Expo.easeOut}, "drawpaths+=0.3")
.staggerFromTo($s3r, 0.1, {opacity:0}, {opacity:1, ease:Circ.easeOut}, 0.1, "drawpaths")
.staggerTo($s3r, 1, {opacity:0, ease:Circ.easeOut}, 0.1, "drawpaths+=0.2")
.fromTo($s3fl, 0.3, {drawSVG:'100% 100%'}, {drawSVG:'80% 100%', ease:Sine.easeIn}, "drawpaths")
.to($s3fl, 0.3, {drawSVG:'0% 20%', ease:Sine.easeIn}, "drawpaths+=0.3")
.to($s3fl, 0.3, {drawSVG:'0% 0%', ease:Sine.easeIn}, "drawpaths+=0.6");
  
return tl;
}

//second level deep
//first scene
function levelTwoOne() {
  var tl = new TimelineLite();
  
tl.add(midCirc(), "circOne")
  .add("scene1", "-=1.2")
  .add(sceneOne(), "scene1")
  .add("circTwo", "-=1.5")
  .add(midCirc(), "circTwo")
  .add("scene2", "-=1.5")
  .add(sceneTwo(), "scene2")
	.add("circThree", "-=1.5")
  .add(midCirc(), "circThree")
  .add("scene3", "-=0.5")
  .add(sceneThree(), "scene3")
  .add("circFour", "-=1")
  .add(midCirc(), "circFour")
  .to($di1, 0.3, {opacity:1}, "circFour+=1.5")
  .to($di1, 0.3, {opacity:0}, "circFour+=4.5");
  
return tl;
}

//var expandSceneThree = sceneThree();

var $a =$("#a"),
    $b =$("#b"),
    $b2 =$("#b_1_"),
    $b3 =$("#b_2_"),
    $b4 =$("#b_3_"),
    $c =$("#c"),
    $d = $("#d"),
		$circ1 = $("#circ-a"),
    $circ2 = $("#circ-b"),
    $circ3 = $("#circ-c"),
    $circ4 = $("#circ-d"),
		$allB = $([$b, $b2, $b3, $b4]),
    $allI = $([$a, $b, $b2, $b3, $b4, $c, $d]),
		$ind = $(".indicator");

//second level deep 
//second scene
function levelTwoTwo() {
  var tl = new TimelineLite();
  
tl.add("circOne");
tl.add(midCirc(), "circOne")
.to($circ1, 3, {opacity:1, ease:Circ.easeOut}, "circOne+=0.2")
.to($alr, 2, {opacity:1, ease:Circ.easeOut}, "circOne+=2")
.to($circ1, 1, {css:{rotationX:100, scale:0.3, z:-180}, ease:Power2.easeOut}, "circOne+=1")
.to($circ1, 1, {x:-164, y:50, ease:Power2.easeOut}, "circOne+=1")
.to($b4, 1, {opacity:1, ease:Back.easeOut}, "circOne+=2")
.to($circ1, 1, {x:-80, ease:Power2.easeOut}, "circOne+=3")
.to($b3, 1, {opacity:1, ease:Back.easeOut}, "circOne+=3.5")
.to($circ1, 1.25, {x:85, ease:Power2.easeOut}, "circOne+=4")
.to($b2, 1, {opacity:1, ease:Back.easeOut}, "circOne+=4.75")
.to($circ1, 1.25, {x:226, ease:Power2.easeOut}, "circOne+=5")
.to($b, 1, {opacity:1, ease:Back.easeOut}, "circOne+=5.5")
.to($circ1, 1, {opacity:0, ease:Circ.easeIn}, "circOne+=5.5");
tl.add("back")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "back")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "back");
  
return tl;
}

//third level deep 
//third scene
function levelTwoThree() {
  var tl = new TimelineLite();
  
tl.add("animTwo");
tl.add(sceneOne(), "animTwo");
tl.to($circ2, 3, {opacity:0.2, ease:Circ.easeOut}, "animTwo+=0.2")
.to($circ2, 1, {css:{rotationX:100, rotationY:50, scale:0.12, z:-100}, ease:Power2.easeOut}, "animTwo+=3")
.to($circ2, 1, {x:152, y:174, opacity:1, ease:Power2.easeOut}, "animTwo+=3")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animTwo+=3")
.to($allB, 1, {opacity:1, ease:Circ.easeIn}, "animTwo+=3")
.to($a, 1, {opacity:1, ease:Back.easeOut}, "animTwo+=3")
.to($circ2, 0.8, {opacity:0, ease:Power2.easeOut}, "animTwo+=6");
tl.add("back")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "back")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "back");
  
return tl;
}

//fourth level deep 
//fourth scene
function levelTwoFour() {
  var tl = new TimelineLite();
  
tl.add("animThree");
tl.add(sceneTwo(), "animThree");
tl.to($circ3, 3, {opacity:0.2, ease:Circ.easeOut}, "animThree")
.to($circ3, 1, {css:{rotationX:105, rotationY:-60, scale:0.12, z:-100}, ease:Power2.easeOut}, "animThree+=1.4")
.to($circ3, 1, {x:-66, y:184, opacity:1, ease:Power2.easeOut}, "animThree+=1.4")
.to($c, 1, {opacity:1, ease:Back.easeOut}, "animThree+=1.3")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animThree+=2")
.to($allB, 1, {opacity:1, ease:Circ.easeIn}, "animThree+=3")
.to($a, 1, {opacity:1, ease:Circ.easeIn}, "animThree+=3")
.to($circ3, 0.8, {opacity:0, ease:Power2.easeOut}, "animThree+=4");
tl.add("back+=1")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "back")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "back");
  
return tl;
}

//second level deep 
//fifth scene
function levelTwoFive() {
  var tl = new TimelineLite();
  
tl.add("animFour");
tl.add(sceneThree(), "animFour");
tl.to($circ4, 3, {opacity:0.2, ease:Circ.easeOut}, "animFour")
.to($circ4, 1, {css:{rotationX:70, rotationY:-40, scale:0.09, z:-100}, ease:Power2.easeOut}, "animFour+=2")
.to($circ4, 1, {x:165, y:48, opacity:1, ease:Power2.easeOut}, "animFour+=2")
.to($d, 1, {opacity:1, ease:Back.easeOut}, "animFour+=1.9")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=2")
.to($allB, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=3")
.to($a, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=3")
.to($c, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=3")
.to($circ4, 0.8, {opacity:0, ease:Power2.easeOut}, "animFour+=5.5");
  
return tl;
}

//second level deep 
//sixth scene
function levelTwoSix() {
  var tl = new TimelineLite();
  
tl.add("animFive");
tl.fromTo($di2, 0.3, {opacity:0}, {opacity:1}, "animFive")
.to($di2, 0.3, {opacity:0}, "animFive+=2.5")
.to($a, 1, {x:270, ease:Circ.easeOut}, "animFive+=3")
.to($d, 1, {x:-270, ease:Circ.easeOut}, "animFive+=3");
tl.add("backT+=1")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "backT")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "backT");
  
return tl;
}

//second level deep 
//seven scene
function levelTwoSeven() {
  var tl = new TimelineLite();
  
tl.add(midCirc(), "cOne")
.add("sce3", "-=1")
.add(sceneThree(), "sce3")
.add("cTwo", "-=1.2")
.add(midCirc(), "cTwo")
.add("sce2", "-=0.5")
.add(sceneTwo(), "sce2")
.add("cThree", "-=0.5")
.add(midCirc(), "cThree")
.add("sce", "-=1")
.add(sceneOne(), "sce")
.add("cFour", "-=2")
.add(midCirc(), "cFour");
  
return tl;
}

//second level deep 
//eighth scene
function levelTwoEight() {
  var tl = new TimelineLite();
  
tl.add("animEight")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animEight")
.to($allI, 1, {opacity:1, ease:Circ.easeIn}, "animEight");
tl.fromTo($di3, 0.3, {opacity:0}, {opacity:1}, "animEight+=1")
.to($di3, 0.3, {opacity:0}, "animEight+=3");
tl.add("lessHalf")
tl.to($c, 1, {x:-45, ease:Circ.easeOut}, "lessHalf")
.to($b3, 1, {x:-35, ease:Circ.easeOut}, "lessHalf")
.to($b2, 1, {x:-75, ease:Circ.easeOut}, "lessHalf")
.to($b, 1, {x:-105, ease:Circ.easeOut}, "lessHalf")
.to($a, 1, {x:175, ease:Circ.easeOut}, "lessHalf")
.to($b4, 1, {x:-8, ease:Circ.easeOut}, "lessHalf")
.to($d, 1, {x:-285, ease:Circ.easeOut}, "lessHalf");
tl.add("backC+=1")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "backC")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "backC");
  
return tl;
}

//second level deep 
//seven Nine
function levelTwoNine() {
  var tl = new TimelineLite();
  
tl.add(midCirc(), "cOne")
.add("sce3", "-=1")
.add(sceneThree(), "sce3")
.add("cTwo", "-=1.2")
.add(midCirc(), "cTwo")
.add("sce2", "-=0.5")
.add(sceneTwo(), "sce2")
.add("cThree", "-=0.5")
.add(midCirc(), "cThree")
.add("sce", "-=1")
.add(sceneOne(), "sce")
.add("cFour", "-=2")
.add(midCirc(), "cFour");
  
tl.timeScale(1.8);
  
return tl;
}

var master = new TimelineMax({ smoothChildTiming:true });
$(document).ready(master)
master.add(levelTwoOne(), "twoOne")
			.add(levelTwoTwo(), "twoTwo")
			.add(levelTwoThree(), "twoThree")
			.add(levelTwoFour(), "twoFour")
			.add(levelTwoFive(), "twoFive")
			.add(levelTwoSix(), "twoSix")
			.add(levelTwoSeven(), "twoSeven")
			.add(levelTwoEight(), "twoEight")
			.add(levelTwoNine(), "twoNine");
			master.fromTo($(".dialog4 p"), 1, {opacity:0}, {opacity:1, ease:Circ.easeIn}, "backC+=1")
			.to($(".dialog4 p"), 1, {scale:0, ease:Back.easeIn}, "backC+=4")
      .fromTo($(".dialog5"), 1, {scale:0, opacity:0}, {scale:1, opacity:1, ease:Back.easeOut}, "backC+=5");
	
//master.seek("twoEight");
            
          
!
999px
Loading ..................

Console