CodePen Embed - ScrollTrigger - car scrub and pin

Live

​x
 
<div class="flexContainer">
  <h1>scroll down to trigger the animation</h1>
</div>
​
<div class="carWrapper">
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="car" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="520px" height="193.6px" viewBox="0 0 520 193.6" style="enable-background:new 0 0 520 193.6;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        filter: url(#Filter_1);
      }
​
      .st1 {
        fill: url(#SVGID_1_);
      }
​
      .st2 {
        fill: url(#SVGID_2_);
      }
​
      .st3 {
        fill: #CC3300;
      }
​
      .st4 {
        fill: #181818;
      }
​
      .st5 {
        fill: #2B2B2D;
      }
​
      .st6 {
        fill: url(#SVGID_3_);
      }
​
      .st7 {
        fill: url(#SVGID_4_);
      }
​
      .st8 {
        fill: url(#SVGID_5_);
      }
​
      .st9 {
        fill: url(#SVGID_6_);
      }
​
      .st10 {
        fill: url(#SVGID_7_);
      }
​
      .st11 {
        fill: none;
        stroke: #FF0000;
        stroke-miterlimit: 3;
        stroke-opacity: 0.8;
      }
​
      .st12 {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        stroke-miterlimit: 3;
      }
​
      .st13 {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        stroke-linecap: square;
        stroke-miterlimit: 3;
      }
​
      .st14 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 3;
        stroke-opacity: 0.502;
      }
​
      .st15 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 3;
        stroke-opacity: 0.2;
      }
​
      .st16 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 3;
        stroke-opacity: 0.302;
      }
​
      .st17 {
        fill: url(#SVGID_8_);
      }
​
      .st18 {
        fill: #CCCCCC;
      }
​
      .st19 {
        fill: url(#SVGID_9_);
      }
​
      .st20 {
        fill: #6F6F6F;
      }
​
      .st21 {
        fill: url(#SVGID_10_);
      }
​
      .st22 {
        fill: #666666;
      }
​
      .st23 {
        fill: url(#SVGID_11_);
      }
​
      .st24 {
        fill: url(#SVGID_12_);
      }
​
      .st25 {
        fill-opacity: 0.502;
      }
​
      .st26 {
        fill-opacity: 0.102;
      }
​
      .st27 {
        fill: #FF0000;
      }
​
      .st28 {
        fill: #750202;
      }
​
      .st29 {
        fill: #B80303;
      }
​
      .st30 {
        fill: url(#SVGID_13_);
      }
​
      .st31 {
        fill: #A70303;
      }
​
      .st32 {
        fill: url(#SVGID_14_);
      }
​
      .st33 {
        fill: url(#SVGID_15_);
      }
​
      .st34 {
        fill: url(#SVGID_16_);
      }
​
      .st35 {
        fill: url(#SVGID_17_);
      }
​
      .st36 {
        fill: url(#SVGID_18_);
      }
​
      .st37 {
        fill: url(#SVGID_19_);
      }
​
      .st38 {
        fill: #FFFFFF;
      }
​
      .st39 {
        fill: #D0D0D0;
      }
​
      .st40 {
        fill: url(#SVGID_20_);
      }
​
      .st41 {
        fill: none;
        stroke: #CCCCCC;
        stroke-width: 5.000000e-02;
        stroke-miterlimit: 3;
      }
​
      .st42 {
        fill: none;
        stroke: #CCCCCC;
        stroke-width: 5.000000e-02;
        stroke-linecap: square;
        stroke-miterlimit: 3;
      }
​
      .st43 {
        fill: none;
        stroke: #1E1E1E;
        stroke-width: 2;
        stroke-linecap: square;
        stroke-miterlimit: 3;
      }
​
      .st44 {
        fill: none;
        stroke: #770606;
        stroke-width: 0.1;
        stroke-linecap: square;
        stroke-miterlimit: 3;
        stroke-opacity: 0.4;
      }
​
      .st45 {
        fill: none;
        stroke: #770606;
        stroke-width: 0.1;
        stroke-linecap: square;
        stroke-miterlimit: 3;
      }
​
      .st46 {
        fill: none;
        stroke: #1E1E1E;
        stroke-width: 0.1;
        stroke-linecap: square;
        stroke-miterlimit: 3;
        stroke-opacity: 0.4;
      }
​
      .st47 {
        fill: none;
        stroke: #1E1E1E;
        stroke-width: 0.1;
        stroke-linecap: square;
        stroke-miterlimit: 3;
        stroke-opacity: 0.2;
      }
​
      .st48 {
        fill: url(#SVGID_21_);
      }
​
      .st49 {
        fill: url(#SVGID_22_);
      }
​
      .st50 {
        fill: url(#SVGID_23_);
      }
​
      .st51 {
        fill: url(#SVGID_24_);
      }
​
      .st52 {
        fill: url(#SVGID_25_);
      }
​
      .st53 {
        fill: url(#SVGID_26_);
      }
​
      .st54 {
        fill: url(#SVGID_27_);
      }
​
      .st55 {
        fill: none;
        stroke: #000000;
        stroke-width: 0.1;
        stroke-miterlimit: 3;
        stroke-opacity: 0.3529;
      }
​
      .st56 {
        fill: none;
        stroke: #000000;
        stroke-width: 0.1;
        stroke-miterlimit: 3;
        stroke-opacity: 0.2627;
      }
    </style>
    <filter color-interpolation-filters="sRGB" height="291.78433018229407%" id="Filter_1" width="140%" x="-20%" y="-95.89216509114705%">
      <feFlood flood-color="#666666" flood-opacity="1" in="SourceGraphic" result="result1"></feFlood>
      <feComposite in="result1" in2="SourceGraphic" operator="in" result="result2"></feComposite>
      <feGaussianBlur in="result2" result="result3" stdDeviation="1.3333333333333333,1.3333333333333333"></feGaussianBlur>
      <feOffset dx="2.8284271247461903" dy="2.82842712474619" in="result3" result="result4"></feOffset>
      <feComposite in="SourceGraphic" in2="result4" operator="over" result="result5"></feComposite>
    </filter>
    <g transform="matrix( 1, 0, 0, 1, 0,0) " class="st0">
      <g transform="matrix( 1.23583984375, 0, 0, -0.723114013671875, 2.85,85.7) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <g>
            <g id="shadow_0_Layer0_0_FILL_1_">
​
              <radialGradient id="SVGID_1_" cx="162.0199" cy="-598.3852" r="276.975" gradientTransform="matrix(1.2358 0 0 0.5372 -5.512772e-03 187.7617)" gradientUnits="userSpaceOnUse">
                <stop offset="0" style="stop-color:#343434" />
                <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
              </radialGradient>
              <path class="st1" d="M354.9-137.6c-39.7-1.1-87.7-1.6-143.9-1.6s-104.2,0.5-143.9,1.6s-59.6,2.4-59.6,3.9
            c0,1.5,19.9,2.8,59.6,3.9s87.7,1.6,143.9,1.6s104.2-0.5,143.9-1.6s59.6-2.4,59.6-3.9C414.5-135.2,394.6-136.5,354.9-137.6z" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="behind_wheels_0_Layer0_0_FILL">
​
            <radialGradient id="SVGID_2_" cx="249.258" cy="265.4673" r="162.9993" gradientTransform="matrix(1 0 0 -1 0 400)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#000000" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st2" d="M95.3,91.2c-3.1-0.4-7.1-0.5-12.2-0.5c-9.9,0.1-18.3,0.7-25.2,1.6c-5.6,0.8-9.8,2.1-12.8,3.8
          c-2.2,1.3-4.4,3.2-6.4,5.6c-1.5,1.8-3.2,4.1-4.9,7c-2.8,4.5-5.2,8.8-7.2,13c-1.3,2.6-2.2,4.8-2.8,6.6c-0.8,2.5-1,4.8-0.8,7
          c0,0.2,0.2,1.2,0.6,3.1c0.2,1.2,0.3,2.3,0.2,3.1c0,0.5-0.2,1.3-0.4,2.4c-0.2,1-0.3,1.8-0.3,2.4c0,1.7,0.7,3.3,2.1,4.8
          c1.2,1.3,2.8,2.3,4.6,2.9c1.5,0.5,3.3,0.7,5.3,0.6c1.3,0,3.1-0.2,5.4-0.6c3.7,9.3,8.4,15.6,14.2,18.8c2.1,1.2,4.5,2.1,7.4,2.8
          c2,0.5,4.6,0.9,7.8,1.2c9.8,1.1,20,1.6,30.4,1.4c2.3,0,4.1-0.1,5.5-0.3c2-0.2,3.8-0.6,5.4-1.2c6.5-2.4,11.5-8.5,15.1-18.3
          c2.4,0.2,4.1,0.3,5.3,0.3c2.1,0.1,3.9,0,5.3-0.2c1.9-0.3,3.5-1,4.9-2.1c1.5-1.2,2.5-2.6,2.8-4.3c0.3-1.7,0-3.6-1.1-5.9
          c-1.4-2.5-2.3-4.4-2.9-5.6c-0.4-1.1-0.8-2.4-1.1-4c-0.3-1.8-0.5-3.2-0.7-4.1c-1.7-9.3-5-16.7-10.1-22c-1.4-1.4-3.1-2.9-5.2-4.6
          c-1.2-1-3.1-2.3-5.6-4.1c-1.2-0.9-3-2.2-5.4-4c-2.1-1.5-4-2.6-5.7-3.5C103.6,92.8,99.7,91.8,95.3,91.2 M418.7,93.5
          c-3.6-0.3-6.6-0.4-8.8-0.3c-3.2,0.1-6.1,0.6-8.6,1.5c-3.5,1.2-7.1,3.4-10.8,6.7c-6,5.2-10.8,11.5-14.4,18.8
          c-3.6,7.3-5.6,14.9-6.1,22.8c-2.4,0.7-4.3,2.2-5.6,4.4c-1.4,2.3-1.7,4.5-0.8,6.6c1,2.3,3,4,6.2,4.9c1,0.3,2.4,0.6,4,0.9
          c2.3,0.4,3.7,0.6,4,0.6c5,1,10.7,3.8,17,8.2c1.2,0.8,2.9,2,5.2,3.6c2,1.3,3.8,2.4,5.5,3.1c5.6,2.4,12.6,2.9,21.2,1.6
          c5.3-0.8,9.5-2.1,12.7-3.9c1-0.5,3.4-2.1,7.2-4.8c2.9-2.1,5.4-3.4,7.6-4.1c1.1-0.3,3.8-0.7,8.1-1.2c3.3-0.3,5.9-1.1,7.6-2.2
          c2.2-1.5,3.8-3.9,4.7-6.9c0.7-2.5,1-5.5,0.8-8.9c-0.2-3.5-0.8-7.3-1.8-11.6c-0.6-2.6-1.6-6.3-3.1-11.3c-0.9-2.9-1.5-5-2-6.3
          c-0.9-2.3-1.9-4.3-3-5.9c-2.7-4.1-6.9-7.3-12.4-9.7c-4.1-1.8-9.4-3.2-15.9-4.3C432.1,94.9,425.8,94.2,418.7,93.5z" />
          </g>
        </g>
      </g>
    </g>
    <g id="body_mc" transform="matrix( 1, 0, 0, 1, -0.75,-12.45) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="body_solid_0_Layer0_0_FILL">
            <path class="st3" d="M380.4,69.6l-2.8-0.1l-5.3-3.1l-3.7-0.6c-11.7-7.5-29.1-17.3-52.1-29.5c-23.1-12.1-43.2-18.7-60.4-19.6
          c-17.2-1-41-1.6-71.3-1.8c-30.3-0.3-55.1,0.2-74.3,1.3l-37,2.8L57,19.4l-4.4,1.2c-2.5,1.2-2.7,2.9-0.4,5l5.4,1.9l-6.7,6.2
          C45.4,39,40.6,44.1,36.1,49c-7.3,8.1-12.7,15.2-16.2,21.1l-0.2,0.2c-1.1,1-1.6,2-1.6,3C16,77.5,14.9,81.1,15,84l0.1,21.3
          c0,0.8-0.3,1.5-0.7,2.2l-1.3,1.8c-1.2,1.4-2.2,3-3,4.7c-0.7,1-2,1.5-3.9,1.5l-1.3,2.4l-1.5,14l2.6,15c0.5,3.1,1.2,5.4,2.1,6.9
          c6,10.6,16.4,15.7,31.1,15.5L39,153c-0.4-7.4,1.3-14.8,4.9-22.3c7.3-14.9,20.9-22.5,40.9-22.8c20.7-0.3,34.8,8.7,42.5,26.9
          c2.7,6.5,4.4,13.7,5.2,21.8c0.5,6,0.5,11.4-0.1,16.2l240.3,3.1c-0.9-11.3,0.4-22.5,4-33.8c1.7-5.3,3.8-9.9,6.2-13.9
          c9.9-14.1,23.6-20.5,41.1-19.4c14,0.8,24.8,6.3,32.3,16.3c2.2,2.8,4.1,6.1,5.7,9.7l1.4,4c2.9,9.4,3.7,20.9,2.5,34.5l34-0.5
          l7.8-2.2c5.2-1.8,7.8-3.7,8-5.5c0.1-1.9,0.5-6.4,1.2-13.4l1-10.1l-0.4-6.7c-4.6-16.3-14.4-28.4-29.4-36.2
          c-10.1-5.2-20.7-9.4-31.8-12.5L446,83.6c-14-2.8-28-5.3-42.1-7.3c-7.1-1.2-14.1-2.9-20.9-5.2L380.4,69.6z" />
          </g>
        </g>
      </g>
    </g>
    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="windows_dark_trim_0_Layer2_0_FILL">
            <path class="st4" d="M38.3,156.8l-0.1-7.8l-25.5-0.6C18.9,154.2,27.4,157,38.3,156.8 M372,163.4c-0.2-2.4-0.3-4.5-0.2-6.2
          l-239.6-5.8c0,3.2-0.2,6.2-0.5,8.9L372,163.4z" />
            <path class="st5" d="M38.2,140.5c-0.3-6,0.8-12.1,3.1-18.2c-12.9,1.8-25.8,0.6-38.6-3.6l-0.1,0.7l1.1,7.5l1.4,7.5
          c0.5,3.1,1.2,5.4,2.1,6.9c1.6,2.7,3.4,5.1,5.6,7.2l25.5,0.6L38.2,140.5 M371.8,157.2c0-2,0.1-3.5,0.5-4.6l-207.5-6
          c-10.2-0.5-18-4.1-23.6-10.6c-1.2-1.5-2.3-3-3.2-4.7l-8.6-0.7c1.1,4.2,1.9,8.8,2.4,13.6c0.2,2.5,0.4,4.9,0.4,7.2L371.8,157.2
           M515,153.7l0-0.2h-49.3l-0.3,5.9l-0.2,2.5l34-0.5l7.8-2.2C512.3,157.5,514.9,155.6,515,153.7z" />
          </g>
        </g>
      </g>
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="windows_dark_trim_0_Layer1_0_FILL">
​
            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="28.7031" y1="376.905" x2="47.3532" y2="366.13" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#FFFFFF" />
              <stop offset="1" style="stop-color:#000000" />
            </linearGradient>
            <path class="st6" d="M24.4,50.1l1.6-0.9l1.2-0.1h11.1c0.3-3.3,4.7-10.1,13.4-20.3l12.9-14.3h-7.6C44.6,25.2,33.7,37.1,24.4,50.1
          z" />
​
            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="192.7066" y1="367.8313" x2="181.7566" y2="367.8313" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#808080" />
              <stop offset="1" style="stop-color:#000000" />
            </linearGradient>
            <path class="st7" d="M185.4,6.6h-1.5l9.5,51l1.6,0.2L185.4,6.6z" />
​
            <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="185.8066" y1="332.6562" x2="185.8066" y2="426.6562" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#FFFFFF" />
              <stop offset="1" style="stop-color:#000000" />
            </linearGradient>
            <path class="st8" d="M186.2,6.4l0.3,0L186.2,6.4l-1.1-0.1L186.2,6.4z" />
            <path d="M186.6,6.3l-0.1,0.1l1,0h1.1L186.6,6.3 M194.8,6.8l-0.4,0l-4.6-0.2l-2.3-0.1l-1,0l-0.3,0l-0.8,0.2l9.6,51.2l12.2,0.9
          L194.8,6.8z" />
​
            <radialGradient id="SVGID_6_" cx="260.7316" cy="256.8209" r="248.45" gradientTransform="matrix(1 0 0 -0.6035 -54 300.8459)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#FFFFFF" />
              <stop offset="1" style="stop-color:#090909" />
            </radialGradient>
            <path class="st9" d="M93.9,33.9c-0.2,1.8,0,3.5,0.6,5.1c1.9,5.1,7.2,8.2,16.1,9.4c14.2,2,41.6,5,82.1,9.1l0.5,0h0.3l-9.5-51V6.2
          c-11.9,0-23.9,0.1-36,0.4c-25.9,0.6-39.5,1.6-41,3.1c-1.4,1.5-3.9,5.6-7.6,12.3l-5,9.7L93.9,33.9 M331.5,42.1
          c-8-5-17-10-27-15.2c-19.9-10.3-34.5-15.8-44-16.6l-65.7-3.6l12.3,51.9l117,8.8l2.4-3.4l0.6-7.9c0.1-1.2,0.5-2.4,1-3.6
          c1-2.4,2.5-3.6,4.4-3.5L331.5,42.1z" />
​
            <radialGradient id="SVGID_7_" cx="260.7316" cy="305.6562" r="22.8" gradientTransform="matrix(1 0 0 -1 85.95 379)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#7B7B7B" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st10" d="M332.4,42.8l-0.6-0.3l1,6.9c-1.9-0.1-3.4,1.1-4.4,3.5c-0.5,1.2-0.9,2.4-1,3.6l-0.5,7.5l0,0.3l-2.4,3.4
          l35.4,3.7c-0.9-3.3-2.7-6.9-5.5-11c-4.1-5.9-9.2-10.8-15.3-14.5L332.4,42.8z" />
          </g>
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer1_0_1_STROKES" class="st11" d="M327.1,56.1c0.1-1.2,0.5-2.4,1-3.6c1-2.4,2.5-3.6,4.4-3.5
        l-1-6.9 M326.8,64.1l0.4-8" />
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer1_0_2_STROKES" class="st12" d="M326.8,64.1l0.5-7.5c0.1-1.2,0.5-2.4,1-3.6
        c1-2.4,2.5-3.6,4.4-3.5l-1-6.9 M326.7,64.4l0-0.3" />
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer1_0_3_STROKES" class="st13" d="M332.4,42.8l6.5,3.2c6.4,3.7,11.8,8.6,15.9,14.7
        c2.5,3.6,4.2,6.9,5.2,9.9" />
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer1_0_4_STROKES" class="st14" d="M331.5,42.1c-8-5-17-10-27-15.2c-19.9-10.3-34.5-15.8-44-16.6
        l-65.7-3.6 M57.1,14.4h7.6L51.8,28.7c-8.7,10.2-13.2,17-13.4,20.3H27.2L26,49.2l-1.6,0.9 M194.8,6.8l-0.4,0l-4.6-0.2l-2.3-0.1
        l-1,0 M186.6,6.3l1.9,0.1l1.2,0.1 M186.5,6.4l-0.3-0.1h-1.1l1.1,0.1 M185.1,6.3h-0.7" />
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer1_0_5_STROKES" class="st15" d="M207.2,58.6l117,8.8 M94.3,31.7l-0.5,2.2
        c-0.2,1.8,0,3.5,0.6,5.1c1.9,5.1,7.2,8.2,16.1,9.4c14.2,2,41.6,5,82.1,9.1l0.5,0" />
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer1_0_6_STROKES" class="st16" d="M183.9,6.2c-11.9,0-23.9,0.1-36,0.4
        c-25.9,0.6-39.5,1.6-41,3.1c-1.4,1.5-3.9,5.6-7.6,12.3l-5,9.7" />
        </g>
      </g>
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="windows_dark_trim_0_Layer0_0_FILL">
​
            <radialGradient id="SVGID_8_" cx="260.7316" cy="305.6562" r="13.05" gradientTransform="matrix(1 0 0 -1 66.1 365.75)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#7B7B7B" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st17" d="M323.7,62.7l0,1.2l22.6,4l-0.2-1.1L323.7,62.7z" />
            <path class="st18" d="M324.2,58.8l-0.4,1.8l-0.1,1.5l-0.1,0.6l22.4,4.1l-0.4-2.2l-0.4-1.9L324.2,58.8z" />
​
            <radialGradient id="SVGID_9_" cx="260.7316" cy="305.6562" r="13.05" gradientTransform="matrix(1 0 0 -1 66.1 365.75)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#B7B7B7" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st19" d="M341.6,52.8c-2.1-3.1-4.6-4.7-7.5-4.7c-2.9,0-5.4,1.5-7.4,4.7c-1.2,1.8-2,3.8-2.5,6l21,3.8l-0.1-0.6
          C344.2,58.1,343,55,341.6,52.8z" />
          </g>
        </g>
        <g>
          <path id="windows_dark_trim_0_Layer0_0_1_STROKES" class="st15" d="M324.2,58.8c0.5-2.2,1.3-4.2,2.5-6c2.1-3.1,4.5-4.7,7.4-4.7
        c2.9,0,5.4,1.5,7.5,4.7c1.4,2.1,2.6,5.2,3.5,9.2l0.1,0.6l0.4,1.9l0.4,2.2 M323.7,62.7l0.1-0.6l0.1-1.5l0.4-1.8l21,3.8
         M346.1,66.8l-22.4-4.1" />
        </g>
      </g>
    </g>
    <g id="wheel1" transform="matrix( 1.0999755859375, 0, 0, 1.0999755859375, -177.5,47) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <g>
            <g id="wheel_0_Layer0_0_FILL">
              <path d="M265.5,57.3c-7.9-7.9-17.4-11.8-28.5-11.8s-20.6,3.9-28.5,11.8c-3.9,3.9-6.8,8.2-8.8,12.9c-2,4.8-3,9.9-3,15.5
            c0,11.1,3.9,20.6,11.8,28.5c7.9,7.9,17.4,11.8,28.5,11.8s20.6-3.9,28.5-11.8c4.2-4.2,7.3-8.8,9.2-13.9
            c1.7-4.5,2.5-9.3,2.5-14.5C277.3,74.6,273.4,65.1,265.5,57.3 M246.3,54.7c0.6,0.2,1.2,0.4,1.8,0.6c4.3,1.5,8.3,4.1,11.8,7.6
            l2.9,3.2c0.3,0.4,0.7,0.9,0.9,1.3c3.7,5.2,5.6,11.1,5.7,17.7c0,0.2,0,0.4,0,0.7v1c-0.1,3.7-0.8,7.2-2,10.5
            c-1.1,3-2.8,5.8-4.9,8.3c-0.8,1-1.7,2-2.6,3c-3.5,3.6-7.5,6.1-11.9,7.6c-3.4,1.2-7,1.8-10.9,1.8c-3.4,0-6.6-0.4-9.6-1.3
            c-0.4-0.1-0.8-0.3-1.2-0.4c-2.3-0.8-4.5-1.9-6.6-3.2l-2.2-1.6c-1.1-0.9-2.2-1.8-3.3-2.9c-1-1-1.9-2-2.8-3.1
            c-0.4-0.5-0.7-1-1.1-1.5l0,0c-3.7-5.3-5.6-11.4-5.6-18.2c0-0.2,0-0.5,0-0.7c0.1-4.3,0.9-8.2,2.4-11.9c0.7-1.6,1.5-3.1,2.4-4.6
            c0.3-0.4,0.5-0.8,0.8-1.2c1.1-1.6,2.4-3.1,3.8-4.5c3.2-3.2,6.7-5.5,10.5-7.1l0.7-0.2l1.6-0.3l9.3-1.8h0.8
            C240.3,53.4,243.4,53.8,246.3,54.7z" />
              <path class="st20" d="M206.3,84.3c-0.6,0.2-1.1,0.5-1.6,0.8c0,0.2,0,0.5,0,0.7c0,6.9,1.8,12.9,5.6,18.2l0,0
            c0.4,0.5,0.7,1,1.1,1.5c1.2-0.2,2.3-0.5,3.2-0.9c0.1,0,0.1-0.1,0.1-0.1c-0.7-0.8-1.3-1.5-1.8-2.3l-0.1-0.1
            c-3.3-4.8-5-10.2-5-16.4c0-0.7,0-1.4,0.1-2.1C207.4,83.9,206.9,84.1,206.3,84.3 M227.2,55.5l-0.3-0.2l-1.6,0.3l-0.7,0.2
            c-3.8,1.6-7.3,3.9-10.5,7.1c-1.4,1.4-2.7,2.9-3.8,4.5c-0.3,0.4-0.5,0.8-0.8,1.2c0.7,0.9,1.4,1.7,2.2,2.4
            c0.4-0.6,0.8-1.2,1.2-1.8l3.4-4.1c2.8-2.9,6-5,9.4-6.4l0.6-0.2l3.3-0.7C229,57.1,228.2,56.3,227.2,55.5 M237,118.1
            c3.9,0,7.6-0.6,10.9-1.8c0.1-0.8,0.1-1.7,0.1-2.6c0-0.3,0-0.6-0.1-0.9c-3.4,1.4-7.1,2.1-11,2.1c-3,0-5.9-0.4-8.6-1.2
            c-0.8-0.2-1.5-0.5-2.3-0.8c0,0.3,0,0.5,0,0.8c0,0.8,0,1.7,0.1,2.7c0.4,0.1,0.8,0.3,1.2,0.4C230.5,117.7,233.7,118.1,237,118.1
             M266.6,84.1c-0.2-0.1-0.3-0.1-0.5-0.2c0,0.6,0.1,1.2,0.1,1.9v0.9c-0.1,3.4-0.7,6.5-1.8,9.4c-1.2,3.1-2.9,5.9-5.2,8.5
            c0.3,0.1,0.6,0.2,0.9,0.3c0.9,0.3,1.7,0.5,2.6,0.7c2.1-2.6,3.7-5.4,4.9-8.3c1.2-3.3,1.9-6.8,2-10.5v-1c0-0.2,0-0.4,0-0.7
            C268.5,84.7,267.6,84.4,266.6,84.1 M248.1,55.3c-0.6-0.2-1.2-0.4-1.8-0.6c-0.6,0.6-1.1,1.2-1.6,1.8c-0.3,0.3-0.5,0.6-0.8,0.9
            c1.1,0.2,2.1,0.5,3.1,0.9c3.9,1.4,7.4,3.6,10.6,6.8l2.6,2.8c0.5,0.7,1,1.4,1.5,2.2c0.8-0.9,1.4-1.8,2-2.8
            c-0.3-0.4-0.6-0.9-0.9-1.3l-2.9-3.2C256.4,59.3,252.4,56.8,248.1,55.3z" />
​
              <radialGradient id="SVGID_10_" cx="373.4391" cy="241.2901" r="55.6" gradientTransform="matrix(1.1 0 0 -1.1 -173.54 350.5321)" gradientUnits="userSpaceOnUse">
                <stop offset="0" style="stop-color:#FFFFFF" />
                <stop offset="0.4" style="stop-color:#8C8C8C" />
                <stop offset="0.6941" style="stop-color:#F7F7F7" />
              </radialGradient>
              <path class="st21" d="M246.3,54.7c-2.9-0.8-6-1.2-9.2-1.2h-0.8l-9.3,1.8l0.3,0.2c0.9,0.8,1.8,1.6,2.6,2.4
            c2,2.2,3.4,4.7,4.1,7.3c1,3.6,0.6,6.6-1.3,8.9c-1.9,2.3-4.8,3.3-8.6,2.9c-3.8-0.4-7.3-2-10.7-4.8c-0.5-0.4-1-0.8-1.4-1.2
            c-0.8-0.8-1.6-1.6-2.2-2.4c-0.9,1.5-1.7,3-2.4,4.6c-1.5,3.7-2.4,7.6-2.4,11.9c0.5-0.3,1.1-0.5,1.6-0.8c0.6-0.2,1.1-0.4,1.7-0.7
            c3.5-1.1,6.9-1.4,10.1-0.7c3.7,0.8,6.1,2.6,7.3,5.4c1.1,2.8,0.6,5.8-1.5,8.9c-2,3.2-5.1,5.6-9.1,7.2c0,0-0.1,0.1-0.1,0.1
            c-1,0.4-2,0.7-3.2,0.9c0.8,1.1,1.8,2.1,2.8,3.1c1.1,1.1,2.2,2,3.3,2.9l2.2,1.6c2.1,1.4,4.3,2.4,6.6,3.2c-0.1-1-0.1-1.9-0.1-2.7
            c0-0.3,0-0.5,0-0.8c0.1-4.1,1.2-7.7,3.2-10.6c2.2-3.1,4.8-4.7,7.8-4.7c3,0,5.6,1.6,7.8,4.7c2,2.9,3.1,6.4,3.2,10.5
            c0,0.3,0.1,0.6,0.1,0.9c0,0.9-0.1,1.8-0.1,2.6c4.4-1.5,8.4-4.1,11.9-7.6c1-1,1.8-1.9,2.6-3c-0.9-0.2-1.7-0.4-2.6-0.7
            c-0.3-0.1-0.6-0.2-0.9-0.3c-3.8-1.3-6.8-3.4-9-6.1c-2.3-3-3-5.9-2.1-8.8c0.9-2.9,3.1-4.9,6.8-5.9c3.5-1.1,7.3-1,11.3,0.2
            c0.2,0,0.3,0.1,0.5,0.2c1,0.3,1.9,0.7,2.8,1.1c-0.1-6.7-2-12.6-5.7-17.7c-0.6,1-1.2,1.9-2,2.8c-0.1,0.1-0.2,0.2-0.2,0.3
            c-2.8,3.4-6,5.7-9.6,6.7c-3.6,1-6.6,0.6-9-1.3c-2.3-1.9-3.3-4.8-3-8.6c0.3-3.4,1.7-6.7,4.1-9.8c0.2-0.3,0.5-0.6,0.8-0.9
            C245.2,55.8,245.7,55.2,246.3,54.7 M237.1,75.9c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.7,0.9,0.7,1.4c0,0.5-0.2,0.9-0.7,1.3
            c-0.4,0.4-0.8,0.6-1.3,0.6c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-1,0.6-1.4
            C236.1,76.1,236.6,75.9,237.1,75.9 M244.9,81.5c0.5,0,1,0.2,1.4,0.5c0.4,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,0.9-0.6,1.3
            c-0.4,0.4-0.8,0.6-1.4,0.6c-0.5,0-0.9-0.2-1.3-0.6c-0.4-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-1,0.6-1.4
            C243.9,81.7,244.4,81.5,244.9,81.5 M243.5,91.3c0.4,0.4,0.6,0.8,0.6,1.3c0,0.5-0.2,1-0.6,1.3c-0.4,0.4-0.8,0.6-1.4,0.6
            c-0.5,0-0.9-0.2-1.3-0.6c-0.4-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-0.9,0.6-1.3c0.4-0.4,0.8-0.6,1.3-0.6
            C242.7,90.8,243.1,91,243.5,91.3 M227.7,82.1c0.4-0.4,0.9-0.5,1.4-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.6,0.9,0.6,1.4
            c0,0.5-0.2,0.9-0.6,1.3c-0.4,0.4-0.8,0.6-1.3,0.6c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.5-0.8-0.5-1.3
            C227.1,82.9,227.3,82.5,227.7,82.1 M232.2,94.6c-0.5,0-0.9-0.2-1.4-0.6c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3
            c0.4-0.4,0.9-0.6,1.4-0.6c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.8,0.6,1.3c0,0.5-0.2,1-0.6,1.3C233.2,94.4,232.8,94.6,232.2,94.6z
            " />
              <path class="st22" d="M230.9,94c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.8,0.6-1.3c0-0.5-0.2-0.9-0.6-1.3
            c-0.4-0.4-0.8-0.6-1.4-0.6c-0.5,0-0.9,0.2-1.4,0.6c-0.4,0.4-0.5,0.8-0.5,1.3C230.3,93.2,230.5,93.7,230.9,94 M229.1,81.5
            c-0.5,0-1,0.2-1.4,0.5c-0.4,0.4-0.5,0.9-0.5,1.4c0,0.5,0.2,0.9,0.5,1.3c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,0.9-0.2,1.3-0.6
            c0.4-0.4,0.6-0.8,0.6-1.3c0-0.5-0.2-1-0.6-1.4C230,81.7,229.6,81.5,229.1,81.5 M244.1,92.7c0-0.5-0.2-0.9-0.6-1.3
            c-0.4-0.4-0.8-0.6-1.4-0.6c-0.5,0-0.9,0.2-1.3,0.6c-0.4,0.4-0.6,0.8-0.6,1.3c0,0.5,0.2,1,0.6,1.3c0.4,0.4,0.8,0.6,1.3,0.6
            c0.5,0,1-0.2,1.4-0.6C243.9,93.7,244.1,93.2,244.1,92.7 M246.2,82.1c-0.4-0.4-0.8-0.5-1.4-0.5c-0.5,0-0.9,0.2-1.3,0.5
            c-0.4,0.4-0.6,0.9-0.6,1.4c0,0.5,0.2,0.9,0.6,1.3c0.4,0.4,0.8,0.6,1.3,0.6c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.8,0.6-1.3
            C246.8,82.9,246.6,82.5,246.2,82.1 M238.4,76.5c-0.4-0.4-0.8-0.5-1.3-0.5c-0.5,0-1,0.2-1.4,0.5c-0.4,0.4-0.6,0.9-0.6,1.4
            c0,0.5,0.2,0.9,0.6,1.3c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,0.9-0.2,1.3-0.6c0.4-0.4,0.7-0.8,0.7-1.3
            C239,77.3,238.8,76.9,238.4,76.5z" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g id="wheel2" transform="matrix( 1.0999755859375, 0, 0, 1.0999755859375, 158.5,47) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <g>
            <g id="wheel_0_Layer0_0_FILL_1_">
              <path d="M265.5,57.3c-7.9-7.9-17.4-11.8-28.5-11.8s-20.6,3.9-28.5,11.8c-3.9,3.9-6.8,8.2-8.8,12.9c-2,4.8-3,9.9-3,15.5
            c0,11.1,3.9,20.6,11.8,28.5c7.9,7.9,17.4,11.8,28.5,11.8s20.6-3.9,28.5-11.8c4.2-4.2,7.3-8.8,9.2-13.9
            c1.7-4.5,2.5-9.3,2.5-14.5C277.3,74.6,273.4,65.1,265.5,57.3 M246.3,54.7c0.6,0.2,1.2,0.4,1.8,0.6c4.3,1.5,8.3,4.1,11.8,7.6
            l2.9,3.2c0.3,0.4,0.7,0.9,0.9,1.3c3.7,5.2,5.6,11.1,5.7,17.7c0,0.2,0,0.4,0,0.7v1c-0.1,3.7-0.8,7.2-2,10.5
            c-1.1,3-2.8,5.8-4.9,8.3c-0.8,1-1.7,2-2.6,3c-3.5,3.6-7.5,6.1-11.9,7.6c-3.4,1.2-7,1.8-10.9,1.8c-3.4,0-6.6-0.4-9.6-1.3
            c-0.4-0.1-0.8-0.3-1.2-0.4c-2.3-0.8-4.5-1.9-6.6-3.2l-2.2-1.6c-1.1-0.9-2.2-1.8-3.3-2.9c-1-1-1.9-2-2.8-3.1
            c-0.4-0.5-0.7-1-1.1-1.5l0,0c-3.7-5.3-5.6-11.4-5.6-18.2c0-0.2,0-0.5,0-0.7c0.1-4.3,0.9-8.2,2.4-11.9c0.7-1.6,1.5-3.1,2.4-4.6
            c0.3-0.4,0.5-0.8,0.8-1.2c1.1-1.6,2.4-3.1,3.8-4.5c3.2-3.2,6.7-5.5,10.5-7.1l0.7-0.2l1.6-0.3l9.3-1.8h0.8
            C240.3,53.4,243.4,53.8,246.3,54.7z" />
              <path class="st20" d="M206.3,84.3c-0.6,0.2-1.1,0.5-1.6,0.8c0,0.2,0,0.5,0,0.7c0,6.9,1.8,12.9,5.6,18.2l0,0
            c0.4,0.5,0.7,1,1.1,1.5c1.2-0.2,2.3-0.5,3.2-0.9c0.1,0,0.1-0.1,0.1-0.1c-0.7-0.8-1.3-1.5-1.8-2.3l-0.1-0.1
            c-3.3-4.8-5-10.2-5-16.4c0-0.7,0-1.4,0.1-2.1C207.4,83.9,206.9,84.1,206.3,84.3 M227.2,55.5l-0.3-0.2l-1.6,0.3l-0.7,0.2
            c-3.8,1.6-7.3,3.9-10.5,7.1c-1.4,1.4-2.7,2.9-3.8,4.5c-0.3,0.4-0.5,0.8-0.8,1.2c0.7,0.9,1.4,1.7,2.2,2.4
            c0.4-0.6,0.8-1.2,1.2-1.8l3.4-4.1c2.8-2.9,6-5,9.4-6.4l0.6-0.2l3.3-0.7C229,57.1,228.2,56.3,227.2,55.5 M237,118.1
            c3.9,0,7.6-0.6,10.9-1.8c0.1-0.8,0.1-1.7,0.1-2.6c0-0.3,0-0.6-0.1-0.9c-3.4,1.4-7.1,2.1-11,2.1c-3,0-5.9-0.4-8.6-1.2
            c-0.8-0.2-1.5-0.5-2.3-0.8c0,0.3,0,0.5,0,0.8c0,0.8,0,1.7,0.1,2.7c0.4,0.1,0.8,0.3,1.2,0.4C230.5,117.7,233.7,118.1,237,118.1
             M266.6,84.1c-0.2-0.1-0.3-0.1-0.5-0.2c0,0.6,0.1,1.2,0.1,1.9v0.9c-0.1,3.4-0.7,6.5-1.8,9.4c-1.2,3.1-2.9,5.9-5.2,8.5
            c0.3,0.1,0.6,0.2,0.9,0.3c0.9,0.3,1.7,0.5,2.6,0.7c2.1-2.6,3.7-5.4,4.9-8.3c1.2-3.3,1.9-6.8,2-10.5v-1c0-0.2,0-0.4,0-0.7
            C268.5,84.7,267.6,84.4,266.6,84.1 M248.1,55.3c-0.6-0.2-1.2-0.4-1.8-0.6c-0.6,0.6-1.1,1.2-1.6,1.8c-0.3,0.3-0.5,0.6-0.8,0.9
            c1.1,0.2,2.1,0.5,3.1,0.9c3.9,1.4,7.4,3.6,10.6,6.8l2.6,2.8c0.5,0.7,1,1.4,1.5,2.2c0.8-0.9,1.4-1.8,2-2.8
            c-0.3-0.4-0.6-0.9-0.9-1.3l-2.9-3.2C256.4,59.3,252.4,56.8,248.1,55.3z" />
​
              <radialGradient id="SVGID_11_" cx="67.9779" cy="241.2901" r="55.6" gradientTransform="matrix(1.1 0 0 -1.1 162.4599 350.5321)" gradientUnits="userSpaceOnUse">
                <stop offset="0" style="stop-color:#FFFFFF" />
                <stop offset="0.4" style="stop-color:#8C8C8C" />
                <stop offset="0.6941" style="stop-color:#F7F7F7" />
              </radialGradient>
              <path class="st23" d="M246.3,54.7c-2.9-0.8-6-1.2-9.2-1.2h-0.8l-9.3,1.8l0.3,0.2c0.9,0.8,1.8,1.6,2.6,2.4
            c2,2.2,3.4,4.7,4.1,7.3c1,3.6,0.6,6.6-1.3,8.9c-1.9,2.3-4.8,3.3-8.6,2.9c-3.8-0.4-7.3-2-10.7-4.8c-0.5-0.4-1-0.8-1.4-1.2
            c-0.8-0.8-1.6-1.6-2.2-2.4c-0.9,1.5-1.7,3-2.4,4.6c-1.5,3.7-2.4,7.6-2.4,11.9c0.5-0.3,1.1-0.5,1.6-0.8c0.6-0.2,1.1-0.4,1.7-0.7
            c3.5-1.1,6.9-1.4,10.1-0.7c3.7,0.8,6.1,2.6,7.3,5.4c1.1,2.8,0.6,5.8-1.5,8.9c-2,3.2-5.1,5.6-9.1,7.2c0,0-0.1,0.1-0.1,0.1
            c-1,0.4-2,0.7-3.2,0.9c0.8,1.1,1.8,2.1,2.8,3.1c1.1,1.1,2.2,2,3.3,2.9l2.2,1.6c2.1,1.4,4.3,2.4,6.6,3.2c-0.1-1-0.1-1.9-0.1-2.7
            c0-0.3,0-0.5,0-0.8c0.1-4.1,1.2-7.7,3.2-10.6c2.2-3.1,4.8-4.7,7.8-4.7c3,0,5.6,1.6,7.8,4.7c2,2.9,3.1,6.4,3.2,10.5
            c0,0.3,0.1,0.6,0.1,0.9c0,0.9-0.1,1.8-0.1,2.6c4.4-1.5,8.4-4.1,11.9-7.6c1-1,1.8-1.9,2.6-3c-0.9-0.2-1.7-0.4-2.6-0.7
            c-0.3-0.1-0.6-0.2-0.9-0.3c-3.8-1.3-6.8-3.4-9-6.1c-2.3-3-3-5.9-2.1-8.8c0.9-2.9,3.1-4.9,6.8-5.9c3.5-1.1,7.3-1,11.3,0.2
            c0.2,0,0.3,0.1,0.5,0.2c1,0.3,1.9,0.7,2.8,1.1c-0.1-6.7-2-12.6-5.7-17.7c-0.6,1-1.2,1.9-2,2.8c-0.1,0.1-0.2,0.2-0.2,0.3
            c-2.8,3.4-6,5.7-9.6,6.7c-3.6,1-6.6,0.6-9-1.3c-2.3-1.9-3.3-4.8-3-8.6c0.3-3.4,1.7-6.7,4.1-9.8c0.2-0.3,0.5-0.6,0.8-0.9
            C245.2,55.8,245.7,55.2,246.3,54.7 M237.1,75.9c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.7,0.9,0.7,1.4c0,0.5-0.2,0.9-0.7,1.3
            c-0.4,0.4-0.8,0.6-1.3,0.6c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-1,0.6-1.4
            C236.1,76.1,236.6,75.9,237.1,75.9 M244.9,81.5c0.5,0,1,0.2,1.4,0.5c0.4,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,0.9-0.6,1.3
            c-0.4,0.4-0.8,0.6-1.4,0.6c-0.5,0-0.9-0.2-1.3-0.6c-0.4-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-1,0.6-1.4
            C243.9,81.7,244.4,81.5,244.9,81.5 M243.5,91.3c0.4,0.4,0.6,0.8,0.6,1.3c0,0.5-0.2,1-0.6,1.3c-0.4,0.4-0.8,0.6-1.4,0.6
            c-0.5,0-0.9-0.2-1.3-0.6c-0.4-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-0.9,0.6-1.3c0.4-0.4,0.8-0.6,1.3-0.6
            C242.7,90.8,243.1,91,243.5,91.3 M227.7,82.1c0.4-0.4,0.9-0.5,1.4-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.6,0.9,0.6,1.4
            c0,0.5-0.2,0.9-0.6,1.3c-0.4,0.4-0.8,0.6-1.3,0.6c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.5-0.8-0.5-1.3
            C227.1,82.9,227.3,82.5,227.7,82.1 M232.2,94.6c-0.5,0-0.9-0.2-1.4-0.6c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3
            c0.4-0.4,0.9-0.6,1.4-0.6c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.8,0.6,1.3c0,0.5-0.2,1-0.6,1.3C233.2,94.4,232.8,94.6,232.2,94.6z
            " />
              <path class="st22" d="M230.9,94c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.8,0.6-1.3c0-0.5-0.2-0.9-0.6-1.3
            c-0.4-0.4-0.8-0.6-1.4-0.6c-0.5,0-0.9,0.2-1.4,0.6c-0.4,0.4-0.5,0.8-0.5,1.3C230.3,93.2,230.5,93.7,230.9,94 M229.1,81.5
            c-0.5,0-1,0.2-1.4,0.5c-0.4,0.4-0.5,0.9-0.5,1.4c0,0.5,0.2,0.9,0.5,1.3c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,0.9-0.2,1.3-0.6
            c0.4-0.4,0.6-0.8,0.6-1.3c0-0.5-0.2-1-0.6-1.4C230,81.7,229.6,81.5,229.1,81.5 M244.1,92.7c0-0.5-0.2-0.9-0.6-1.3
            c-0.4-0.4-0.8-0.6-1.4-0.6c-0.5,0-0.9,0.2-1.3,0.6c-0.4,0.4-0.6,0.8-0.6,1.3c0,0.5,0.2,1,0.6,1.3c0.4,0.4,0.8,0.6,1.3,0.6
            c0.5,0,1-0.2,1.4-0.6C243.9,93.7,244.1,93.2,244.1,92.7 M246.2,82.1c-0.4-0.4-0.8-0.5-1.4-0.5c-0.5,0-0.9,0.2-1.3,0.5
            c-0.4,0.4-0.6,0.9-0.6,1.4c0,0.5,0.2,0.9,0.6,1.3c0.4,0.4,0.8,0.6,1.3,0.6c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.8,0.6-1.3
            C246.8,82.9,246.6,82.5,246.2,82.1 M238.4,76.5c-0.4-0.4-0.8-0.5-1.3-0.5c-0.5,0-1,0.2-1.4,0.5c-0.4,0.4-0.6,0.9-0.6,1.4
            c0,0.5,0.2,0.9,0.6,1.3c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,0.9-0.2,1.3-0.6c0.4-0.4,0.7-0.8,0.7-1.3
            C239,77.3,238.8,76.9,238.4,76.5z" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="matrix( 1, 0, 0, 1, -49.1,-16) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="door_handle_0_Layer0_0_FILL">
​
            <radialGradient id="SVGID_12_" cx="-66.6122" cy="93.9" r="7.1" fx="-66.6122" fy="90.5588" gradientTransform="matrix(0 -1 -1 0 356.2816 28.3316)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#000000;stop-opacity:0.1529" />
              <stop offset="1" style="stop-color:#000000;stop-opacity:0.502" />
            </radialGradient>
            <path class="st24" d="M262.2,99.8c1.9,0,3.5-0.5,4.8-1.6c0.7-0.5,1.2-1.1,1.5-1.8h-12.6c0.3,0.7,0.8,1.3,1.5,1.8
          C258.8,99.3,260.4,99.8,262.2,99.8 M268.5,92.1l-0.2-0.2l-1.3-1.5c-1.3-1.1-2.9-1.6-4.8-1.6s-3.5,0.5-4.8,1.6l-1.3,1.5l-0.1,0.2
          H268.5z" />
            <path class="st25" d="M268.6,96.4h1.8c0.6,0,1.1-0.2,1.5-0.7l0.5-0.8H249l0.5,0.8c0.4,0.4,0.9,0.7,1.6,0.7h4.8H268.6
           M272.1,92.9l-0.2-0.2c-0.4-0.4-0.9-0.6-1.5-0.6h-1.9H256h-4.9c-0.6,0-1.1,0.2-1.6,0.6l-0.2,0.2H272.1z" />
            <path class="st26" d="M272.5,94.2c0-0.5-0.1-0.9-0.4-1.3h-22.8c-0.3,0.4-0.4,0.8-0.4,1.3v0l0.1,0.7h23.4L272.5,94.2L272.5,94.2z
          " />
          </g>
        </g>
      </g>
    </g>
    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="shading_and_lights_0_Layer2_0_FILL">
            <path class="st27" d="M41.8,77.8l-1.1-2.4l0.6,1.4l0,0.2L41.8,77.8z" />
            <path class="st28" d="M14.4,81.4V82l29.4,1l-0.6-1.6H14.4z" />
            <path class="st29" d="M14.4,73.3c-0.1,0.8-0.1,0.8-0.2-0.1l0.2,8.2h28.9L43.1,81l-1.3-3.2L41.4,77l0-0.2l-0.6-1.4
          c-0.2-0.5-0.4-1-0.6-1.4C30.8,74.5,22.2,74.3,14.4,73.3z" />
​
            <radialGradient id="SVGID_13_" cx="260.7316" cy="305.6562" r="15.1" gradientTransform="matrix(1 0 0 -1 -233.5 375.7)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#FF0000" />
              <stop offset="1" style="stop-color:#B80505" />
            </radialGradient>
            <path class="st30" d="M15.6,64.2l-0.1,0.4c-0.6,2.3-0.9,4.8-1,7.3l-0.1,1.2c7.8,1,16.4,1.2,25.7,0.7c-1-2.6-1.8-5.2-2.3-7.9
          l-0.6-2.9C32,62.7,24.8,63.1,15.6,64.2z" />
            <path class="st31" d="M17,60.8c-0.6,1.1-1.1,2.3-1.4,3.4c9.2-1.2,16.4-1.5,21.7-1L36,53.7l-11.9,1c-2.6,1-4.8,2.6-6.5,5L17,60.8
          z" />
​
            <radialGradient id="SVGID_14_" cx="260.7316" cy="305.6562" r="84.7" gradientTransform="matrix(1 0 0 -1 226.7 482)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#000000" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st32" d="M513.6,147.3l0.4,0.1l0.5-6.4c-0.6,2.5-2.5,3.8-5.8,3.9c-4-0.2-6.8-0.2-8.4,0.1c1.4,1.1,3,1.7,4.9,1.8
          L513.6,147.3z" />
​
            <radialGradient id="SVGID_15_" cx="260.7316" cy="305.6562" r="84.7" gradientTransform="matrix(1 0 0 -1 226.7 482)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#848484" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st33" d="M515.1,134.5l-1-0.1v0.8v5.2l0.5,0L515.1,134.5z" />
​
            <radialGradient id="SVGID_16_" cx="260.7316" cy="305.6562" r="12.8" gradientTransform="matrix(1 0 0 -1 243 447.6)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#515151" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st34" d="M510.3,134.3c-2.8,0-4.8,0.3-6,1c-0.8,0.4-1.6,1.3-2.6,2.8c-0.6,0.9-1.1,1.8-1.4,2.7l-1,2.7l1.1,1.5
          c1.6-0.3,4.4-0.4,8.4-0.1c3.3-0.2,5.2-1.5,5.8-3.9v-0.4l-0.5,0v-5.2v-0.8L510.3,134.3z" />
​
            <radialGradient id="SVGID_17_" cx="260.7316" cy="305.6562" r="16.8" gradientTransform="matrix(1 0 0 -1 238.4 437.2)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#000000" />
              <stop offset="1" style="stop-color:#484848" />
            </radialGradient>
            <path class="st35" d="M504.3,135.3c1.2-0.6,3.2-1,6-1l3.8,0.2l1,0.1l0.5-6.4l-20.8-0.2l0.1,2.9c0.2,2.3,0.5,4.4,1.1,6.4
          c0.8,2.8,1.8,5,3.1,6.6l1.3,1.3l-1.1-1.5l1-2.7c0.3-0.9,0.8-1.8,1.4-2.7C502.7,136.6,503.6,135.7,504.3,135.3z" />
​
            <radialGradient id="SVGID_18_" cx="260.7316" cy="305.6562" r="20.55" fx="272.8198" fy="305.6562" gradientTransform="matrix(1 0 0 -1 225.75 406.3)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#FFFFFF" />
              <stop offset="1" style="stop-color:#959595" />
            </radialGradient>
            <path class="st36" d="M483.2,94.4c-0.5,0.5-0.7,1.2-0.5,2C482.7,95.9,482.9,95.2,483.2,94.4 M496.2,96.4c0.2,1.6,0,2.9-0.7,4.1
          c-0.4,0.6-1.2,1.3-2.4,2c-1.1,0.7-2.6,1.4-4.4,2.2l-0.1,0l0,0.1c3.4-0.2,5.6-0.2,6.6,0.1c-0.7-1.4,0-2.2,2.2-2.4l5.1,0.3
          c-0.7-1.6-1.5-2.8-2.5-3.7C499.2,98.2,497.9,97.3,496.2,96.4 M485.1,92.8l3.5,0.9c1.4,0.7,2.2,2.6,2.2,5.7l-0.2,3
          c-0.3,1.1-0.9,1.9-1.9,2.4c1.8-0.8,3.3-1.5,4.4-2.2l0.1-3.2c0-1.3-1.6-3.6-4.6-6.8c4.2,1.8,6.7,3.1,7.6,3.9
          c1.6,0.9,2.9,1.8,3.9,2.7c1,0.9,1.8,2.1,2.5,3.7c1.2,0.5,2.2,1.8,3,4.2h-8.2c-1.2-1-1.9-1.7-2.1-2.1c-1-0.3-3.2-0.3-6.6-0.1h0
          l-0.2,2.4l19.2,1.6c-0.7-3.8-2.9-7.4-6.5-10.7h0l-0.1,0c-2.7-2.4-6.1-4.7-10.4-6.8c-3.2-1.6-6.6-2.9-10.2-4.2l-4.5-1.3l9.5,19.6
          l1.8-0.8c0-1.4,0-2.4,0-2.9c0.1-0.9,0.4-1.6,0.9-2c1-1.4,1.3-2.2,0.9-2.7l-1.2-1.5l-1.8,1.7c-0.4,0.4-0.9,1.1-1.2,2.2
          c0.4-1.1,0.8-1.8,1.2-2.2l1.8-1.7c-0.3,0,0-0.7,1-1.9c-3.2,0.5-4.9,2-5.1,4.4c-0.3,2.4-0.6,1.9-0.9-1.7c-0.1-0.8,0-1.5,0.5-2
          c-0.7-0.5-2.3-2.5-4.9-5.9C483.5,89.6,485.8,91.1,485.1,92.8z" />
​
            <radialGradient id="SVGID_19_" cx="260.7316" cy="305.6562" r="819.2" gradientTransform="matrix(1 0 0 -1 -400 270)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#FFFFFF" />
              <stop offset="1" style="stop-color:#959595" />
            </radialGradient>
            <path class="st37" d="M488.8,104.7c1-0.5,1.6-1.3,1.9-2.4l0.2-3c0-3.1-0.7-5-2.2-5.7c-1,1.2-1.4,1.9-1,1.9l1.2,1.5
          c0.5,0.4,0.2,1.3-0.9,2.7l0.6,5.2h0l0-0.1L488.8,104.7 M497.5,102.5c-2.2,0.1-2.9,0.9-2.2,2.4c0.2,0.4,0.9,1.1,2.1,2.1h8.2
          c-0.8-2.3-1.8-3.7-3-4.2L497.5,102.5 M483.3,94.3l1.9-1.5c0.7-1.7-1.6-3.1-6.9-4.2c2.6,3.4,4.2,5.3,4.9,5.9L483.3,94.3z" />
            <path class="st38" d="M487.1,104.6l-1.8,0.8l0.8,1.7l2.2,0.2l0.2-2.4l-0.6-5.2c-0.4,0.4-0.7,1.1-0.9,2
          C487.1,102.2,487,103.2,487.1,104.6z" />
            <path class="st39" d="M495.5,100.5c0.7-1.1,0.9-2.5,0.7-4.1c-0.9-0.8-3.4-2.1-7.6-3.9c3,3.2,4.5,5.4,4.6,6.8l-0.1,3.2
          C494.3,101.8,495.1,101.1,495.5,100.5z" />
​
            <radialGradient id="SVGID_20_" cx="260.7316" cy="305.6562" r="819.2" gradientTransform="matrix(1 0 0 -1 -400 270)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#FFFFFF" />
              <stop offset="1" style="stop-color:#FFFFFF" />
            </radialGradient>
            <path class="st40" d="M488.7,93.6l-3.5-0.9l-1.9,1.5l-0.1,0.1c-0.3,0.8-0.5,1.5-0.5,2c0.3,3.6,0.6,4.1,0.9,1.7
          C483.8,95.7,485.5,94.2,488.7,93.6z" />
          </g>
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_1_STROKES" class="st41" d="M483.2,94.4c-0.3,0.8-0.5,1.5-0.5,2c0.3,3.6,0.6,4.1,0.9,1.7
        c0.3-2.4,2-3.9,5.1-4.4l-3.5-0.9l-1.9,1.5L483.2,94.4z" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_2_STROKES" class="st42" d="M483.2,94.4c-0.7-0.5-2.3-2.5-4.9-5.9
        c5.2,1.1,7.5,2.5,6.9,4.2 M487.1,104.6c0-1.4,0-2.4,0-2.9c0.1-0.9,0.4-1.6,0.9-2c1-1.4,1.3-2.2,0.9-2.7l-1.2-1.5l-1.8,1.7
        c-0.4,0.4-0.9,1.1-1.2,2.2 M496.2,96.4c0.2,1.6,0,2.9-0.7,4.1c-0.4,0.6-1.2,1.3-2.4,2c-1.1,0.7-2.6,1.4-4.4,2.2l-0.1,0l0,0.1
        c3.4-0.2,5.6-0.2,6.6,0.1c-0.7-1.4,0-2.2,2.2-2.4l5.1,0.3c-0.7-1.6-1.5-2.8-2.5-3.7C499.2,98.2,497.9,97.3,496.2,96.4
        c-0.9-0.8-3.4-2.1-7.6-3.9c3,3.2,4.5,5.4,4.6,6.8l-0.1,3.2 M488.7,93.6c1.4,0.7,2.2,2.6,2.2,5.7l-0.2,3c-0.3,1.1-0.9,1.9-1.9,2.4
         M488.6,104.8L488.6,104.8l-0.6-5.2 M502.6,102.8c1.2,0.5,2.2,1.8,3,4.2h-8.2c-1.2-1-1.9-1.7-2.1-2.1 M483.2,94.4
        c-0.5,0.5-0.7,1.2-0.5,2 M487.6,95.5c-0.3,0,0-0.7,1-1.9" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_3_STROKES" class="st43" d="M514.1,140.5v-5.2" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_4_STROKES" class="st44" d="M37.3,63.2l0.6,2.9c0.5,2.7,1.3,5.3,2.3,7.9 M43.1,81
        l-1.3-3.2 M14.4,73.3l-0.2-0.1l0.2,8.2h28.9L43.1,81 M41.8,77.8L41.4,77l0-0.2l-0.6-1.4 M40.1,74c-9.3,0.5-17.9,0.3-25.7-0.7" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_5_STROKES" class="st45" d="M36,53.7l1.2,9.5" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_6_STROKES" class="st46" d="M40.1,74c0.2,0.5,0.4,1,0.6,1.4l1.1,2.4" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer2_0_7_STROKES" class="st47" d="M43.1,81l11.3,26" />
        </g>
      </g>
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="shading_and_lights_0_Layer1_0_FILL">
​
            <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="256.8184" y1="220.7962" x2="260.5684" y2="286.4712" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#000000" />
              <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
            </linearGradient>
            <path class="st48" d="M43.2,118.2c2.9-5.9,6.8-10.7,11.7-14.3c-16.6,5.2-33.3,5.2-49.9,0l-0.9,1.5l-1.5,14l2.6,15
          c0.5,3.1,1.2,5.4,2.1,6.9c6,10.6,16.4,15.7,31.1,15.5l-0.1-16.3C37.9,133.1,39.5,125.7,43.2,118.2 M517.3,129l-0.6-9.3
          c-1.6-4.7-4.2-9.7-7.9-15.1l-60.9-0.1c13.8,10.1,19.7,28.3,17.6,54.4l38.8-0.1l2.9-0.8c5.2-1.8,7.8-3.7,8-5.5
          c0.1-1.9,0.5-6.4,1.2-13.5L517.3,129z" />
​
            <linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="248.606" y1="221.7011" x2="252.3809" y2="288.2511" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#000000;stop-opacity:0.7137" />
              <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
            </linearGradient>
            <path class="st49" d="M373.2,141c0.7-3.8,1.6-7.5,2.8-11.3c3.6-11.3,9-19.7,16.4-25.2c-94.1-7.3-187.1-7.5-279.2-0.4
          c5.7,4.4,10.1,10.5,13.4,18.3c1.9,4.5,3.3,9.4,4.2,14.7c0.4,2.3,0.7,4.7,1,7.1c0.5,5.9,0.5,11.1-0.1,15.8l240-0.9
          C371.6,153,372.1,147,373.2,141z" />
          </g>
        </g>
      </g>
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <g>
          <g id="shading_and_lights_0_Layer0_0_FILL">
​
            <radialGradient id="SVGID_23_" cx="260.7316" cy="305.6562" r="92.85" gradientTransform="matrix(1 0 0 -1 225.6 486)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#515151" />
              <stop offset="1" style="stop-color:#000000" />
            </radialGradient>
            <path class="st50" d="M515.9,142.8l1.2-15.3l-22.8-0.2l0.1,3.2c0.2,2.5,0.6,4.9,1.2,7c0.5,1.9,1.1,3.5,1.9,4.9
          c2,3.7,4.7,5.6,8.3,5.8l9.2,0.5l0.4,0L515.9,142.8z" />
​
            <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="494.7816" y1="233.9063" x2="494.7816" y2="258.9062" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3922" />
              <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
            </linearGradient>
            <path class="st51" d="M520.1,142.9l-4.2-0.1l-0.5,5.8l-0.4,0l-9.2-0.5c-3.6-0.1-6.4-2.1-8.3-5.8l-28.1-0.8
          c1.9,3.5,5.7,6.5,11.3,9l39.3,1.5V142.9z" />
​
            <linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="256.6816" y1="240.6563" x2="256.6816" y2="265.6562" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3922" />
              <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
            </linearGradient>
            <path class="st52" d="M370.7,140.6c-3,0-6.1,0-9,0c-0.4,2.8-0.8,5.6-1.4,8.4l8.4,0.2L370.7,140.6 M191.2,144l12.7,0.6
          c-0.8-3.1-1.6-6.3-2.4-9.4l-58.8-1.6c1.9,3.5,5.7,6.5,11.3,9l7.8,0.7C169.8,143.7,179.7,144,191.2,144 M203.9,144.6L203.9,144.6
          l23.7,1.2c21,0.4,42,0.9,62.9,1.5l69.8,1.8c0.5-2.8,1-5.6,1.4-8.4c-10.3-0.1-20.4-0.8-30.3-1.9l-129.8-3.6
          C202.2,138.3,203,141.5,203.9,144.6z" />
​
            <linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="185.8316" y1="458.5562" x2="185.8316" y2="338.7563" gradientTransform="matrix(1 0 0 -1 0 400)">
              <stop offset="0" style="stop-color:#000000;stop-opacity:0.4" />
              <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
            </linearGradient>
            <path class="st53" d="M193.9,57.6c0,0.1,0,0.2,0,0.4l2.8-0.2L193.9,57.6 M320.5,26.5l-4.1-2.1C293.4,12.3,273.2,5.7,256,4.8
          c-17.2-1-41-1.6-71.3-1.8c-30.3-0.3-55.1,0.2-74.3,1.3l-37,2.8L57,7.4l-4.4,1.2c-2.4,1.2-2.7,2.8-0.8,4.8l4.9,1.8L50,21.4
          c-5.3,5.2-10.2,10.2-14.7,15.1L20.2,55.9l-1.1,1.7l-0.1,0.1L19,57.8h16.8L35.7,59c0.4,1.5,3.4,1.9,8.8,1.2l67.6,2.6l81.8-4.8
          c0-0.1,0-0.2,0-0.4l-1.2-0.1c-40.5-4.1-67.9-7.1-82.1-9.1c-8.9-1.2-14.2-4.4-16.1-9.4c-0.6-1.6-0.8-3.3-0.6-5.1l0.5-2.2l5-9.7
          c3.6-6.7,6.2-10.8,7.6-12.3c1.4-1.5,15.1-2.5,41-3.1l31.6-0.4l35.6,1.4l45.4,2.7c9.5,0.8,24.1,6.3,44,16.6
          c10,5.2,19,10.2,27,15.2l1,6.9c-1.9-0.1-3.4,1.1-4.4,3.5c-0.5,1.2-0.9,2.4-1,3.6l-0.1,1.7h25.6
          C338.8,42.8,328.1,32.4,320.5,26.5z" />
​
            <radialGradient id="SVGID_27_" cx="260.7316" cy="253.192" r="293.7" gradientTransform="matrix(1 0 0 -0.5863 22.95 303.4826)" gradientUnits="userSpaceOnUse">
              <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.302" />
              <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
            </radialGradient>
            <path class="st54" d="M44.5,60.2c-5.4,0.7-8.4,0.3-8.8-1.2c-0.4,5.3-0.9,9.9-1.5,13.8c-16.8,21.6-15.5,31.7,4,30.5
          c1.5,2.3,2.6,4.5,3.1,6.8c1.7-2.3,3.5-4.6,5.6-6.7c10.2-10.1,22.4-15.2,36.8-15.2c14.4,0,26.6,5.1,36.8,15.2
          c1.1,1.1,3.1,2.2,6.1,3.4c7.2-10.9,17.8-16.4,31.8-16.5c18.6-0.1,27.4,0.1,26.4,0.6c3.2-0.2,6.4-0.4,9.6-0.6
          c-0.6-8.3-0.9-16.6-0.8-24.8l-81.6-2.8L44.5,60.2 M320.2,26.3l0.2,0.2c7.6,5.9,18.4,16.3,32.2,31.3c3.6,4.4,6.8,8.9,9.6,13.5
          l-168.6-5.8c-0.1,8.3,0.1,16.6,0.8,24.8c17.2-0.8,34.4-1,51.5-0.5l105.4,2.6c3.8,0.1,7.7,0.3,11.4,0.7c-0.7-6.8-1.7-13.6-3-20.3
          c1.3,6.8,2.3,13.6,3,20.3c3.3,0.4,6.7,0.9,10,1.5c3.6,0.8,6.8,2.2,9.6,4.2l5.2,4.2c11.9-10,25.6-13.5,41.4-10.6
          c13.1,2.6,24.9,8.4,35.3,17.5c5.2,4.5,11.1,7.4,17.9,8.8c11.4,2.3,23,2.6,34.6,0.9c-3.1-8.7-7.5-16-13.3-22.1
          c-6-6.4-13.5-11.3-22.4-14.8l-3.9-1.6c-13.5-5.1-27.3-9-41.5-11.6l-13.8-2.7c-13.2-2.6-26.4-5.4-39.4-8.4l-2.6-1.5l-2.8-0.1
          l-5.3-3l-3.6-0.6h-0.1l-24.1-14.2L320.2,26.3z" />
          </g>
        </g>
        <g>
          <path id="shading_and_lights_0_Layer0_0_1_STROKES" class="st55" d="M359.7,72.8c1.3,6.8,2.3,13.6,3,20.4
        c1.5,15.8,1.2,31.6-1,47.4c-0.4,2.8-0.8,5.7-1.4,8.5c-0.2,1.1-0.4,2.1-0.6,3.2" />
        </g>
        <g>
          <path id="shading_and_lights_0_Layer0_0_2_STROKES" class="st56" d="M193.7,65.6c-0.1,8.3,0.1,16.6,0.8,24.8
        c1.1,14.9,3.5,29.8,7.1,44.8 M194,56.3c0,0.4,0,0.9-0.1,1.3c0,0.1,0,0.2,0,0.4c-0.1,2.5-0.2,5.1-0.2,7.6 M204,144.6L204,144.6
        c-0.9-3.1-1.7-6.3-2.5-9.4" />
        </g>
      </g>
    </g>
  </svg>
</div>
<div class="flexContainer dark footer">
  <h1>more text</h1>
</div>

Live

xxxxxxxxxx
 
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700&display=swap");
​
.dark {
  background: #263238;
}
​
.dark h1 {
  color: #ccc;
}
​
body {
  font-family: "Barlow Semi Condensed", sans-serif;
  color: #333;
  margin: 0;
}
​
svg {
  //border:1px solid red;
}
​
.carWrapper {
  background: rgb(255, 255, 255, 1);
}
​
.pin-spacer {
  //  background:rgb(100, 255, 0, 0.1)
}
​
.flexContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
​

Live

xxxxxxxxxx
 
let width = window.innerWidth;
let speed = 350; //pixels per second
let endX = width - 500;
​
let circumference = document.querySelector("#wheel1").getBBox().width * Math.PI;
let rotation = (endX / circumference) * 360;
let duration = endX / speed;
let ease = "sine.inOut";
​
let tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".carWrapper",
      start: "top 50%",
      end: "bottom 50%",
      markers: true,
      scrub: 1, // true: mousewheel behavior weird. Number increases, animation lasts longer.
      pin: true // car Y will be pined.
    }
  })
  .to("svg", { duration: duration, x: endX, ease: ease })
  .to(
    "#wheel1, #wheel2",
    {
      duration: duration,
      rotation: rotation,
      transformOrigin: "50% 50%",
      ease: ease
    },
    0
  );
​

This Pen is owned by guanghui on CodePen.

See more by @wghglory on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript