Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Houses stagger Animations GSAP 3</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<html>
    <head>
        <title>Quy</title>
        <link rel = "stylesheet" href="./style.css">
    </head>
    <body>
      <div class="cursor"></div>
      <div class = "follower"></div>
       <div class ="container">
        <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 400">
          <defs>
            <radialGradient id="radial-gradient" cx="-56.33" cy="294.87" r="4.82" gradientTransform="matrix(-0.77, -1.17, 1.17, -0.77, -360.64, 512.06)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#ff3217"/>
              <stop offset="0.2" class ="s2"/>
              <stop offset="0.4" class ="s3"/>
              <stop offset="0.6" class ="s4"/>
              <stop offset="0.8" class ="s5"/>
              <stop offset="1" class ="s1"/>
            </radialGradient>
            <radialGradient id="radial-gradient-2" cx="-74.52" cy="295.59" r="4.82" gradientTransform="matrix(-0.77, -1.17, 1.17, -0.77, -360.64, 512.06)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#ff3217"/>
              <stop offset="0.2" class ="s2_2"/>
              <stop offset="0.4" class ="s3_2"/>
              <stop offset="0.6" class ="s4_2"/>
              <stop offset="0.8" class ="s5_2"/>
              <stop offset="1" class ="s1_2"/>
            </radialGradient>
            <radialGradient id="radial-gradient-3" cx="-81.32" cy="291.41" r="4.82" xlink:href="#radial-gradient"/>
          </defs>
          <title>houes_graphic</title>
     
          <path id="city_back" d="M65.88,326V287.54c10.59-2.77,14.94-1.57,19,5.17V273.16c5.27,0,10.32-.67,15,.33,1.9.4,3,4.44,4.5,6.83l-1.11,1L114.89,285c0-7.27,0-13.21,0-19.16,0-2.53.15-4.61,3.47-4.86,1.21-.09,3-.77,3.43-1.69,2.39-5.27,6.77-3.49,10.38-2.77,2.94.58,5.72,2.39,8.33,4,.82.52,1.18,2.24,1.22,3.43.15,3.8.06,7.62.06,12.1l15.45,1.35V173.94c5.44,0,9.85.29,14.19-.14,1.72-.16,3.29-1.89,4.77-2.81,1.57.7,3.76,2.49,6,2.55,7,.19,14-.19,20.94-.51,4.38-.2,7.22.86,6.61,6.08-.13,1.13.33,3,1.11,3.44,4.1,2.17,1.85,5.47,1.66,8.27-.16,2.15-1.52,4.24-1.55,6.37-.15,12.67-.5,25.35,0,38,.58,13.34,2.08,26.65,3.21,40.31a31.05,31.05,0,0,0,3.15.4c6.45.13,7.48,1.18,7.58,7.92,0,1.67-.37,3.48.17,5s2,2.49,3.06,3.72l1.19-.83c.54-35,1.07-70,1.61-105.35h24.91l1.9,10.69-1.27.58,4.46,2c0,22.92-.13,45.91.09,68.89.06,5.62,1.24,11.22,2,17.68l8.22-5.85a22.73,22.73,0,0,1,.09-4.51c.15-.85,1.29-1.52,2-2.28a10,10,0,0,1,1.55,2.2,39.69,39.69,0,0,1,1.09,4.36l1.62-.23V240.15h24.65c.23-4.23.42-7.83.62-11.8l4.36-.22c1.08,3.69,2.06,7.05,3.17,10.88l4.56,1.26v13l8.72-1.47v11.35l1.91.63c.68-1.43,1.93-2.84,2-4.28.18-10,.08-20,.12-30,0-2-.76-4.47,2.7-4.84.65-.07,1.5-1.95,1.57-3,.21-3.15-.12-6.34.14-9.49.15-1.72.65-4.46,1.71-4.86,4.28-1.62,3.5-4.95,3.51-8.11,0-7,0-14,0-21,0-1.15-.05-3.16.4-3.31,6-2,3.15-6.88,3.31-10.41.39-9,.13-17.95.13-25.81,6.83-5.86,13.37-7.84,21.68-1.4,0,9.88-.09,20.82.12,31.75,0,1.44,1.67,2.82,2.45,4.29a11.28,11.28,0,0,1,1.37,3.35q2.06,12.21,3.88,24.46a37.19,37.19,0,0,1,.16,5.49q0,39.49,0,79a12.61,12.61,0,0,0,.08,3.48,11.5,11.5,0,0,0,1.81,2.85,17.82,17.82,0,0,0,1.78-2.41,15.55,15.55,0,0,0,.67-3.32l7.81,2c2.93-7.68-4.34-19.45,6.94-27.85V229.6c0-9.5.13-19-.06-28.5-.08-4.54,1.72-6.42,6.23-6.09a58.82,58.82,0,0,0,8.5,0c3.41-.23,6.81-.77,10.68-1.23v75.61l10.64.51c0,5.84.08,11.3,0,16.76-.08,3.47,1.53,3.94,4.3,2.93.62-12.1,1.24-24.12,1.88-36.48h16.34v-36.9c5.57.38,6.32-2.25,6.08-6.11-.29-4.78-.07-9.59-.07-15.44h26.43c0,5.18-.18,9.46.06,13.72.17,3-1.51,6.54,2.42,8.83.8.46.4,3.13.4,4.78,0,22.45,0,44.9,1,67.35v-8.62l4.94-1.3V264.53c1.58-.11,2.55-.21,3.51-.25,4.8-.21,7-2.46,7-7.26q0-40,0-80c0-8.16,1.77-10,9.63-10h19.92c0,7.57-.41,14.55.11,21.47.59,7.92,2.1,15.77,3,23.67.57,4.78.76,9.6,1.16,14.4.68,8.17,1.39,16.35,2.08,24.51l10.61,7.55c.59,4.67,1.33,10.64,2.22,17.75,4.1-.46,8.16-.46,12-1.45,4.74-1.23,7-.5,8.51,4.3,1.2.06,2.51.18,3.81.18a17.48,17.48,0,0,0,2-.12c3.57-5.7,6.41-10.62,9.66-15.26,1.52-2.16,9.67-.72,12.75,2.65V221.38c9.73,0,18.69-.11,27.62.17.9,0,2.41,2.43,2.46,3.77.23,7.65.11,15.31.11,23.42h6.61c2.16-8.3-1.86-17.67,2.45-25.33h25.61c.48,3.79,1,7.86,1.58,12.63l9.17.41c.65,4.92,1.81,10,1.9,15,.27,14.16.08,28.33.11,42.5,0,1.92.22,3.85.34,5.78l12.31-.93V326Z" transform="translate(-0.33)" fill="#a0d7c5"/>
          <path id="city_back_2" d="M629.33,326.2V297.64c-8.54-2.06-12-1.17-15.31,3.84V287c-4.25,0-8.33-.5-12.12.24-1.53.3-2.44,3.3-3.63,5.07l.89.77-9.34,2.69c0-5.4,0-9.82,0-14.23,0-1.89-.13-3.43-2.8-3.61-1-.07-2.43-.58-2.76-1.26-1.93-3.91-5.47-2.59-8.37-2.06a22.11,22.11,0,0,0-6.72,3c-.66.38-1,1.66-1,2.54-.12,2.83,0,5.67,0,9l-12.46,1V213.26c-4.39,0-7.94.21-11.44-.1-1.39-.13-2.65-1.42-3.84-2.1-1.27.53-3,1.85-4.84,1.9-5.62.14-11.25-.14-16.88-.38-3.53-.15-5.81.64-5.32,4.52.1.83-.27,2.25-.9,2.55-3.31,1.61-1.49,4.07-1.34,6.14.13,1.6,1.23,3.16,1.25,4.74.12,9.41.4,18.83,0,28.22-.46,9.91-1.68,19.8-2.59,29.94a23.31,23.31,0,0,1-2.54.3c-5.2.1-6,.88-6.11,5.89,0,1.23.3,2.58-.13,3.68s-1.62,1.85-2.47,2.76l-1-.61c-.43-26-.86-52-1.3-78.26H476.17l-1.53,7.94,1,.43-3.6,1.47c0,17,.11,34.11-.07,51.18,0,4.17-1,8.33-1.61,13.13l-6.63-4.35a15.43,15.43,0,0,0-.07-3.34c-.12-.64-1-1.14-1.6-1.7a7.41,7.41,0,0,0-1.26,1.64,27.47,27.47,0,0,0-.87,3.23l-1.31-.17V262.44H438.76c-.17-3.14-.33-5.82-.49-8.77l-3.52-.16c-.86,2.74-1.65,5.24-2.56,8.08l-3.67.93v9.65l-7-1.1v8.44L420,280c-.55-1.06-1.55-2.12-1.57-3.19-.14-7.42-.07-14.85-.1-22.28,0-1.5.61-3.32-2.17-3.59-.53-.06-1.21-1.45-1.27-2.26-.17-2.34.1-4.71-.11-7-.12-1.28-.53-3.31-1.38-3.61-3.45-1.2-2.83-3.68-2.83-6,0-5.2,0-10.4,0-15.6,0-.86,0-2.36-.32-2.46-4.85-1.46-2.54-5.12-2.67-7.74-.31-6.65-.1-13.33-.1-19.17-5.51-4.35-10.79-5.82-17.49-1,0,7.34.08,15.47-.09,23.59,0,1.07-1.34,2.09-2,3.18a8.24,8.24,0,0,0-1.11,2.49q-1.65,9.08-3.13,18.17a25.19,25.19,0,0,0-.13,4.08q0,29.34,0,58.68a8.54,8.54,0,0,1-.07,2.58,8.79,8.79,0,0,1-1.46,2.13,12.54,12.54,0,0,1-1.43-1.8,10.91,10.91,0,0,1-.55-2.46l-6.29,1.46c-2.36-5.7,3.49-14.44-5.6-20.68V254.6c0-7-.1-14.11,0-21.17.07-3.38-1.39-4.77-5-4.52a53.83,53.83,0,0,1-6.84,0c-2.76-.18-5.49-.57-8.62-.92v56.17l-8.57.38c0,4.33-.07,8.39,0,12.45.06,2.58-1.23,2.92-3.47,2.17-.5-9-1-17.91-1.51-27.1H321V244.65c-4.49.28-5.1-1.66-4.91-4.53.24-3.56.06-7.13.06-11.47H294.8c0,3.84.15,7-.05,10.19-.14,2.23,1.22,4.86-1.95,6.56-.64.34-.32,2.32-.32,3.55,0,16.67,0,33.35-.77,50v-6.4l-4-1V280.55c-1.27-.09-2.05-.16-2.83-.19-3.86-.16-5.66-1.83-5.66-5.39q0-29.72,0-59.42c0-6.07-1.43-7.44-7.77-7.43H255.41c0,5.62.33,10.81-.09,15.94-.47,5.89-1.69,11.72-2.44,17.59-.45,3.55-.61,7.13-.93,10.69q-.82,9.11-1.68,18.21l-8.55,5.61c-.47,3.46-1.07,7.9-1.79,13.18-3.31-.34-6.58-.34-9.64-1.08-3.82-.91-5.63-.36-6.86,3.2-1,.05-2,.14-3.08.13a13.62,13.62,0,0,1-1.64-.09c-2.88-4.23-5.17-7.89-7.79-11.33-1.22-1.61-7.79-.54-10.28,2V248.49c-7.84,0-15.06-.08-22.27.13-.72,0-1.94,1.81-2,2.8-.19,5.68-.1,11.37-.1,17.4H171c-1.74-6.17,1.5-13.12-2-18.82H148.35c-.38,2.82-.79,5.84-1.27,9.38l-7.39.31c-.53,3.65-1.46,7.39-1.54,11.15-.21,10.52-.06,21-.09,31.56,0,1.43-.17,2.86-.27,4.3l-9.92-.69V326.2Z" transform="translate(-0.33)" fill="#9cb9af"/>
          <rect x="36.29" y="325.72" width="674.87" height="15.4" rx="7.42" ry="7.42" fill="#faf3dd"/>
          <path id = "grass" d="M50.18,313H692.4a10.89,10.89,0,0,1,10.89,10.89v0a2.12,2.12,0,0,1-2.12,2.12H41.41a2.12,2.12,0,0,1-2.12-2.12v0A10.89,10.89,0,0,1,50.18,313Z" fill="#a1e887"/>
          <g>
            <rect x="38.04" y="337.99" width="667.13" height="4.63" fill="#867878"/>
            <g id="gear_2">
              <rect x="658.55" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="630.02" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="601.49" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="572.96" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="544.43" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="516.2" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="487.67" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="459.14" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="430.61" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="402.08" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="373.54" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="345.01" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="316.48" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="287.95" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="259.41" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="231.19" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="202.66" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="174.13" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="145.6" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="117.06" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="88.53" y="335.88" width="20.78" height="2.55" fill="#867878"/>
              <rect x="60" y="335.88" width="20.78" height="2.55" fill="#867878"/>
            </g>
          </g>
          <g>
            <rect x="42.79" y="326.1" width="666.25" height="4.61" fill="#867878"/>
            <g id="gear_1">
              <rect x="60" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="88.53" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="117.06" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="145.6" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="174.13" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="202.35" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="230.88" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="259.41" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="287.95" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="316.48" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="345.01" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="373.54" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="402.08" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="430.61" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="459.14" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="487.36" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="515.89" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="544.43" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="572.96" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="601.49" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="630.02" y="330.29" width="20.78" height="2.55" fill="#867878"/>
              <rect x="658.55" y="330.29" width="20.78" height="2.55" fill="#867878"/>
            </g>
          </g>
          <g id="wheel_2" data-name="wheel 2">
            <circle cx="361.42" cy="333.2" r="11.2" fill="#c2b4b4"/>
            <path d="M367.85,333.2a3.49,3.49,0,0,0-.07-.85L369,332l-.7-2.26-1.28.42a4.36,4.36,0,0,0-.85-1.13l.78-1.07L365,326.54l-.78,1.13a4.43,4.43,0,0,0-1.35-.42v-1.42h-2.34v1.42a4.57,4.57,0,0,0-1.28.42l-.85-1.13L356.51,328l.85,1.14a6.47,6.47,0,0,0-.78,1.13l-1.35-.42-.71,2.27,1.28.42c0,.28-.07.5-.07.78v.5l-1.28.42.71,2.27,1.21-.42a4.46,4.46,0,0,0,.85,1.2l-.71,1.06,1.91,1.42.71-1a9.47,9.47,0,0,0,1.42.5v1.2h2.34v-1.2a5.33,5.33,0,0,0,1.42-.5l.71,1,1.91-1.42-.71-1a7.78,7.78,0,0,0,.92-1.2l1.14.35.7-2.27-1.2-.35A2,2,0,0,0,367.85,333.2Z" transform="translate(-0.33)" fill="#ebf2fa"/>
          </g>
          <g id="switch">
            <rect x="30.1" y="351.4" width="1.7" height="17.1" transform="translate(-56.21 9.26) rotate(-8.99)" fill="#525174"/>
            <g>
              <circle id="glow_1" class = "ff-glow"cx="28.93" cy="350.81" r="6.72" opacity="0.7" fill="url(#radial-gradient)" style="isolation: isolate"/>
              <circle id = "redsw"cx="28.77" cy="350.3" r="3.1" fill="#ee6055"/>
            </g>
          </g>
          <g id="tree_3">
            <rect x="459.05" y="278.48" width="0.91" height="15.51" transform="translate(770.64 729.04) rotate(-157.04)" fill="#a2561f"/>
            <rect x="455.1" y="279.4" width="1.82" height="34.97" transform="translate(911.69 593.76) rotate(-180)" fill="#a2561f"/>
            <path d="M464.84,269.66a5.47,5.47,0,1,1-5.2,8.19,5.2,5.2,0,0,1-.41-.9,9.37,9.37,0,0,1-3.33.76,5.17,5.17,0,0,1-9.08,1.58,9.42,9.42,0,1,1,2.52-18.6,5.16,5.16,0,0,1,9.63-2.82,5,5,0,0,1,.66,1.94,9.4,9.4,0,0,1,5.21,9.85Z" transform="translate(-0.33)" fill="#92b340"/>
            <circle cx="458.92" cy="269.29" r="2.13" fill="#cbdaa3"/>
            <circle cx="447.25" cy="265.5" r="3.04" fill="#cbdaa3"/>
            <circle cx="446.47" cy="275.09" r="3.34" fill="#cbdaa3"/>
            <ellipse cx="461.27" cy="264.27" rx="6.39" ry="5.97" transform="translate(-70.67 266.39) rotate(-30.04)" fill="#92b340"/>
            <circle cx="454.95" cy="266.67" r="3.34" fill="#cbdaa3"/>
            <circle cx="455.96" cy="278.74" r="6.08" fill="#92b340"/>
            <rect x="452.67" y="289.89" width="0.61" height="11.25" transform="translate(986.94 379.38) rotate(155.8)" fill="#a2561f"/>
          </g>
          <g id="houses">
            <g id="house_1">
              <rect class = "h1_ch" x="240.23" y="278.63" width="19.17" height="29.39" fill="#555b6e"/>
              <polygon points="221.77 277.64 261.67 278.06 256.98 280.05 221.34 280.05 221.77 277.64" fill="#404040"/>
              <polygon points="157.4 318.96 158.98 308.24 146.48 308.16 140.24 318.96 157.4 318.96" fill="#faf9f9"/>
              <polygon points="98.6 318.96 112.98 307.94 90.81 307.8 65.75 317.14 65.75 318.96 98.6 318.96" fill="#faf9f9"/>
              <polygon points="121.19 318.96 132.08 308.06 115.14 307.95 100.78 318.96 121.19 318.96" fill="#faf9f9"/>
              <polygon points="138.95 318.96 145.19 308.15 133.64 308.07 122.76 318.96 138.95 318.96" fill="#faf9f9"/>
              <polygon points="100.78 318.96 115.14 307.95 112.98 307.94 98.6 318.96 100.78 318.96" fill="#bfbfbf"/>
              <polygon points="134.46 307.26 133.67 306.47 132.08 308.06 133.64 308.07 134.46 307.26" fill="#bfbfbf"/>
              <polygon points="122.76 318.96 133.64 308.07 132.08 308.06 121.19 318.96 122.76 318.96" fill="#bfbfbf"/>
              <polygon points="147.13 307.02 146.17 306.47 145.19 308.15 146.48 308.16 147.13 307.02" fill="#bfbfbf"/>
              <polygon points="140.24 318.96 146.48 308.16 145.19 308.15 138.95 318.96 140.24 318.96" fill="#bfbfbf"/>
              <polygon points="160.58 304.97 159.48 304.81 158.98 308.24 160.1 308.25 160.58 304.97" fill="#bfbfbf"/>
              <polygon points="158.53 318.96 160.1 308.25 158.98 308.24 157.4 318.96 158.53 318.96" fill="#bfbfbf"/>
              <polygon class = "h1_ch"points="93.26 315.27 106.89 315.46 137.84 316.69 169.65 316.97 178.46 318.38 188.96 308.18 89.85 307.6 59.18 319.38 93.26 315.27" fill="#bbb" opacity="0.78"/>
              <g>
                <rect class = "h1_ch" x="193.7" y="211.8" width="65.23" height="63.43" fill="#d8eee9"/>
                <polygon points="193.51 240.15 193.22 255.34 247.75 212.03 237.53 211.61 193.51 240.15" fill="#faf9f9"/>
                <polygon points="201.74 273.66 223.19 273.38 257.83 252.93 258.12 247.39 201.74 273.66" fill="#faf9f9"/>
                <rect x="193.79" y="231.06" width="65.18" height="1.7" fill="#555b6e"/>
                <path d="M192.89,212.36V275h66.46V212.36ZM258.3,274H193.94V213.35H258.3Z" transform="translate(-0.33)" fill="#232323"/>
              </g>
              <polygon points="186.53 234.76 186.12 217.08 190.15 209.48 193.34 211.84 186.53 234.76" fill="#5e5e5e"/>
              <rect class = "h1_ch" x="113.63" y="221.4" width="81.2" height="49.77" fill="#ffe8d6"/>
              <polygon points="193.34 274.94 258.43 274.94 258.43 212.18 193.46 212.18 196.35 214.87 193.46 212.18 193.34 212.18 193.34 274.94" fill="none"/>
              <g>
                <polygon points="174.13 245.83 113.78 246.82 113.7 239.37 140.33 228.01 174.13 245.83" fill="#bbb" opacity="0.78"/>
                <polygon points="113.63 253.71 139.76 224.46 187.47 224.86 187.83 269.12 113.7 268.19 113.63 253.71" fill="#bbb" opacity="0.38"/>
                <rect x="158.93" y="231.77" width="23.29" height="37.84" fill="#777c8b"/>
              </g>
              <g>
                <rect x="163.17" y="239.24" width="14.96" height="26.98" fill="#2f2f2f"/>
                <rect x="163.83" y="240.44" width="14.22" height="24.59" fill="#bfaea1"/>
                <rect x="175.53" y="251.19" width="0.5" height="2.73" fill="#d4cac4"/>
                <rect x="175.74" y="252" width="0.13" height="0.39" fill="#908c89"/>
                <rect x="174.33" y="251.68" width="1.56" height="0.26" rx="0.11" ry="0.11" fill="#d4cac4"/>
              </g>
              <rect x="125.16" y="235.84" width="34.65" height="27.55" fill="#89b0ae"/>
              <polygon points="159.05 255.53 166.34 249.09 179.5 263.3 182.15 240.95 182.22 231.77 158.93 231.77 159.05 255.53" fill="#2d2f35" opacity="0.72"/>
              <rect class = "h1_ch" x="118.96" y="274.09" width="89.89" height="34.79" fill="#404453"/>
              <rect class = "h1_ch" x="118.96" y="274.09" width="79.09" height="15.05" fill="#30333e"/>
              <rect x="139.63" y="283.28" width="32.59" height="18.6" transform="translate(448.18 136.66) rotate(90)" fill="#30333e"/>
              <rect x="162.92" y="283.28" width="32.59" height="18.6" transform="translate(471.46 113.37) rotate(90)" fill="#30333e"/>
              <polygon points="190.24 302.35 178.88 293.82 178.88 290.84 179.17 284.17 196.77 266.42 190.24 302.35" fill="#bbb" opacity="0.37"/>
              <circle cx="174.97" cy="253.35" r="0.19" fill="#b5b2b0"/>
              <g>
                <g>
                  <rect x="114.27" y="223.82" width="87.4" height="3.27" fill="#555b6e"/>
                  <rect x="113.92" y="223.25" width="88.39" height="1.04" fill="#bee3db"/>
                </g>
                <rect x="113.92" y="226.45" width="88.39" height="1.06" fill="#89b0ae"/>
                <polygon points="197.2 236.39 123 236.24 114.91 227.58 201.6 227.37 197.2 236.39" fill="#777c8b"/>
                <g>
                  <rect x="116.33" y="228.08" width="83.64" height="0.5" fill="#bbbdc5"/>
                  <rect x="116.96" y="228.75" width="82.69" height="0.48" fill="#bbbdc5"/>
                  <rect x="117.58" y="229.41" width="81.74" height="0.47" fill="#bbbdc5"/>
                  <rect x="118.21" y="230.08" width="80.8" height="0.45" fill="#bbbdc5"/>
                  <rect x="118.83" y="230.75" width="79.85" height="0.43" fill="#bbbdc5"/>
                  <rect x="119.46" y="231.41" width="78.9" height="0.42" fill="#bbbdc5"/>
                  <rect x="120.09" y="232.08" width="77.96" height="0.4" fill="#bbbdc5"/>
                  <rect x="120.71" y="232.75" width="77.01" height="0.39" fill="#bbbdc5"/>
                  <rect x="121.34" y="233.41" width="76.06" height="0.37" fill="#bbbdc5"/>
                  <rect x="121.97" y="234.08" width="75.12" height="0.36" fill="#bbbdc5"/>
                  <rect x="122.59" y="234.75" width="74.17" height="0.34" fill="#bbbdc5"/>
                  <rect x="123.22" y="235.42" width="73.22" height="0.32" fill="#bbbdc5"/>
                </g>
                <path d="M116.83,229l34,2.72s24.38-2,24.52-2S191,228.27,191,228.27l5.54,3.41,1,4.71-74.19-.15Z" transform="translate(-0.33)" fill="#555b6e" opacity="0.64"/>
                <path d="M124.05,231.49c.57-.29,45.51,3.55,45.51,3.55l26.48-.43,1.49,1.78-74.19-.15-2.91-4Z" transform="translate(-0.33)" fill="#2d2f35" opacity="0.72"/>
                <g>
                  <ellipse cx="122.01" cy="229.13" rx="1.03" ry="0.41" fill="#ffe8d6"/>
                  <ellipse cx="122.01" cy="229.05" rx="0.85" ry="0.34" fill="#fffaf7"/>
                </g>
                <g>
                  <ellipse cx="135.6" cy="229.03" rx="1.03" ry="0.41" fill="#ffe8d6"/>
                  <ellipse cx="135.6" cy="228.96" rx="0.85" ry="0.34" fill="#fffaf7"/>
                </g>
                <g>
                  <ellipse cx="147.93" cy="229.03" rx="1.03" ry="0.41" fill="#ffe8d6"/>
                  <ellipse cx="147.93" cy="228.96" rx="0.85" ry="0.34" fill="#fffaf7"/>
                </g>
                <g>
                  <ellipse cx="162.41" cy="229.03" rx="1.03" ry="0.41" fill="#ffe8d6"/>
                  <ellipse cx="162.41" cy="228.96" rx="0.85" ry="0.34" fill="#fffaf7"/>
                </g>
                <g>
                  <ellipse cx="177.98" cy="229.03" rx="1.03" ry="0.41" fill="#ffe8d6"/>
                  <ellipse cx="177.98" cy="228.96" rx="0.85" ry="0.34" fill="#fffaf7"/>
                </g>
                <g>
                  <ellipse cx="124.64" cy="232.29" rx="0.64" ry="0.27" fill="#ffe8d6"/>
                  <ellipse cx="124.64" cy="232.24" rx="0.53" ry="0.22" fill="#fffaf7"/>
                </g>
                <g>
                  <ellipse cx="126.45" cy="235.31" rx="0.49" ry="0.17" fill="#ffe8d6"/>
                  <ellipse cx="126.45" cy="235.28" rx="0.41" ry="0.14" fill="#fffaf7"/>
                </g>
                <polygon points="124.73 236.31 122.96 236.24 114.91 227.58 117.2 227.63 124.73 236.31" fill="#89b0ae"/>
              </g>
              <rect x="126.35" y="236.79" width="32.27" height="25.65" fill="#555b6e"/>
              <rect x="128.33" y="238.94" width="27.58" height="23.29" fill="#434253"/>
              <rect x="159.9" y="236.6" width="1.14" height="30.39" fill="#3c3e46"/>
              <g>
                <polygon points="156.14 243.09 158.67 243.09 158.67 256.65 158.67 258.94 157.05 252.81 156.14 243.09" fill="#bacdd0"/>
                <g>
                  <path d="M157.18,236.72h-2a64.88,64.88,0,0,0,2,13.09c.22.8.42,1.5.6,2.12l1.06,3.44.12-3.84-.43-1.86A65.64,65.64,0,0,1,157.18,236.72Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                  <path d="M157.55,236.72a64.56,64.56,0,0,0,1.4,13l.06.26V236.72Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                </g>
              </g>
              <polygon points="216.42 271.63 178.74 271.72 178.67 270.25 220.33 270.17 216.42 271.63" fill="#555b6e"/>
              <g>
                <ellipse cx="197.29" cy="229.03" rx="1.03" ry="0.41" fill="#ffe8d6"/>
                <ellipse cx="197.29" cy="228.96" rx="0.85" ry="0.34" fill="#fffaf7"/>
              </g>
              <g>
                <g>
                  <path d="M127.38,236.51l-.64,19.74,2.67-4.86c2-5.2,3.91-11,4.09-14.88Z" transform="translate(-0.33)" fill="#bacdd0"/>
                  <path d="M127.59,236.37V254.8l1-3.23c2-5.2,2.51-11.33,2.69-15.2Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                  <path d="M132.53,236.51h-1.82c-.16,5.37-.87,10.88-2.73,15.2l-1.27,4c0-.09,2.1-4.2,2.14-4.28C131.25,246.36,132.12,240.22,132.53,236.51Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                  <path d="M133.69,236.37c-.51,5.3-1.57,10.75-3.72,14.94-.05.09-2.24,3.94-2.27,4l-.11.61c.4-.62,3.58-5.69,4.07-6.49a33.45,33.45,0,0,0,4.52-13.08Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                </g>
                <g>
                  <polygon points="126.29 258.47 126.44 252.74 150.15 236.84 156.59 236.74 126.29 258.47" fill="#e4e5e8"/>
                  <polygon points="160.09 251.65 140.97 263.01 144.38 263.11 159.9 254.02 160.09 251.65" fill="#e4e5e8"/>
                </g>
              </g>
              <g>
                <ellipse cx="131.61" cy="242.64" rx="0.81" ry="0.32" fill="#ffe8d6"/>
                <ellipse cx="131.61" cy="242.7" rx="0.67" ry="0.26" fill="#fffaf7"/>
              </g>
              <g>
                <ellipse cx="129.56" cy="240.17" rx="0.5" ry="0.21" fill="#ffe8d6"/>
                <ellipse cx="129.56" cy="240.2" rx="0.41" ry="0.17" fill="#fffaf7"/>
              </g>
              <g>
                <ellipse cx="128.14" cy="237.8" rx="0.38" ry="0.13" fill="#ffe8d6"/>
                <ellipse cx="128.14" cy="237.82" rx="0.32" ry="0.11" fill="#fffaf7"/>
              </g>
              <g>
                <rect x="125.23" y="236.98" width="34.67" height="0.5" fill="#bbbdc5" opacity="0.2"/>
                <rect x="125.55" y="237.64" width="34.35" height="0.48" fill="#bbbdc5" opacity="0.2"/>
                <rect x="125.87" y="238.31" width="34.03" height="0.47" fill="#bbbdc5" opacity="0.2"/>
                <rect x="126.19" y="238.98" width="33.71" height="0.45" fill="#bbbdc5" opacity="0.2"/>
                <rect x="126.51" y="239.65" width="33.39" height="0.43" fill="#bbbdc5" opacity="0.2"/>
                <rect x="126.83" y="240.31" width="33.07" height="0.42" fill="#bbbdc5" opacity="0.2"/>
                <rect x="127.15" y="240.98" width="32.75" height="0.4" fill="#bbbdc5" opacity="0.2"/>
                <rect x="127.47" y="241.65" width="32.43" height="0.39" fill="#bbbdc5" opacity="0.2"/>
                <rect x="127.79" y="242.31" width="32.11" height="0.37" fill="#bbbdc5" opacity="0.2"/>
                <rect x="128.11" y="242.98" width="31.79" height="0.36" fill="#bbbdc5" opacity="0.2"/>
                <rect x="128.43" y="243.65" width="31.47" height="0.34" fill="#bbbdc5" opacity="0.2"/>
                <rect x="128.76" y="244.31" width="31.15" height="0.32" fill="#bbbdc5" opacity="0.2"/>
              </g>
              <g>
                <rect x="122.86" y="263.08" width="37.91" height="4.05" fill="#faf9f9"/>
                <polygon points="123.57 265.85 123.51 264.14 129.34 263.3 156.59 263.52 123.57 265.85" fill="#bbb" opacity="0.38"/>
              </g>
              <g>
                <ellipse cx="175.75" cy="273.2" rx="0.43" ry="0.17" fill="#ffe8d6"/>
                <ellipse cx="175.75" cy="273.17" rx="0.36" ry="0.14" fill="#fffaf7"/>
              </g>
              <g>
                <path d="M176.8,274.94c0,.08-.17.15-.39.15s-.39-.07-.39-.15.17-.15.39-.15S176.8,274.85,176.8,274.94Z" transform="translate(-0.33)" fill="#ffe8d6"/>
                <path d="M176.73,274.91c0,.07-.14.12-.32.12s-.32,0-.32-.12.14-.12.32-.12S176.73,274.84,176.73,274.91Z" transform="translate(-0.33)" fill="#fffaf7"/>
              </g>
              <g>
                <g>
                  <polygon points="190.12 209.05 190.1 212.32 258.43 212.18 258.43 274.94 193.34 274.94 193.34 273.8 190.1 277.77 190.1 278.06 261.67 278.06 261.67 209.05 190.12 209.05" fill="#ffe8d6"/>
                  <polygon points="194.45 212.36 189.67 219.28 185.98 219.28 190.1 212.32 194.45 212.36" fill="#8c8c8c"/>
                  <polygon points="259.68 212.88 194.08 213.45 190.1 212.32 258.43 212.18 259.68 212.88" fill="#8c8c8c"/>
                </g>
                <polygon points="189.15 219.28 189.91 218.99 193.61 213.35 192.94 213.22 189.15 219.28" fill="#232323"/>
              </g>
              <path d="M200.51,229.92l-21.3.16-.14,3.39s13.54-.41,13.73-.72S200.51,229.92,200.51,229.92Z" transform="translate(-0.33)" fill="#555b6e" opacity="0.64"/>
              <rect x="243.78" y="307.31" width="18.65" height="5.96" fill="#fdfdfd"/>
              <g>
                <path d="M258.29,279.87l.64,19.74-2.67-4.86c-2-5.21-3.91-11-4.09-14.88Z" transform="translate(-0.33)" fill="#bacdd0"/>
                <path d="M258.08,279.72v18.44l-1-3.23c-2-5.21-2.52-11.33-2.7-15.21Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                <path d="M253.14,279.87H255c.16,5.36.87,10.88,2.74,15.2l1.27,4c0-.08-2.11-4.19-2.15-4.28C254.42,289.72,253.56,283.58,253.14,279.87Z" transform="translate(-0.33)" fill="#d6e6ed"/>
                <path d="M252,279.72c.51,5.3,1.57,10.76,3.73,14.95,0,.09,2.23,3.94,2.27,4l.1.61c-.4-.62-3.58-5.69-4.07-6.49a33.44,33.44,0,0,1-4.52-13.09Z" transform="translate(-0.33)" fill="#d6e6ed"/>
              </g>
              <g>
                <rect x="257.98" y="279.55" width="1.42" height="28.47" fill="#89b0ae"/>
                <rect x="240.65" y="278.99" width="18.89" height="0.78" fill="#89b0ae"/>
                <polygon points="243.56 288.5 243.71 299.29 258.05 281.68 257.98 279.55 243.56 288.5" fill="#faf9f9"/>
                <polygon points="258.35 294.25 247.37 297.85 243.87 300.97 243.87 306.56 243.78 307.31 258.17 307.31 258.35 294.25" fill="#faf9f9" opacity="0.38"/>
                <polygon points="262.43 307.31 242.92 307.22 242.54 312.14 235.16 313.09 262.43 313.28 262.43 307.31" fill="#404453" opacity="0.47"/>
              </g>
              <rect x="181.58" y="312.43" width="82.64" height="5.11" rx="2.18" ry="2.18" fill="#bed18c"/>
              <rect x="246.47" y="315.48" width="8.24" height="2.41" rx="1.03" ry="1.03" fill="#ffd6ba"/>
              <g>
                <rect x="186.12" y="308.4" width="1.18" height="8.64" fill="#74534a"/>
                <path d="M185.63,272.16c-2.09,1.68-3.68,9.45-5.33,21.92-1.23,9.3,1.36,13.78,4.23,15.38C182.18,305.37,180.63,289.88,185.63,272.16Z" transform="translate(-0.33)" fill="#6e8630"/>
                <path d="M193.08,294.08c-.85-11.51-3.75-21.82-6.39-22.25a1.33,1.33,0,0,0-1.06.33c-5,17.72-3.45,33.21-1.1,37.3a5.5,5.5,0,0,0,2.64.72C190.7,310.18,194,306.33,193.08,294.08Z" transform="translate(-0.33)" fill="#92b340"/>
                <path d="M190,288.67h0c-.41.06-.78-.38-.78-.91a24,24,0,0,0-.92-6.29c-.15-.54.12-1.08.56-1.1l.29,0a.75.75,0,0,1,.72.68,29.65,29.65,0,0,1,.69,6.89A.73.73,0,0,1,190,288.67Z" transform="translate(-0.33)" fill="#bed18c"/>
              </g>
              <g>
                <polygon class = "h1_ch" points="243.78 313.45 178.88 313.45 178.88 230.35 200.18 230.21 200.89 228.93 243.38 229.12 243.78 313.45" fill="#faf9f9"/>
                <g>
                  <g>
                    <rect x="179.88" y="230.54" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="181.68" y="230.51" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="183.49" y="230.49" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="185.3" y="230.46" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="187.1" y="230.44" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="188.91" y="230.41" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="190.72" y="230.39" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="192.53" y="230.36" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="194.33" y="230.33" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="196.14" y="230.31" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="197.95" y="230.28" width="0.66" height="83.4" fill="#40798c"/>
                    <rect x="199.76" y="230.26" width="0.66" height="83.4" fill="#40798c"/>
                  </g>
                  <g>
                    <rect x="201.27" y="229.31" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="203.08" y="229.29" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="204.88" y="229.26" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="206.69" y="229.23" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="208.5" y="229.21" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="210.31" y="229.18" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="212.11" y="229.16" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="213.92" y="229.13" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="215.73" y="229.1" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="217.54" y="229.08" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="219.34" y="229.05" width="0.66" height="84.06" fill="#40798c"/>
                    <rect x="221.15" y="229.03" width="0.66" height="84.06" fill="#40798c"/>
                  </g>
                  <g>
                    <rect x="222.66" y="229.03" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="224.47" y="229" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="226.28" y="228.98" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="228.09" y="228.95" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="229.89" y="228.92" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="231.7" y="228.9" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="233.51" y="228.87" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="235.32" y="228.85" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="237.12" y="228.82" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="238.93" y="228.79" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="240.74" y="228.77" width="0.66" height="84.34" fill="#40798c"/>
                    <rect x="242.54" y="228.74" width="0.66" height="84.34" fill="#40798c"/>
                  </g>
                </g>
                <polygon points="243.49 299.79 234.12 300.07 230.57 283.6 221.91 262.44 243.21 245.26 243.49 299.79" fill="#bbb" opacity="0.37"/>
                <polygon points="193.51 254.78 190.86 267.94 191.8 279.2 179.2 276.1 178.74 255.77 193.51 254.78" fill="#bbb" opacity="0.37"/>
              </g>
              <g>
                <rect x="197.2" y="271.1" width="4.76" height="42.46" fill="#30333e"/>
                <polygon points="201.18 272.62 199.14 274.89 199.18 301.73 201.3 295.15 201.18 272.62" fill="#3f3f3f"/>
                <polygon points="199.18 301.73 199.19 304.83 201.37 305.75 201.3 295.15 199.18 301.73" fill="#7d7d7d"/>
                <rect class = "h1_ch"x="197.1" y="307.22" width="5.3" height="6.34" fill="#fdfdfd"/>
              </g>
              <g>
                <g>
                  <polygon points="206.57 275.51 103.91 275.51 84.03 270.25 220.33 270.17 206.57 275.51" fill="#555b6e"/>
                  <g>
                    <g>
                      <ellipse cx="115.98" cy="271.17" rx="0.9" ry="0.3" fill="#ffe8d6"/>
                      <ellipse cx="115.98" cy="271.12" rx="0.74" ry="0.25" fill="#fffaf7"/>
                    </g>
                    <g>
                      <ellipse cx="120.99" cy="273.38" rx="0.73" ry="0.18" fill="#ffe8d6"/>
                      <ellipse cx="120.99" cy="273.35" rx="0.6" ry="0.15" fill="#fffaf7"/>
                    </g>
                    <g>
                      <ellipse cx="125.95" cy="275.24" rx="0.56" ry="0.11" fill="#ffe8d6"/>
                      <ellipse cx="125.95" cy="275.22" rx="0.46" ry="0.09" fill="#fffaf7"/>
                    </g>
                    <g>
                      <g>
                        <ellipse cx="142.85" cy="270.96" rx="0.59" ry="0.33" fill="#ffe8d6"/>
                        <ellipse cx="142.85" cy="270.9" rx="0.49" ry="0.27" fill="#fffaf7"/>
                      </g>
                      <g>
                        <ellipse cx="146.15" cy="273.36" rx="0.48" ry="0.19" fill="#ffe8d6"/>
                        <ellipse cx="146.15" cy="273.33" rx="0.4" ry="0.16" fill="#fffaf7"/>
                      </g>
                      <g>
                        <ellipse cx="149.42" cy="275.39" rx="0.37" ry="0.12" fill="#ffe8d6"/>
                        <ellipse cx="149.42" cy="275.37" rx="0.31" ry="0.1" fill="#fffaf7"/>
                      </g>
                    </g>
                    <g>
                      <ellipse cx="175.5" cy="271.14" rx="0.64" ry="0.25" fill="#ffe8d6"/>
                      <ellipse cx="175.5" cy="271.1" rx="0.53" ry="0.2" fill="#fffaf7"/>
                    </g>
                  </g>
                </g>
                <g>
                  <g opacity="0.65">
                    <polygon points="208.22 271.42 86.14 271.28 85.45 270.79 208.22 270.79 208.22 271.42" fill="#c0c3cd"/>
                    <polygon points="86.92 271.9 86.23 271.45 209 271.45 209 272.03 86.92 271.9" fill="#c0c3cd"/>
                    <polygon points="87.71 272.52 87.01 272.11 209.79 272.11 209.79 272.64 87.71 272.52" fill="#c0c3cd"/>
                    <polygon points="88.49 273.15 87.8 272.77 210.57 272.77 210.57 273.25 88.49 273.15" fill="#c0c3cd"/>
                    <polygon points="89.28 273.77 88.58 273.44 211.36 273.44 211.36 273.86 89.28 273.77" fill="#c0c3cd"/>
                    <polygon points="90.06 274.39 89.37 274.1 212.14 274.1 212.14 274.47 90.06 274.39" fill="#c0c3cd"/>
                    <polygon points="212.93 275.08 90.84 275.01 90.15 274.76 212.93 274.76 212.93 275.08" fill="#c0c3cd"/>
                  </g>
                  <g>
                    <g>
                      <polygon points="85.16 274.44 87.72 271.53 125.49 271.81 146.08 271.39 173.77 271.25 188.68 273.31 213.32 272.74 206.57 275.51 92.69 275.65 85.16 274.44" fill="#2d2f35" opacity="0.42"/>
                      <polygon class= "h1_ch" points="104.05 309.16 84.74 313.7 84.03 270.25 104.14 275.51 104.05 309.16" fill="#89b0ae"/>
                      <polygon class = "h1_ch" points="220.33 266.99 84.74 266.99 81.75 266.99 81.48 266.99 81.48 270.17 81.75 270.17 81.75 313.7 84.74 313.7 84.74 270.17 220.33 270.17 220.33 266.99" fill="#ffe8d6"/>
                      <polygon points="98.51 291.55 90.42 292.26 90.42 281.19 98.37 283.88 98.51 291.55" fill="#ffd6ba"/>
                    </g>
                    <polygon points="103.91 275.51 104.05 296.43 102.91 295.39 85.68 270.77 103.91 275.51" fill="#678483" opacity="0.48"/>
                  </g>
                </g>
              </g>
            </g>
            <g id="house_2">
              <g>
                <rect x="433.79" y="240.42" width="0.65" height="3.75" fill="#ccc2bb"/>
                <rect x="425.51" y="243.4" width="8.86" height="0.79" fill="#ccc2bb"/>
              </g>
              <rect class = "h2_ch"x="387.12" y="241.74" width="38.39" height="19.81" fill="#ffefe3"/>
              <rect x="366.74" y="241.89" width="19.74" height="20.46" fill="#bfb3aa"/>
              <polygon points="373.76 221.79 312.5 239.42 435.02 239.73 373.76 221.79" fill="#faf9f9"/>
              <rect x="358.89" y="239.51" width="76.28" height="1.01" fill="#bee3db"/>
              <rect x="359.32" y="240.52" width="74.19" height="1.44" fill="#89b0ae"/>
              <rect class = "h2_ch" x="274.47" y="264" width="109.34" height="52.2" fill="#faf9f9"/>
              <polygon points="373.83 221.7 320.28 238.08 434.57 238.98 373.83 221.7" fill="#e0e0e0"/>
              <polygon points="342.46 222.27 300.97 233.03 372.04 233.22 342.46 222.27" fill="#faf9f9"/>
              <rect x="300.97" y="233.03" width="70.69" height="1.63" fill="#bee3db"/>
              <rect x="302.89" y="234.28" width="67.61" height="1.73" fill="#89b0ae"/>
              <rect class = "h2_ch" x="305.58" y="235.72" width="61.08" height="27.56" fill="#ffefe3"/>
              <g>
                <rect x="320.85" y="236.27" width="31.12" height="25.38" fill="#555b6e"/>
                <rect class="h2_ch"x="321.33" y="237.35" width="30.16" height="23.37" fill="#bee3db"/>
                <rect x="330.51" y="237.28" width="0.5" height="23.7" fill="#555b6e"/>
                <rect x="340.99" y="237.17" width="0.5" height="23.7" fill="#555b6e"/>
                <rect x="330.18" y="237.1" width="0.32" height="8.64" fill="#777c8b"/>
                <rect x="321.18" y="237.06" width="0.47" height="8.64" fill="#777c8b"/>
                <rect x="331.01" y="237.06" width="0.31" height="8.64" fill="#777c8b"/>
                <rect x="340.73" y="236.92" width="0.29" height="8.64" fill="#777c8b"/>
                <rect x="341.46" y="236.92" width="0.29" height="8.64" fill="#777c8b"/>
                <rect x="351.34" y="236.99" width="0.34" height="8.64" fill="#777c8b"/>
                <rect x="321.29" y="245.42" width="30.25" height="0.86" fill="#555b6e"/>
                <rect x="320.93" y="236.67" width="30.68" height="0.65" fill="#404453"/>
                <polygon points="321.48 254.78 321.43 257.23 330.51 250.36 330.56 247.58 321.48 254.78" fill="#faf9f9"/>
                <polygon points="331.08 260.5 331.13 257.47 340.98 251.52 340.93 253.29 331.08 260.5" fill="#faf9f9"/>
                <polygon points="333.15 245.42 331.8 245.32 340.78 237.45 340.83 238.6 333.15 245.42" fill="#faf9f9"/>
                <polygon points="347.99 260.78 346.83 260.88 351.44 246.71 351.49 247.77 347.99 260.78" fill="#faf9f9"/>
              </g>
              <rect x="273.89" y="262.32" width="110.16" height="1.63" fill="#777c8b"/>
              <rect x="362.49" y="279.56" width="14.84" height="33.57" fill="#f6efe8"/>
              <rect class="h2_ch" x="390.29" y="273.22" width="56.62" height="42.59" fill="#ffefe3"/>
              <rect x="389.72" y="261.12" width="57.34" height="1.44" fill="#555b6e"/>
              <rect x="390" y="262.13" width="57.05" height="5.47" fill="#ffefe3"/>
              <rect x="308.75" y="267.03" width="0.91" height="0.24" fill="#bfb3aa"/>
              <g>
                <rect x="278.02" y="275.04" width="1.2" height="41.16" fill="#bfb3aa"/>
                <path d="M275.67,270.27c1.76-.75,3.92-.9,6.87,0l-3,5.05-1.31-.09Z" transform="translate(-0.33)" fill="#ccc2bb"/>
                <rect x="276.87" y="270.59" width="2.4" height="0.56" fill="#555b6e"/>
                <rect x="278.79" y="284.35" width="0.91" height="0.26" fill="#bfb3aa"/>
                <rect x="278.81" y="306.53" width="0.91" height="0.26" fill="#bfb3aa"/>
              </g>
              <rect x="308.78" y="287.84" width="0.91" height="0.24" fill="#bfb3aa"/>
              <g>
                <rect x="284.36" y="278.41" width="0.72" height="1.87" fill="#8f8680"/>
                <rect x="283.88" y="279.13" width="1.1" height="3.51" fill="#bfb3aa"/>
                <rect x="283.98" y="279.46" width="0.89" height="2.83" fill="#d9d1cc"/>
              </g>
              <g>
                <rect x="355.09" y="278.02" width="0.72" height="1.87" transform="translate(710.57 557.92) rotate(-180)" fill="#8f8680"/>
                <rect x="355.19" y="278.74" width="1.1" height="3.51" transform="translate(711.14 560.99) rotate(-180)" fill="#bfb3aa"/>
                <rect x="355.29" y="279.08" width="0.89" height="2.83" transform="translate(711.14 560.99) rotate(-180)" fill="#d9d1cc"/>
              </g>
              <rect class="h2_ch"x="362.97" y="280.65" width="13.88" height="31.39" fill="#e8d7c5"/>
              <rect x="365.71" y="283.35" width="8.55" height="1.44" fill="#555b6e"/>
              <rect x="365.8" y="287.87" width="8.55" height="1.44" fill="#555b6e"/>
              <rect x="365.9" y="293.34" width="8.55" height="1.44" fill="#555b6e"/>
              <rect x="365.8" y="299.01" width="8.55" height="1.44" fill="#555b6e"/>
              <rect x="365.8" y="304.77" width="8.55" height="1.44" fill="#555b6e"/>
              <rect x="375.31" y="290.08" width="0.86" height="9.6" fill="#aea194"/>
              <rect x="362.44" y="280.57" width="0.48" height="31.98" fill="#57514a"/>
              <g>
                <rect class="h2_ch"x="352.64" y="267.51" width="31.31" height="5.47" fill="#555b6e"/>
                <polygon points="383.86 275.29 357.73 275.19 352.64 272.98 383.76 272.79 383.86 275.29" fill="#404453"/>
              </g>
              <polygon points="357.73 275.19 363.88 278.26 372.91 297.95 382.7 293.82 385.78 308.04 390.48 310.25 384.53 275.29 357.73 275.19" fill="#534b4b" opacity="0.49"/>
              <g>
                <rect x="395.18" y="276.39" width="41.89" height="34.17" fill="#555b6e"/>
                <rect class="h2_ch" x="395.83" y="277.85" width="40.6" height="31.46" fill="#bee3db"/>
                <rect x="408.17" y="277.75" width="0.68" height="31.9" fill="#555b6e"/>
                <rect x="422.28" y="277.6" width="0.68" height="31.9" fill="#555b6e"/>
                <rect x="407.74" y="277.51" width="0.44" height="11.64" fill="#777c8b"/>
                <rect x="395.62" y="277.46" width="0.63" height="11.64" fill="#777c8b"/>
                <rect x="408.85" y="277.46" width="0.41" height="11.64" fill="#777c8b"/>
                <rect x="421.94" y="277.26" width="0.39" height="11.64" fill="#777c8b"/>
                <rect x="422.91" y="277.26" width="0.39" height="11.64" fill="#777c8b"/>
                <rect x="395.76" y="288.71" width="40.73" height="1.16" fill="#555b6e"/>
                <rect x="395.28" y="276.92" width="41.31" height="0.87" fill="#404453"/>
                <polygon points="395.86 306.4 395.82 309.31 407.96 302.37 408.15 298.91 395.86 306.4" fill="#faf9f9"/>
                <polygon points="408.95 309.01 409.02 307.84 422.27 298.34 422.2 299.31 408.95 309.01" fill="#faf9f9"/>
                <polygon points="422.97 309.39 423.14 303.81 436.36 290.45 436.39 294.59 422.97 309.39" fill="#faf9f9"/>
                <polygon points="421.79 279.8 412.67 288.73 418.82 288.64 421.79 286.24 421.79 279.8" fill="#faf9f9"/>
              </g>
              <g>
                <rect x="379.3" y="292.57" width="1.15" height="2.59" fill="#998e86"/>
                <circle cx="379.85" cy="293.13" r="0.27" fill="#d6cec9"/>
                <rect x="379.45" y="294.57" width="0.88" height="0.16" fill="#8f8680"/>
              </g>
              <rect x="395.84" y="309.02" width="40.48" height="0.79" fill="#bfb3aa"/>
              <g>
                <rect class = "h2_ch" x="288.15" y="278.26" width="64.25" height="37.78" fill="#e8d7c5"/>
                <rect x="350.96" y="278.42" width="1.22" height="37.78" fill="#555b6e"/>
                <g>
                  <rect x="288.73" y="285.26" width="62.81" height="0.62" fill="#aea194"/>
                  <rect x="288.58" y="292.41" width="62.81" height="0.62" fill="#aea194"/>
                  <rect x="288.58" y="300.5" width="62.81" height="0.62" fill="#aea194"/>
                  <rect x="288.58" y="308.43" width="62.81" height="0.62" fill="#aea194"/>
                  <rect x="288.15" y="278.26" width="1.22" height="37.78" fill="#555b6e"/>
                  <rect x="288.15" y="278.26" width="63.24" height="1.09" fill="#777c8b"/>
                  <rect x="289.16" y="279.4" width="61.85" height="1.35" fill="#534b4b" opacity="0.49"/>
                  <rect x="288.97" y="279.71" width="0.77" height="36.28" fill="#534b4b" opacity="0.49"/>
                </g>
              </g>
              <rect x="362.63" y="311.69" width="14.41" height="1.37" rx="0.68" ry="0.68" fill="#c2a28d"/>
              <rect class ="h2_ch"x="372" y="241.82" width="11.45" height="20.46" fill="#e8d7c5"/>
              <rect x="372.86" y="241.46" width="0.22" height="20.96" fill="#bfb3aa"/>
              <rect x="382.3" y="241.46" width="0.22" height="20.96" fill="#bfb3aa"/>
              <rect x="374.45" y="243.83" width="6.7" height="18.01" fill="#777c8b"/>
              <rect x="368.86" y="242.03" width="2.95" height="20.17" fill="#777c8b"/>
              <rect x="367.13" y="241.96" width="0.14" height="20.2" fill="#605a55"/>
              <rect x="384.07" y="242.07" width="3.53" height="20.17" transform="translate(771.34 504.3) rotate(-180)" fill="#777c8b"/>
              <polygon points="386.64 243.88 387.03 258.38 384.43 249.07 383.86 245.9 383.83 242.16 387.27 242.07 386.64 243.88" fill="#595d68"/>
              <polygon points="380.78 245.35 376.53 245.67 374.59 255.97 374.44 261.84 381.14 261.84 381.11 245.2 380.78 245.35" fill="#faf9f9"/>
              <rect x="370.41" y="249.88" width="1.58" height="12.39" fill="#faf9f9"/>
              <polygon points="383.74 246.21 386.19 245.78 386.26 261.77 383.45 262.27 383.74 246.21" fill="#faf9f9"/>
              <polygon points="371.53 246.39 368.94 257.59 368.86 242.03 371.78 242 371.53 246.39" fill="#595d68"/>
              <rect x="381.58" y="251.25" width="0.47" height="1.94" fill="#998e86"/>
              <circle cx="381.79" cy="251.48" r="0.43" fill="#c2bbb6"/>
              <rect x="381.71" y="252.19" width="0.16" height="0.47" fill="#c2bbb6"/>
              <g>
                <rect x="392.11" y="242.22" width="29.2" height="18.66" fill="#555b6e"/>
                <rect class="h2_ch"x="392.56" y="243.02" width="28.31" height="17.18" fill="#bee3db"/>
                <rect x="401.17" y="242.97" width="0.47" height="17.42" fill="#555b6e"/>
                <rect x="411" y="242.89" width="0.47" height="17.42" fill="#555b6e"/>
                <rect x="400.86" y="242.83" width="0.3" height="6.35" fill="#777c8b"/>
                <rect x="392.41" y="242.81" width="0.44" height="6.35" fill="#777c8b"/>
                <rect x="401.64" y="242.81" width="0.29" height="6.35" fill="#777c8b"/>
                <rect x="410.77" y="242.7" width="0.27" height="6.35" fill="#777c8b"/>
                <rect x="411.44" y="242.7" width="0.27" height="6.35" fill="#777c8b"/>
                <rect x="392.51" y="248.95" width="28.39" height="0.64" fill="#555b6e"/>
                <rect x="392.18" y="242.52" width="28.8" height="0.48" fill="#404453"/>
                <polygon points="392.58 258.61 392.56 260.2 401.02 256.41 401.15 254.52 392.58 258.61" fill="#faf9f9"/>
                <polygon points="401.71 260.03 401.76 259.4 411 254.21 410.95 254.74 401.71 260.03" fill="#faf9f9"/>
                <polygon points="411.48 260.25 411.6 257.2 420.82 249.9 420.84 252.16 411.48 260.25" fill="#faf9f9"/>
                <polygon points="410.66 244.09 404.3 248.96 408.58 248.91 410.66 247.6 410.66 244.09" fill="#faf9f9"/>
              </g>
              <rect x="427.71" y="257.77" width="1.12" height="3.31" fill="#777c8b"/>
              <rect x="368.83" y="258.09" width="0.32" height="4.18" fill="#595d68"/>
              <rect x="381.83" y="258.09" width="0.32" height="4.18" fill="#595d68"/>
              <polygon points="366.92 257.77 366.92 258.32 386.94 258.32 387.83 257.77 366.92 257.77" fill="#555b6e"/>
              <polygon points="428.5 257.77 387.83 257.77 386.94 258.32 428.5 258.32 428.5 257.77" fill="#777c8b"/>
              <rect x="368.97" y="259.5" width="16.82" height="0.22" fill="#595d68"/>
              <rect x="368.9" y="261.01" width="16.82" height="0.22" fill="#595d68"/>
              <rect x="399.7" y="258.29" width="0.34" height="2.83" fill="#777c8b"/>
              <rect x="410.84" y="258.29" width="0.34" height="2.83" fill="#777c8b"/>
              <rect x="421.22" y="258.21" width="0.46" height="2.86" fill="#777c8b"/>
              <rect x="425.69" y="258.2" width="0.46" height="2.86" fill="#777c8b"/>
              <rect x="386.83" y="259.44" width="40.91" height="0.32" fill="#777c8b"/>
              <rect x="387.27" y="241.6" width="38.32" height="3.53" fill="#534b4b" opacity="0.49"/>
              <polygon points="369.91 254.85 366.74 244.48 366.74 241.67 387.05 241.6 369.91 254.85" fill="#534b4b" opacity="0.49"/>
              <rect x="305.44" y="235.69" width="61.15" height="1.73" fill="#534b4b" opacity="0.49"/>
              <g>
                <rect x="441" y="272.69" width="1.44" height="40.82" fill="#ccc2bb"/>
                <rect x="440.23" y="278.05" width="3.1" height="0.26" fill="#99928c"/>
                <rect x="440.43" y="309.97" width="3.1" height="0.26" fill="#99928c"/>
              </g>
              <rect class ="h2_ch"x="390" y="267.7" width="58.1" height="5.57" fill="#555b6e"/>
              <polygon points="446.98 273.22 390.51 273.22 390.51 274.83 387.24 274.84 388.27 309.38 387.7 312.12 393.89 298.58 425.2 276.05 425.82 275.41 443.52 275.38 446.98 273.22" fill="#534b4b" opacity="0.49"/>
              <g>
                <rect x="383.66" y="259.39" width="7.92" height="0.76" fill="#555b6e"/>
                <rect x="384.1" y="260.04" width="6.27" height="0.61" fill="#777c8b"/>
                <rect x="383.95" y="260.46" width="6.48" height="56.05" fill="#777c8b"/>
                <rect x="383.95" y="260.46" width="0.29" height="56.13" fill="#faf9f9"/>
                <rect x="390.15" y="260.46" width="0.29" height="56.13" fill="#faf9f9"/>
                <rect x="384.24" y="264.75" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="269.03" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="273.32" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="277.61" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="281.9" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="286.19" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="290.47" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="294.76" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="299.05" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="303.34" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="307.63" width="6.12" height="0.19" fill="#faf9f9"/>
                <rect x="384.24" y="311.91" width="6.12" height="0.19" fill="#faf9f9"/>
              </g>
            </g>
            <g id="house_3">
              <rect x="571.5" y="274.06" width="82.01" height="39.45" fill="#ffd6ba"/>
              <g id="roof_h2_3">
                <polygon class="h3_ch"points="593.16 259.63 566.9 264.98 555.45 273.81 658.87 273.81 593.16 259.63" fill="#d8eee9"/>
                <polygon points="658.49 273.81 560.3 274.06 560.3 271.7 658.74 272.32 658.49 273.81" fill="#bee3db"/>
                <rect x="558.06" y="273.57" width="100.06" height="1.87" fill="#89b0ae"/>
              </g>
              <polygon points="463.4 273.19 451.95 269.21 518.32 269.21 519.48 273.36 463.4 273.19" fill="#ffd6ba"/>
              <g id="roof_h2_2">
                <rect x="451.95" y="267.05" width="66.37" height="2.16" fill="#555b6e"/>
                <rect x="447.96" y="265.56" width="70.19" height="1.49" fill="#89b0ae"/>
                <polygon class="h3_ch"points="447.96 265.56 505.38 256.76 522.97 265.56 447.96 265.56" fill="#d8eee9"/>
                <polygon points="515.75 255.96 461.43 263.61 519.23 264.48 515.75 255.96" fill="#a2b3af" opacity="0.38"/>
              </g>
              <polygon points="548.6 248.93 538.21 247.25 500.88 253.16 561.79 251.29 548.6 248.93" fill="#a2b3af" opacity="0.38"/>
              <g id="roof_h2">
                <rect x="501.06" y="253.11" width="90.6" height="1.24" fill="#bee3db"/>
                <g>
                  <polygon points="585.03 261.08 508.03 261.25 501.06 254.36 591.66 254.36 585.03 261.08" fill="#455857"/>
                  <path class="h3_ch" d="M548.36,245.48s-52.19,8.55-48,7.8,92.34.75,92.34.75Z" transform="translate(-0.33)" fill="#d8eee9"/>
                  <rect x="504.38" y="254.77" width="84.13" height="2.82" fill="#89b0ae"/>
                </g>
              </g>
              <polygon points="577.39 266.39 516.66 267.55 505.88 257.84 589.17 257.84 577.39 266.39" fill="#ffd6ba"/>
              <polygon points="511.1 261.16 520.48 261 539.46 265.54 559.37 263.49 570.88 262.93 588.92 257.84 586.68 259.83 577.39 266.39 516.66 267.55 514.17 264.9 511.1 261.16" fill="#806b5d" opacity="0.19"/>
              <polygon points="533.34 274.77 520.93 274.77 520.93 260.87 533.84 261 541.57 264.11 533.34 274.77" fill="#806b5d" opacity="0.19"/>
              <polygon points="563.27 275.58 575.67 275.58 575.67 261.68 562.77 261.81 560.24 272.07 563.27 275.58" fill="#806b5d" opacity="0.19"/>
              <g id="wall_h2_1">
                <polygon class="h3_ch"points="518.49 317.83 462.9 317.17 462.9 270.87 518.49 270.87 518.49 317.83" fill="#ffefe3"/>
                <g>
                  <polygon points="514.34 310.94 490.28 304.72 466.88 280.16 463.56 270.87 518.65 270.7 518.57 311.69 514.34 310.94" fill="#ffefe3" opacity="0.43"/>
                  <rect x="467.54" y="308.12" width="7.96" height="2.49" rx="0.87" ry="0.87" fill="#ffdec8"/>
                  <rect x="465.3" y="281.66" width="5.48" height="2.49" rx="0.87" ry="0.87" fill="#bfa18b"/>
                  <rect x="467.54" y="278.42" width="7.96" height="2.49" rx="0.87" ry="0.87" fill="#ffd6ba"/>
                  <rect x="470.37" y="288.96" width="5.64" height="1" fill="#ffdec8"/>
                  <rect x="505.88" y="308.7" width="5.64" height="1" fill="#ffdec8"/>
                </g>
              </g>
              <rect x="520.89" y="261" width="54.26" height="0.5" fill="#8f7968"/>
              <rect x="461.24" y="316.17" width="56.42" height="1.66" fill="#555b6e"/>
              <path d="M590,261.87" transform="translate(-0.33)" fill="#faf9f9"/>
              <g>
                <rect class="h3_ch"x="573.62" y="277.55" width="72.06" height="35.34" fill="#bfa18b"/>
                <g>
                  <rect x="570.59" y="278.34" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="281.29" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="284.23" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="287.18" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="290.13" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="293.08" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="296.03" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="298.98" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="301.93" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="304.88" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="307.83" width="73.18" height="0.75" fill="#8f7968"/>
                  <rect x="570.59" y="310.78" width="73.18" height="0.75" fill="#8f7968"/>
                </g>
              </g>
              <rect x="574.49" y="275.31" width="79.52" height="1.49" fill="#bfa18b"/>
              <g>
                <rect class="h3_ch"x="644.93" y="276.06" width="8.59" height="37.46" fill="#ffefe3"/>
                <polygon points="644.93 313.51 643.81 312.89 643.68 277.67 644.93 276.06 644.93 313.51" fill="#736d69"/>
                <rect x="646.05" y="277.55" width="5.23" height="1.24" rx="0.43" ry="0.43" fill="#ffd6ba"/>
                <rect x="648.37" y="285.93" width="4.31" height="0.62" rx="0.22" ry="0.22" fill="#bfa18b"/>
                <path d="M650.49,303.48H645.8v-1.29h3.82S650.91,303.46,650.49,303.48Z" transform="translate(-0.33)" fill="#ffd6ba"/>
                <rect x="645.01" y="293.02" width="1.24" height="1.33" fill="#ffd6ba"/>
              </g>
              <rect x="650.24" y="309.45" width="3.32" height="0.83" fill="#ffe6d6"/>
              <g>
                <path d="M654.17,275.43h1.17a0,0,0,0,1,0,0v3.86a.51.51,0,0,1-.51.51h-.38a.36.36,0,0,1-.36-.36v-4a0,0,0,0,1,0,0Z" fill="#555b6e"/>
                <path d="M652.21,313.68l0-34.05a.4.4,0,0,0-.4-.4h0a.4.4,0,0,0-.41.4v34.05Z" transform="translate(-0.33)" fill="#555b6e"/>
                <path d="M655.05,280l-3.44-.13,0-.6,3.71-.41a.35.35,0,0,1,.35.35v.18A.6.6,0,0,1,655.05,280Z" transform="translate(-0.33)" fill="#555b6e"/>
              </g>
              <polygon points="644.1 312.93 576.56 312.93 576.48 311.86 643.02 311.86 644.1 312.93" fill="#ffd6ba"/>
              <g>
                <rect class="h3_ch"x="521.14" y="261.58" width="54.26" height="53.26" fill="#bfa18b"/>
                <g>
                  <rect x="520.98" y="263.24" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="265.64" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="268.04" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="270.45" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="272.85" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="275.26" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="277.66" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="280.06" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="282.47" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="284.87" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="287.28" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="289.68" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="292.08" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="294.49" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="296.89" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="299.3" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="301.7" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="304.1" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="306.51" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="308.91" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="311.32" width="55.09" height="0.79" fill="#d1baa9"/>
                  <rect x="520.98" y="313.72" width="55.09" height="0.79" fill="#d1baa9"/>
                </g>
                <path d="M538.73,275v39.32h25.56V275Zm24.06,37H540.23V280.33h22.56Z" transform="translate(-0.33)" fill="#d1baa9"/>
                <rect class="h3_ch"x="539.89" y="280.33" width="5.64" height="31.72" fill="#d8eee9"/>
                <rect x="544.29" y="281.82" width="1.24" height="30.22" fill="#777c8b"/>
                <rect x="539.81" y="280.33" width="5.97" height="1.66" fill="#777c8b"/>
                <rect x="545.53" y="280.33" width="1.99" height="31.72" fill="#d1baa9"/>
                <rect class="h3_ch"x="547.52" y="280.33" width="14.93" height="31.72" fill="#b29d8d"/>
                <rect x="548.57" y="292.82" width="1.12" height="3.42" rx="0.39" ry="0.39" fill="#d8eee9"/>
                <rect x="549.16" y="293.52" width="2.26" height="0.43" fill="#d8eee9"/>
                <rect x="549.13" y="294.54" width="0.19" height="0.62" fill="#a2b3af"/>
                <rect x="548.48" y="282.69" width="12.45" height="1.16" fill="#85766a"/>
                <rect x="548.48" y="289.29" width="12.45" height="1.16" fill="#85766a"/>
                <rect x="548.48" y="296.76" width="12.45" height="1.16" fill="#85766a"/>
                <rect x="548.48" y="304.47" width="12.45" height="1.16" fill="#85766a"/>
                <rect x="547.36" y="310.94" width="15.27" height="1.41" rx="0.49" ry="0.49" fill="#e8f5f2"/>
                <rect x="539.73" y="278.59" width="23.06" height="1.91" fill="#9d8b7e"/>
                <rect x="536.41" y="275.02" width="2.49" height="39.33" fill="#d1baa9"/>
                <rect x="535.74" y="314.18" width="28.37" height="0.66" fill="#555b6e"/>
                <rect x="541.72" y="298.66" width="2.16" height="8.55" rx="0.75" ry="0.75" fill="#fffcf9"/>
              </g>
              <polygon class="h3_ch"points="563.79 292.77 545.78 301.07 536.32 295.01 536.41 275.02 564.03 274.94 563.79 292.77" fill="#403c39" opacity="0.41"/>
              <g>
                <rect x="563.79" y="263.73" width="12.69" height="55.42" fill="#faf9f9"/>
                <polygon points="566.27 266.35 564.03 286.38 563.79 319.16 576.48 319.16 576.48 277.05 566.27 266.35" fill="#e5d9d1" opacity="0.61"/>
              </g>
              <g>
                <g>
                  <rect x="477.83" y="270.87" width="43.64" height="32.85" fill="#89b0ae"/>
                  <g>
                    <rect x="497.64" y="270.87" width="0.77" height="32.63" fill="#555b6e"/>
                    <rect x="477.85" y="280.47" width="39.26" height="1.47" fill="#555b6e"/>
                    <rect x="477.85" y="292.36" width="39.26" height="1.47" fill="#555b6e"/>
                    <rect x="477.85" y="270.83" width="0.44" height="31.98" fill="#d1baa9"/>
                    <polygon class="h3_ch"points="495.59 276.43 478.29 280.41 478.29 270.83 497.64 270.83 495.59 276.43" fill="#d8eee9"/>
                    <rect x="478.29" y="270.83" width="1.24" height="31.98" fill="#404453"/>
                    <rect x="479.41" y="280.6" width="17.98" height="0.19" fill="#999da8"/>
                    <rect x="498.49" y="280.51" width="17.98" height="0.19" fill="#999da8"/>
                    <rect x="498.57" y="292.88" width="17.98" height="0.19" fill="#999da8"/>
                    <rect x="479.99" y="292.88" width="17.98" height="0.19" fill="#999da8"/>
                    <rect x="479.66" y="292.54" width="17.98" height="0.19" fill="#999da8"/>
                    <rect x="498.41" y="270.87" width="0.25" height="10.37" fill="#404453"/>
                    <rect x="498.49" y="281.82" width="0.5" height="10.87" fill="#404453"/>
                    <polygon class="h3_ch"points="497.41 289.12 484.64 287.21 479.49 281.9 497.66 281.99 497.41 289.12" fill="#d8eee9"/>
                    <polygon class="h3_ch"points="517.12 292.36 507.95 291.53 499.07 289.04 498.99 282.15 517.12 281.95 517.12 292.36" fill="#d8eee9"/>
                    <rect  class="h3_ch" x="498.95" y="270.7" width="18.05" height="9.46" fill="#d8eee9"/>
                    <rect x="498.82" y="270.64" width="18.54" height="2.8" fill="#a2b3af"/>
                    <rect x="479.6" y="270.92" width="17.92" height="2.8" fill="#a2b3af" opacity="0.6"/>
                    <polygon points="504.3 292.36 501.15 292.44 513.84 281.9 516.08 281.9 504.3 292.36" fill="#faf9f9"/>
                    <polygon points="502.18 280.21 499.13 280.29 511.4 270.7 513.57 270.7 502.18 280.21" fill="#faf9f9"/>
                    <polygon points="505.05 280.54 504.05 280.54 515.44 270.58 516.5 270.58 505.05 280.54" fill="#faf9f9"/>
                    <polygon points="492.1 302.73 479.53 302.81 489.95 293.93 496.25 293.93 492.1 302.73" fill="#faf9f9"/>
                  </g>
                </g>
                <rect x="477" y="302.89" width="40.82" height="3.98" fill="#ffdec8"/>
              </g>
              <g>
                <polygon points="537.05 314.51 533.92 318.16 533.92 263.07 535.38 274.69 536.62 274.85 537.05 314.51" fill="#555b6e"/>
                <rect class="h3_ch"x="517.16" y="263.24" width="16.76" height="55.42" fill="#faf9f9"/>
                <polygon points="526.78 276.35 517.33 269.87 516.99 300.74 517.33 318.33 533.92 318.66 534.08 291.11 526.78 276.35" fill="#e5d9d1" opacity="0.61"/>
              </g>
            </g>
          </g>
          <g id="grass">
            <circle cx="436.51" cy="319.52" r="3.32" fill="#719839"/>
            <rect x="471.56" y="318.1" width="8.76" height="2.37" rx="1.18" ry="1.18" fill="#719839"/>
            <circle cx="430.51" cy="317.31" r="1.97" fill="#d5eab7"/>
            <rect x="461.34" y="320.11" width="13.74" height="2.37" rx="1.18" ry="1.18" fill="#abd570"/>
            <rect x="416.26" y="319.4" width="8.49" height="2.37" rx="1.18" ry="1.18" fill="#d5eab7"/>
            <circle cx="244.84" cy="320.93" r="3.91" fill="#719839"/>
            <rect x="193.56" y="319.25" width="10.32" height="2.79" rx="1.39" ry="1.39" transform="translate(397.12 641.3) rotate(-180)" fill="#719839"/>
            <circle cx="251.9" cy="318.32" r="2.32" fill="#d5eab7"/>
            <rect x="199.75" y="321.63" width="16.18" height="2.79" rx="1.39" ry="1.39" transform="translate(415.34 646.04) rotate(-180)" fill="#abd570"/>
            <rect x="259.02" y="320.79" width="10" height="2.79" rx="1.39" ry="1.39" transform="translate(527.71 644.37) rotate(-180)" fill="#d5eab7"/>
          </g>
          <g id="chunktree_2">
            <ellipse cx="293.54" cy="309.93" rx="10.12" ry="8.88" fill="#a8c266"/>
            <path d="M279.31,306.53c-.07.36-.12.71-.17,1.06l3.33,1.15Z" transform="translate(-0.33)" fill="none"/>
            <path d="M275.77,304.07l3.54,2.46a50.09,50.09,0,0,1,1.37-5.71A12,12,0,0,0,275.77,304.07Z" transform="translate(-0.33)" fill="#6e8630"/>
            <path d="M279.14,307.59,274.45,306a8.29,8.29,0,0,0-.95,3.83c0,4,3,7.47,7.21,9A19,19,0,0,1,279.14,307.59Z" transform="translate(-0.33)" fill="#6e8630"/>
            <path d="M285.55,300a14.51,14.51,0,0,0-4.87.83,50.09,50.09,0,0,0-1.37,5.71l3.16,2.21-3.33-1.15a19,19,0,0,0,1.57,11.2,14.37,14.37,0,0,0,4.84.82c6.65,0,12-4.39,12-9.81S292.2,300,285.55,300Z" transform="translate(-0.33)" fill="#92b340"/>
          </g>
          <g id="chunktree_3">
            <path d="M79.43,322.74c-2.12-5.24.25-9.11,5.53-9.21.31-3.1,1.2-5.59,4.39-5.67q5.82,5.38,12.19,2.27c6.36.89,8,5.13,8.79,10.06,1-.38,1.68.52,2.13,2.84Z" transform="translate(-0.33)" fill="#3d5b14"/>
            <path d="M86.66,322.89l28.77.14c3-4.59,3.25-9-5-12.76-1.9-4.13-3.9-4.41-6-2.27-4.32-1.38-7-.66-9.07,1,.71-7.37-7.23-10.63-6.1,2.12C84.6,314.81,83.93,318.75,86.66,322.89Z" transform="translate(-0.33)" fill="#8cc63f"/>
            <rect x="89.23" y="316.37" width="5.74" height="1.84" rx="0.92" ry="0.92" fill="#d1e8b2"/>
            <rect x="102.77" y="312.89" width="5.74" height="1.84" rx="0.92" ry="0.92" fill="#d1e8b2"/>
          </g>
          <g id="tree_1">
            <polygon points="669.01 316.42 666.5 316.12 667.13 285.33 668.47 285.33 669.01 316.42" fill="#a0572b"/>
            <rect x="655.34" y="270.53" width="22.36" height="7.12" rx="3.56" ry="3.56" fill="#96ca4c"/>
            <rect x="658.57" y="275.96" width="23.25" height="7.12" rx="3.56" ry="3.56" fill="#96ca4c"/>
            <rect x="649.92" y="278.67" width="26.45" height="7.12" rx="3.56" ry="3.56" fill="#96ca4c"/>
            <rect x="658.9" y="284.1" width="20.69" height="7.12" rx="3.56" ry="3.56" fill="#96ca4c"/>
            <rect x="653.31" y="287.49" width="28.66" height="7.12" rx="3.56" ry="3.56" fill="#96ca4c"/>
            <rect x="649.58" y="275.62" width="25.09" height="4.07" rx="2.03" ry="2.03" fill="#96ca4c"/>
            <rect x="659.25" y="291.06" width="14.22" height="7.12" rx="3.56" ry="3.56" fill="#96ca4c"/>
            <rect x="668.78" y="272.87" width="6.63" height="1.49" rx="0.74" ry="0.74" fill="#71bd44"/>
            <rect x="665.81" y="273.9" width="6.63" height="1.49" rx="0.74" ry="0.74" fill="#395f22"/>
            <rect x="657.98" y="277.21" width="6.63" height="1.49" rx="0.74" ry="0.74" fill="#71bd44"/>
            <rect x="655.01" y="278.24" width="6.63" height="1.49" rx="0.74" ry="0.74" fill="#395f22"/>
            <rect x="667.64" y="278.64" width="6.63" height="1.49" rx="0.74" ry="0.74" fill="#71bd44"/>
            <rect x="670.16" y="277.27" width="6.63" height="1.49" rx="0.74" ry="0.74" fill="#395f22"/>
            <rect x="660.9" y="287.16" width="6.63" height="1.28" rx="0.64" ry="0.64" fill="#71bd44"/>
            <rect x="661.92" y="287.7" width="6.63" height="1.28" rx="0.64" ry="0.64" fill="#395f22"/>
          </g>
          <g id="chunktree_1">
            <path d="M570.93,320.74c-2.12-5.24.25-9.11,5.53-9.21.31-3.1,1.2-5.59,4.39-5.67q5.82,5.38,12.19,2.27c6.36.89,8.05,5.13,8.79,10.06,1-.38,1.68.52,2.13,2.84Z" transform="translate(-0.33)" fill="#3d5b14"/>
            <path d="M578.16,320.89l28.77.14c3-4.59,3.25-9-5-12.76-1.9-4.13-3.9-4.41-6-2.27-4.32-1.38-7-.66-9.07,1,.71-7.37-7.23-10.63-6.1,2.12C576.1,312.81,575.43,316.75,578.16,320.89Z" transform="translate(-0.33)" fill="#8cc63f"/>
            <rect x="580.73" y="314.37" width="5.74" height="1.84" rx="0.92" ry="0.92" fill="#d1e8b2"/>
            <rect x="594.27" y="310.89" width="5.74" height="1.84" rx="0.92" ry="0.92" fill="#d1e8b2"/>
          </g>
          <g id="cart">
            <rect x="622.96" y="304.01" width="0.29" height="6.98" fill="#b3b3b3"/>
            <g>
              <circle cx="635.59" cy="318.4" r="1.24" fill="#3f3f3f"/>
              <circle cx="635.59" cy="318.4" r="0.94" fill="#bab1b1"/>
              <path d="M636.64,317s-.08.26-.18.24-.11.05-.11.05a7.76,7.76,0,0,1-.07,1.19c-.07.16-.11.36-.38.34a.76.76,0,0,1-.61-.53c0-.23-.38-1.15-.38-1.15s0-.18,0-.2a.36.36,0,0,1,.14,0h1.66Z" transform="translate(-0.33)" fill="#99291b"/>
              <circle cx="625.4" cy="318.33" r="1.24" fill="#3f3f3f"/>
              <circle cx="625.4" cy="318.33" r="0.94" fill="#bab1b1"/>
              <path d="M626.45,317s-.08.26-.18.24-.11.05-.11.05a7.76,7.76,0,0,1-.07,1.19c-.07.16-.11.36-.38.34a.76.76,0,0,1-.61-.53c-.05-.23-.38-1.15-.38-1.15s0-.18,0-.2a.36.36,0,0,1,.14,0h1.66Z" transform="translate(-0.33)" fill="#99291b"/>
              <circle cx="625.38" cy="318.39" r="0.24" fill="#d9d9d9"/>
              <circle cx="625.38" cy="318.39" r="0.15" fill="#a3a3a3"/>
              <circle cx="624.7" cy="319.22" r="1.37" fill="#3f3f3f"/>
              <circle cx="624.7" cy="319.22" r="1.03" fill="#d1cbcb"/>
              <circle cx="636.25" cy="319.28" r="1.37" fill="#3f3f3f"/>
              <circle cx="636.25" cy="319.28" r="1.03" fill="#d1cbcb"/>
              <rect x="636.58" y="302.88" width="0.24" height="9.58" transform="translate(119.05 -174.45) rotate(17.19)" fill="#b3b3b3"/>
              <rect x="635.05" y="302.88" width="0.24" height="9.58" transform="translate(110.09 -164.28) rotate(16.12)" fill="#b3b3b3"/>
              <rect x="633.51" y="303.07" width="0.24" height="9.38" transform="translate(90.64 -141.38) rotate(13.71)" fill="#b3b3b3"/>
              <rect x="632.1" y="303.28" width="0.28" height="8.62" transform="translate(79.95 -127.94) rotate(12.33)" fill="#b3b3b3"/>
              <rect x="630.6" y="303.5" width="0.3" height="8.5" transform="translate(60.19 -101.4) rotate(9.65)" fill="#b3b3b3"/>
              <rect x="629.17" y="303.57" width="0.26" height="8.23" transform="translate(43.71 -77.24) rotate(7.28)" fill="#b3b3b3"/>
              <rect x="627.72" y="303.65" width="0.26" height="7.83" transform="translate(32.24 -59.09) rotate(5.53)" fill="#b3b3b3"/>
              <rect x="626.22" y="303.85" width="0.28" height="7.33" transform="translate(15.69 -30.69) rotate(2.84)" fill="#b3b3b3"/>
              <rect x="624.7" y="303.85" width="0.28" height="7.33" transform="matrix(1, 0.05, -0.05, 1, 15.69, -30.61)" fill="#b3b3b3"/>
              <path d="M642.12,300.45l-.58.45-.95,1.93-.33.73-2.79,5.53-.5,1,.28.09-.7,1.48s-.28.65-.4.69a5.52,5.52,0,0,1-1.07-.15s-8.09-1.15-8.44-1.19l-3.51-.47c-.22,0-.48,0-.53-.15s-.16-1.17-.22-1.52-.33-2.65-.36-2.8-.17-1.15-.21-1.35a2.82,2.82,0,0,0-.08-.33l-.5,0s.69,5.2.69,5.36a2.29,2.29,0,0,0,.11.68.82.82,0,0,0,.59.52c.46.08,4.73.69,4.73.69l8.58,1.24a.76.76,0,0,0,.49-.06s.41-.28.42-.33,1.31-2.89,1.31-2.89l1.47-3.13,1.68-3.84a8.12,8.12,0,0,1,.79-1.6l.38-.19Z" transform="translate(-0.33)" fill="#d9d9d9"/>
              <path d="M642,300.11a6.16,6.16,0,0,0-1.47.92c-.15.17-2.23,2-2.23,2l-.49,0s3.38-2.95,3.71-3.08.57-.14.56-.1Z" transform="translate(-0.33)" fill="#d9d9d9"/>
              <g>
                <path d="M641.8,299.77l1.72-.78a.84.84,0,0,1,.49,1.47l-1.64.53Z" transform="translate(-0.33)" fill="#cc3624"/>
                <circle cx="643.28" cy="299.78" r="0.51" fill="#661b12"/>
              </g>
              <rect x="621.45" y="303.38" width="19.92" height="0.4" rx="0.2" ry="0.2" transform="translate(1279.33 569.3) rotate(176.61)" fill="#e8e8e8"/>
              <rect x="621.35" y="306.3" width="18.37" height="0.33" rx="0.16" ry="0.16" transform="translate(1260.73 612.92) rotate(-180)" fill="#b3b3b3"/>
              <rect x="621.45" y="309.59" width="16.45" height="0.35" rx="0.18" ry="0.18" transform="translate(1231.18 670.65) rotate(-175.25)" fill="#b3b3b3"/>
              <path d="M627.42,311.67c-.26,0-.24.24,0,.34,0,0,6.45.77,6.86,1a22,22,0,0,1,2.23,2.66c.08.12.36.35.37.5s0,.4-.3.41-9.55,0-9.71,0l-2.83,0c-.32,0-.31.47-.07.48l12.83,0s.63-.25.55-.69a2.57,2.57,0,0,0-.44-.92l-2-2.54a.78.78,0,0,0-.37-.23C634.26,312.58,627.42,311.67,627.42,311.67Z" transform="translate(-0.33)" fill="#a3a3a3"/>
              <path d="M627,311.57c-.3,0-.28.27,0,.39,0,0,7.43.88,7.91,1.14a24.74,24.74,0,0,1,2.57,3c.09.14.41.4.43.57s.05.46-.35.47-11,0-11.2,0l-3.26,0c-.37,0-.36.54-.07.55l14.79,0s.72-.29.62-.8a3,3,0,0,0-.5-1l-2.34-2.89a.83.83,0,0,0-.43-.26C634.91,312.61,627,311.57,627,311.57Z" transform="translate(-0.33)" fill="#d9d9d9"/>
              <path d="M637.44,317.71s-.09.29-.2.27-.12,0-.12,0a8.37,8.37,0,0,1-.08,1.32c-.08.17-.12.39-.42.37a.85.85,0,0,1-.67-.59c-.06-.25-.42-1.26-.42-1.26s0-.2,0-.22.12,0,.14,0h1.84Z" transform="translate(-0.33)" fill="#cc3624"/>
              <path d="M625.82,317.71s-.09.29-.2.27-.12,0-.12,0a8.37,8.37,0,0,1-.08,1.32c-.08.17-.12.39-.42.37a.88.88,0,0,1-.68-.59c-.05-.25-.41-1.26-.41-1.26a.77.77,0,0,1,0-.22s.13,0,.15,0h1.84Z" transform="translate(-0.33)" fill="#cc3624"/>
              <circle cx="636.25" cy="319.28" r="0.26" fill="#d9d9d9"/>
              <circle cx="636.25" cy="319.28" r="0.16" fill="#a3a3a3"/>
              <circle cx="624.67" cy="319.28" r="0.26" fill="#d9d9d9"/>
              <circle cx="624.67" cy="319.28" r="0.16" fill="#a3a3a3"/>
            </g>
            <path d="M622,303.85l0,.5-.18,0,.05.37-.63,0v-.36c-.27-.18-.33-.4,0-.53Z" transform="translate(-0.33)" fill="#cc3624"/>
          </g>
          <g id="garbage_trunk">
            <g id = "trashc_1">
              <rect x="310.82" y="321.45" width="2.04" height="0.88" rx="0.44" ry="0.44" fill="#272331"/>
              <rect x="299.56" y="321.45" width="2.04" height="0.88" rx="0.44" ry="0.44" fill="#272331"/>
              <path d="M300.89,304.49l11.44.06a2.35,2.35,0,0,0-1.21-1.34l-8.89.06C301.24,303.5,301,304,300.89,304.49Z" transform="translate(-0.33)" fill="#ea2425"/>
              <rect x="299.25" y="304.56" width="14.15" height="2" fill="#ff3b3b"/>
              <polygon points="311.91 307.28 300.24 307.1 299.52 306.47 312.73 306.47 311.91 307.28" fill="#ea2425"/>
              <path d="M311.61,322.35a1.07,1.07,0,0,1-.78.73H302a.72.72,0,0,1-.55-.73l-.9-15.25,11.84-.18Z" transform="translate(-0.33)" fill="#e91d1b"/>
              <rect x="303.24" y="309.55" width="6.49" height="13.48" fill="#ee5051"/>
              <rect x="299.84" y="320.54" width="0.82" height="2.77" rx="0.41" ry="0.41" fill="#7d7b83"/>
              <rect x="311.67" y="320.49" width="0.91" height="2.77" rx="0.45" ry="0.45" fill="#7d7b83"/>
            </g>
            <g id = "trashc_2">
              <rect x="496.57" y="321.45" width="2.04" height="0.88" rx="0.44" ry="0.44" fill="#272331"/>
              <rect x="485.31" y="321.45" width="2.04" height="0.88" rx="0.44" ry="0.44" fill="#272331"/>
              <path d="M486.64,304.49l11.44.06a2.35,2.35,0,0,0-1.21-1.34l-8.89.06C487,303.5,486.75,304,486.64,304.49Z" transform="translate(-0.33)" fill="#ea2425"/>
              <rect x="485" y="304.56" width="14.15" height="2" fill="#ff3b3b"/>
              <polygon points="497.66 307.28 485.99 307.1 485.27 306.47 498.48 306.47 497.66 307.28" fill="#ea2425"/>
              <path d="M497.36,322.35a1.07,1.07,0,0,1-.78.73h-8.8a.72.72,0,0,1-.55-.73l-.9-15.25,11.84-.18Z" transform="translate(-0.33)" fill="#e91d1b"/>
              <rect x="488.99" y="309.55" width="6.49" height="13.48" fill="#ee5051"/>
              <rect x="485.59" y="320.54" width="0.82" height="2.77" rx="0.41" ry="0.41" fill="#7d7b83"/>
              <rect x="497.42" y="320.49" width="0.91" height="2.77" rx="0.45" ry="0.45" fill="#7d7b83"/>
            </g>
            <g id = "trashc_3">
              <rect x="185.07" y="321.45" width="2.04" height="0.88" rx="0.44" ry="0.44" fill="#272331"/>
              <rect x="173.81" y="321.45" width="2.04" height="0.88" rx="0.44" ry="0.44" fill="#272331"/>
              <path d="M175.14,304.49l11.44.06a2.35,2.35,0,0,0-1.21-1.34l-8.89.06C175.49,303.5,175.25,304,175.14,304.49Z" transform="translate(-0.33)" fill="#ea2425"/>
              <rect x="173.5" y="304.56" width="14.15" height="2" fill="#ff3b3b"/>
              <polygon points="186.16 307.28 174.49 307.1 173.77 306.47 186.97 306.47 186.16 307.28" fill="#ea2425"/>
              <path d="M185.86,322.35a1.07,1.07,0,0,1-.78.73h-8.8a.72.72,0,0,1-.55-.73l-.9-15.25,11.84-.18Z" transform="translate(-0.33)" fill="#e91d1b"/>
              <rect x="177.49" y="309.55" width="6.49" height="13.48" fill="#ee5051"/>
              <rect x="174.09" y="320.54" width="0.82" height="2.77" rx="0.41" ry="0.41" fill="#7d7b83"/>
              <rect x="185.92" y="320.49" width="0.91" height="2.77" rx="0.45" ry="0.45" fill="#7d7b83"/>
            </g>
          </g>
          <g>
            <path id="cloud_3" d="M103.5,104H120c-.66-5.75,2-8.89,8.75-8.75-1.5-8.25,3.84-9.89,9-9-2.25-3.75,10.75-5.5,10.25,0,3.95-1.09,7.88-1.58,11.75,0h4.75c5.45.89,7.38,3.94,7.88,7.88,4.21-2.32,8.79-2,13.62,0,3.25-2.63,9,3.87,6.81,6.81,3.72-.07,6.21,2.33,7.38,7.37h20.14" transform="translate(-0.33)" fill="none" stroke="#e7e4e4" stroke-miterlimit="10"/>
            <path id="cloud_2" d="M348.33,79.67H361c0-4.87.67-7.17,7.67-7.67,3.87-4.08,8.07-2.61,12.33,0,5-.12,7.19,3,7.83,7.83,4.34-2.83,11.34,2.34,9.67,9.67,6.14-3.92,14.15-3.2,23.17,0-1.56-4.6,1.47-6.87,7.58-7.58,1.75-2.2,3.84-2.92,6.75,0a12.23,12.23,0,0,1,7.5,0c2.69-2.31,6.63-1.48,10.83,0" transform="translate(-0.33)" fill="none" stroke="#e7e4e4" stroke-miterlimit="10"/>
            <path id="cloud_1" d="M415.5,110.33h46.17c6.31-8.3,15.92-10,26-10.66,4.47-3.35,9.15-3.1,14,0,2-8.24,7.61-11.63,14-14,5.17-2.84,9.64-2.94,13.33,0,1-6.08,4.44-10.44,12-12,10-9.82,21-5.41,32,0,10.75-.42,18.75,18.33,12,24,6.07-4.5,13.45-6,24,0,6.37,2,9.27,5.89,10.67,10.66,0,.23,36,.23,36,0" transform="translate(-0.33)" fill="none" stroke="#e7e4e4" stroke-miterlimit="10"/>
          </g>
          <g id = "planet" >
            <circle cx="263.63" cy="118.67" r="12" fill="#bfba7d"/>
            <circle cx="262.33" cy="117" r="12" fill="#fef8a6"/>
          </g>
          
           <rect id="front" x="41.13" y="330.29" width="39.65" height="8.71" fill="#c2b4b4"/>
          <rect x="656.33" y="330.5" width="38" height="8.83" fill="#c2b4b4"/>
          <g id="wheel_3" data-name="wheel 3">
            <circle cx="36.07" cy="333.32" r="11.2" fill="#c2b4b4"/>
            <path d="M42.5,333.32a3.53,3.53,0,0,0-.07-.85l1.2-.35-.71-2.27-1.27.43a4.44,4.44,0,0,0-.86-1.14l.78-1.06-1.91-1.42-.78,1.14a4,4,0,0,0-1.35-.43V326H35.19v1.42a4.24,4.24,0,0,0-1.27.43l-.85-1.14-1.92,1.42.86,1.13a6,6,0,0,0-.78,1.14l-1.35-.43-.71,2.27,1.28.43c0,.28-.08.49-.08.78v.49l-1.27.43.71,2.27,1.2-.43a5,5,0,0,0,.85,1.21l-.71,1.06,1.92,1.42.71-1a7.57,7.57,0,0,0,1.41.5v1.21h2.34v-1.21a4.53,4.53,0,0,0,1.42-.5l.71,1,1.91-1.42-.7-1a8.56,8.56,0,0,0,.92-1.21l1.13.36.71-2.27-1.2-.36A2,2,0,0,0,42.5,333.32Z" transform="translate(-0.33)" fill="#ebf2fa"/>
          </g>
          <g id="wheel_1" data-name="wheel 1">
            <circle cx="701.89" cy="333.2" r="11.2" fill="#c2b4b4"/>
            <path d="M708.32,333.2a3.49,3.49,0,0,0-.07-.85l1.21-.36-.71-2.26-1.28.42a4.36,4.36,0,0,0-.85-1.13l.78-1.07-1.91-1.41-.78,1.13a4.34,4.34,0,0,0-1.35-.42v-1.42H701v1.42a4.57,4.57,0,0,0-1.28.42l-.85-1.13L697,328l.85,1.14a6.47,6.47,0,0,0-.78,1.13l-1.35-.42-.71,2.27,1.28.42c0,.28-.07.5-.07.78v.5l-1.28.42.71,2.27,1.21-.42a4.46,4.46,0,0,0,.85,1.2L697,338.3l1.91,1.42.71-1a9.47,9.47,0,0,0,1.42.5v1.2h2.34v-1.2a5.21,5.21,0,0,0,1.42-.5l.71,1,1.91-1.42-.71-1a7.78,7.78,0,0,0,.92-1.2l1.14.35.71-2.27-1.21-.35A2,2,0,0,0,708.32,333.2Z" transform="translate(-0.33)" fill="#ebf2fa"/>
          </g>
          <g id="tree_2">
            <rect x="268.48" y="303.43" width="1.43" height="17.27" fill="#a0572b"/>
            <path d="M268,272.26c-3.18,1.47-5,4.72-6.25,8.69-2.16,8-2,13.5-.73,17.84a10.27,10.27,0,0,0,5.32,5C262.28,293.72,263.18,283.17,268,272.26Z" transform="translate(-0.33)" fill="#719839"/>
            <path d="M277.3,281c-1.44-4.64-3.43-8.28-7.63-9.28a8.11,8.11,0,0,0-1.7.59c-4.79,10.91-5.69,21.46-1.66,31.56a13,13,0,0,0,3,.87v.1l.25-.05.25.05v-.1a10.6,10.6,0,0,0,8.22-5.9C279.29,294.45,279.43,288.91,277.3,281Z" transform="translate(-0.33)" fill="#96ca4c"/>
            <circle cx="267.26" cy="284.57" r="3.61" fill="#afd365"/>
            <circle cx="264.41" cy="291.65" r="2.21" fill="#afd365"/>
            <circle cx="273.1" cy="300.53" r="2.38" fill="#afd365"/>
            <circle cx="271.69" cy="278.59" r="2.36" fill="#afd365"/>
            <circle cx="268.62" cy="274.95" r="1.57" fill="#afd365"/>
          </g>
          <g>
            <g>
              <polygon points="85.5 339.5 80.5 339.5 80.5 375 44.67 375 44.67 381 85.33 381 85.33 379.83 85.5 379.83 85.5 339.5" fill="#867878"/>
              <rect x="267" y="341.33" width="3.17" height="28.67" fill="#867878"/>
              <rect x="462.75" y="341.33" width="3.92" height="28.67" fill="#867878"/>
              <rect x="555.75" y="341.33" width="3.92" height="28.67" fill="#867878"/>
              <rect x="645.5" y="341.33" width="3.79" height="29.29" fill="#867878"/>
              <rect x="186.33" y="341.33" width="3.33" height="28.17" fill="#867878"/>
              <g>
                <rect x="82" y="366.08" width="567.29" height="4.54" fill="#867878"/>
                <g>
                  <rect x="325.6" y="361.12" width="4.43" height="14.75" fill="#867878"/>
                  <rect x="331.01" y="361.12" width="4.43" height="14.75" fill="#867878"/>
                  <rect x="328.43" y="362.72" width="4.43" height="11.19" fill="#867878"/>
                  <rect x="324.25" y="362.97" width="12.42" height="1.48" fill="#867878"/>
                  <rect x="324.25" y="371.94" width="12.42" height="1.48" fill="#867878"/>
                </g>
                <g>
                  <rect x="389.77" y="361.13" width="4.43" height="14.75" fill="#867878"/>
                  <rect x="395.18" y="361.13" width="4.43" height="14.75" fill="#867878"/>
                  <rect x="392.6" y="362.72" width="4.43" height="11.19" fill="#867878"/>
                  <rect x="388.42" y="362.97" width="12.41" height="1.48" fill="#867878"/>
                  <rect x="388.42" y="371.94" width="12.41" height="1.48" fill="#867878"/>
                </g>
              </g>
            </g>
            <g id="circle_vavle">
              <circle cx="361.41" cy="368.41" r="9.35" fill="#867878"/>
              <g>
                <circle cx="361.41" cy="361.99" r="1.18" fill="#655a5a"/>
                <circle cx="355.86" cy="365.2" r="1.18" fill="#655a5a"/>
                <circle cx="355.86" cy="371.62" r="1.18" fill="#655a5a"/>
                <circle cx="361.41" cy="374.82" r="1.18" fill="#655a5a"/>
                <circle cx="366.97" cy="371.62" r="1.18" fill="#655a5a"/>
                <circle cx="366.97" cy="365.2" r="1.18" fill="#655a5a"/>
              </g>
            </g>
            <path id="red_vavle" d="M378.5,368.34a16.64,16.64,0,1,0-3.44,10.1l.45-.49-.06,0A16.5,16.5,0,0,0,378.5,368.34Zm-29.72,0A13.1,13.1,0,0,1,361,355.27v7.57a5.49,5.49,0,0,0-4.44,7l-6.16,4.74A13.18,13.18,0,0,1,348.78,368.34Zm13.11,13.11a13.1,13.1,0,0,1-10.2-4.87l6-4.6a5.56,5.56,0,0,0,8.22.26l5.51,5.11A13.06,13.06,0,0,1,361.89,381.45Zm11-5.95-5.72-5.32a5.51,5.51,0,0,0-3.82-7.22v-7.65a13.11,13.11,0,0,1,9.54,20.19Z" transform="translate(-0.33)" fill="#ee5051"/>
          </g>
          <g>
            <g>
              <rect x="12.67" y="364.8" width="36.9" height="25.4" fill="#216869"/>
              <rect x="14.47" y="366" width="33.5" height="23" fill="#eae6e5"/>
            </g>
            <rect x="26.27" y="361.8" width="12.7" height="3" fill="#f2e8cf"/>
          </g>
          <g>
            <circle id="glow_2" data-name="glow 2" cx="44.62" cy="371.54" r="6.72" opacity="0.7" fill="url(#radial-gradient-2)" style="isolation: isolate"/>
            <rect id="button_1" data-name="button 1" x="42.27" y="368.7" width="3.3" height="6.3" fill="#80ed99"/>
          </g>
          <g>
            <circle id="glow_3" class ="ff-glow"cx="44.14" cy="382.81" r="6.72" opacity="0.7" fill="url(#radial-gradient-3)" style="isolation: isolate"/>
            <rect id="button_2" data-name="button 2" x="42.47" y="379.7" width="3.3" height="6.3" fill="#ee6055"/>
          </g>
          <g>
            <path d="M349.5,350.67c6.54-5.55,25.39-6.22,29.31,5.85" fill="none" stroke="#fcfbfb" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
            <path d="M379.4,361.57c1.08-2.23,1.75-4.4,1.23-6.36-.93.8-2.41.76-4,.51C377.92,357,378.74,359.12,379.4,361.57Z" fill="#fcfbfb"/>
          </g>
          <g>
            <path d="M375.81,391.08c-6.54,5.54-25.39,6.22-29.3-5.86" fill="none" stroke="#fcfbfb" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
            <path d="M345.92,380.17c-1.09,2.24-1.76,4.4-1.24,6.37.93-.81,2.41-.77,4-.52C347.39,384.77,346.57,382.62,345.92,380.17Z" fill="#fcfbfb"/>
          </g>
          <g>
            <circle cx="361.33" cy="333.23" r="5.38" fill="#c5e9d2"/>
            <circle cx="361.33" cy="333.23" r="4.91" fill="#f1faf4"/>
            <polygon id="gauge" points="361.77 332.79 361.74 332.75 361.73 332.76 360.1 331.55 358.38 330.27 359.65 331.99 360.87 333.62 360.86 333.63 360.9 333.66 360.93 333.7 360.94 333.69 362.57 334.9 364.28 336.18 363.01 334.46 361.8 332.83 361.81 332.82 361.77 332.79" fill="#354c3d"/>
          </g>
        </svg>
        
        
        
        
              
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/Draggable.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js" type = "text/javascript"></script>
    <script src = "./script.js"></script>
    </body>
    </html>
<!-- partial -->
 

</body>
</html>

              
            
!

CSS

              
                 
* {
    box-sizing: border-box;
}
html {
    padding: 0;
    margin: 0;  
    cursor: none;
}
::-webkit-scrollbar {
    display: none;
}
body {
    background: #b7e4c7;
 
}
#button_1, #button_2 {
    cursor: pointer;
}

.s0 {
	stop-color:#fae0e4;
}
.s1 {
	stop-color:#f7cad0;
	stop-opacity:0;
}
.s2 {
	stop-color:#ff85a1;
	stop-opacity:0.8;
}
.s3 {
	stop-color:#ff5c8a;
	stop-opacity:0.6;
}
.s4 {
	stop-color:#ff5c8a;
	stop-opacity:0.4;
}
.s5 {
	stop-color:#ff0a54;
	stop-opacity:0.2;
}



 
.s1_2 {
	stop-color:#b7efc5;
	stop-opacity:0;
}
.s2_2 {
	stop-color:#92e6a7;
	stop-opacity:0.8;
}
.s3_2 {
	stop-color:#6ede8a;
	stop-opacity:0.6;
}
.s4_2 {
	stop-color:#4ad66d;
	stop-opacity:0.4;
}
.s5_2 {
	stop-color:#2dc653;
	stop-opacity:0.2;
}



.cursor{
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(68, 65, 64);
    z-index: 2000;
    user-select: none;
    pointer-events: none;
}

.follower{
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgb(255, 255, 255);
    opacity: 0.7;
    user-select: none;
    pointer-events: none;
}
.container {
    margin: auto;
}

 
#pathray {
    display: none;
}
svg {
    display: block;
    margin-left: 50px;
    margin-right: auto;
    width: 100%;
}
.ff-glow {
    animation: longd 4s linear infinite;
}
#planet {
    animation: flyout 6s ease-in-out infinite both;
    transition-delay: 3s;
}
#switch {
    outline: 0;
    cursor: pointer;
}
 
@keyframes longd {
    20% {
       opacity: 0.3;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
    70% {
        opacity: 0.1;
    }
    80% {
        opacity: 0.5;
    }
}
@keyframes flyout {
0% {
    box-shadow: 0 5px 15px 0px rgb(0 0 0 / 60%);
    transform: translatey(0px);
}

50% {
    box-shadow: 0 25px 15px 0px rgb(0 0 0 / 20%);
    transform: translatey(-12px);
}
100% {
    box-shadow: 0 5px 15px 0px rgb(0 0 0 / 60%);
    transform: translatey(0px);
}
}
              
            
!

JS

              
                // Cursor change 
    gsap.set(".follower",{xPercent: -50, yPercent: -50})
 gsap.set(".cursor",{xPercent: -50, yPercent: -50})
 
 var follow = document.querySelector('.follower');
 var cur = document.querySelector('.cursor');
 window.addEventListener('mousemove', e=> {
     gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});
     gsap.to(follow,0.5,{x:e.clientX,y:e.clientY});
 })
 // include draggable plugin in my project
 gsap.registerPlugin(Draggable);
 
 gsap.set("#red_vavle", {
  transformOrigin: "50% 50%"
})
 // create all variables 
 var rectgear = $('#gear_1 rect'),
    rectgear2 = $('#gear_2 rect'),
    planet = $('#planet'),
    body = $('body');
    cloud1 = $('#cloud_1'),
    cloud2 = $('#cloud_2'),
    cloud3 = $('#cloud_3'),
    houses_3 = $('#house_3 rect, #house_3 polygon,  #house_3 path, #house_3 ellipse'),
    houses_1 = $('#house_1 rect, #house_1 polygon,  #house_1 path, #house_1 ellipse'),
    houses_2 = $('#house_2 rect, #house_2 polygon,  #house_2 path, #house_2 ellipse'),
    chunktree_2 = $('#chunktree_2 path'),
    chunktree_1 = $('#chunktree_1 path, #chunktree_1 rect'),
    chunktree_3 = $('#chunktree_3 path, #chunktree_3 rect'),
    grass = $('#grass circle, #grass rect'),
    trashc_1 = $('#trashc_1'),
    trashc_2 = $('#trashc_2'),
    trashc_3 = $('#trashc_3'),
    tree_1 = $('#tree_1 rect'),
    switchsmove = $('#switch'),
    cart = $('#cart'),
    g_button = $('#button_1'),
    r_button = $('#button_2'),
    h1_ch = $('.h1_ch'),
    h2_ch = $('.h2_ch'),
    h3_ch = $('.h3_ch'),
    tree_1_body = $('#tree_1 polygon'),
    tree_2 = $('#tree_2'),
    gauge = $('#gauge'),
    tree_3 = $('#tree_3 rect, #tree_3 circle, #tree_3 ellipse,  #tree_3 path'),

    cityback = $('#city_back');
    city_back_2 = $('#city_back_2');
   // create all timeline 
   
  var switchtl = gsap.timeline({
    paused: true
  })
    var tl = gsap.timeline({
      
      paused: true
    });

    var geartl = gsap.timeline({
      paused: true
    });

    var junkyardtl = gsap.timeline({
      paused: true
    })
 
  

 // yard animation
 function junkyard() {
   junkyardtl.add("bfall");
   junkyardtl.from(trashc_1,{
    duration: 5,
    transformOrigin: "10% 90%",
    x: -180,
    y: 0,
    rotation: -90,
    ease: "power2.out"
  },"bfall")
 
  .from(trashc_2, {
    duration: 6,
    x: -220, 
    rotation: -260,
    ease: "power2.out",
    transformOrigin: "50% 50%",
  },"bfall+=0.5")
  .from(trashc_3,{
    duration: 8,
    transformOrigin: "10% 90%",
    x: -190,
    y: -51,  
    rotation: -150,
    ease: "power2.out"
  },"bfall")
  .from(chunktree_2, {
    duration: 5,
    x: -410,
    rotation: 180,
    opacity: 0.7,
    stagger: 0.1,

  },"bfall")
  .from(tree_2, {
    duration: 5,
    x: -410,
    rotation: -90,
 

  },"bfall+= 1.5")
 .from(tree_3, {
    duration: 7,
    x: -810,
    rotation: -90,
    stagger: 0.1

  },"bfall+= 1.5")
  .from(tree_1, {
    duration: 7,
    x: -411,
    y: 11,
    opacity: 0,
    rotation: -360,
    transformOrigin: "50% 50%",
    stagger: 0.1
  
  },"bfall+= 1.5")
  .from(tree_1_body, {
    duration: 7,
    x: -11,
    ease: "power2.out",
    rotation: -90,
    transformOrigin: "10% 100%",
    stagger: 0.1
  
  },"bfall+= 1.5")
  .from(grass, {
    duration: 7,
    x: -900,
    opacity:0,
    ease: "power2.out",
    rotation: -90,
    transformOrigin: "10% 100%",
    stagger: 0.1
  
  },"bfall+= 1.5")
  .from(chunktree_1, {
    duration: 7,
    x: -900,
    y: -51,
    rotation: -360,
    opacity:0,
    ease: "power2.out",
    transformOrigin: "10% 100%",
    stagger: 1
  
  },"bfall+= 1.5")
  .from(chunktree_3, {
    duration: 11,
    x: -300,
    y: -31,
    rotation: -360,
    opacity:0,
    ease: "power2.out",
    transformOrigin: "10% 100%",
    stagger: 1
  
  },"bfall+= 1.5")
  .from(cart, {
    duration: 11,
    x: -800,
    y: -8,
    rotation: -160,
   
    ease: "power2.out",
    transformOrigin: "50% 50%",
    stagger: 1
  
  },"bfall+= 1.5")
  junkyardtl.reverse();
  return junkyardtl;
 }
 
 var pop0 = junkyard();
// animation for cloud and sun repeat 
function cloudsun () {
  var cloudsuntl = gsap.timeline({
    repeat: -1
  })  
  cloudsuntl.add("begin")
  .to(cloud1, 12, {
    x: -100,
    repeat: -1,
    yoyo: true,
    ease: Linear.easeNone
  }, "begin")
  .to(cloud2, 9, {
    x: 70,
    repeat: -1,
    yoyo: true,
    ease: Linear.easeNone
  },"begin")
  .to(cloud3, 30, {
    x: 50,
    repeat: -1,
    yoyo: true,
    ease: Linear.easeNone
  },"begin")
  return cloudsuntl;
}

var pop1 = cloudsun();

// make City pop in 
 

function cityIn() {
  var cityTL = gsap.timeline(
    {
      paused: true
    }
  ) 
  cityTL.add("in")
  .to(switchsmove,2,{
    rotation: 30,
    transformOrigin: "50% 100%",
   
  })
  .from(houses_3,6,{
    y: 30,
    scale: 0,
    ease: "none ",
    transformOrigin: "50% 50%",
    x: gsap.utils.wrap([-300, -100, -200]),
    opacity: gsap.utils.wrap([0.5, 0.3, 0.2, 0.8]),
    rotation: gsap.utils.wrap([-50, -100, -150, -360]),
    stagger: 0.08,
 
  },0.02,"in")
  .from(houses_1, 4,{
    y: 60,
    scale: 0,
    ease: "none",
    transformOrigin: "50% 50%",
    x: gsap.utils.wrap([-300, -100, -200]),
    opacity: gsap.utils.wrap([0.5, 0.3, 0.2, 0.8]),
    rotation: gsap.utils.wrap([-50, -100, -150, -360]),
    stagger: 0.02,
    
  },0.02,"in")
  .from(houses_2, 2,{
    y: -50,
    scale: 0,
    ease: "none",
    transformOrigin: "50% 50%",
    x: gsap.utils.wrap([-300, -100, -200]),
    opacity: gsap.utils.wrap([0.5, 0.3, 0.2, 0.8]),
    rotation: gsap.utils.wrap([-50, -100, -150, -360]),
    stagger: 0.05,
  
  },0.02,"in")
  .from(cityback,4, {
    scaleY: 0,
    opacity: 0.7,
    transformOrigin: "50% 100%",
    ease: Circ.easeOut
  },"in")
  .from(city_back_2,2, {
    scaleX: 1.2,
    opacity: 0,
    transformOrigin: "50% 100%",
    ease: Circ.easeOut
  },"in")
  .from(gauge, 1, {
    rotation: 180,
    transformOrigin: "50% 50%",
    ease: Bounce.easeInOut
  },"in")
  .from(gauge, 2, {
    rotation: 0,
    transformOrigin: "50% 50%",
    ease: Bounce.easeInOut
  },"in+=3")
  .reverse()
      
    return cityTL;
}
var pop1 = cityIn();
 
// weel animation 
function wheelrun() {  
  tl.add("start")
  .to("#wheel_1", 13,{
        rotation: 720,
         
        ease:Linear.easeNone, transformOrigin:"50% 50%"
},"start+=0.05")
  .to("#wheel_2", 13,{
    rotation:720,
   
    ease:Linear.easeNone, transformOrigin:"50% 50%"
},"start+=0.05")
.to("#wheel_3", 13,{
    rotation: 720,
 
    ease:Linear.easeNone, transformOrigin:"50% 50%"
},"start+=0.05")
tl.reverse();
 return tl;
}
var pop2 = wheelrun();
// change hue colors function

function chue() {
  var chues = "hsl(+=80%, +=0%, +=0%)";
  var chuetl = gsap.timeline({
    paused: true
  });
  chuetl.add("cb");
  chuetl.to(body, 1.2, {
    backgroundColor: chues,
    ease: Linear.easeNone
  }, "cb")
  .to(h1_ch, 1.2, {
    fill: chues,
  }, "cb")
  .to(h2_ch, 1.2, {
    fill: chues,
  }, "cb")
  .to(h3_ch, 1.2, {
    fill: chues,
  }, "cb")
  .to(city_back_2, 1.2, {
    fill: chues,
    ease: Linear.easeNone,
  }, "cb")
  .to(cityback, 1.2, {
    fill: chues,
    ease: Linear.easeNone,
  }, "cb")
  .to(planet, 1.2, {
    fill: chues,
    ease: Linear.easeNone,
  }, "cb")
  .to(chunktree_2, 1.2, {
    fill: chues,
    ease: Linear.easeNone,
  }, "cb")
  .to('#garbage_trunk rect, #garbage_trunk path ', 1.2, {
    fill: chues,
    ease: Linear.easeNone,
  }, "cb")
  .to('#grass', 1.2, {
    fill: chues,
    ease: Linear.easeNone,
  }, "cb")
 

  .reverse();
 return chuetl;
}
var pop4 = chue();

// change saturation 

function csat() {
  var csats = "hsl(+=5%, +=2%, -=10%)";
  var csatstl = gsap.timeline(
    {
      paused: true
    }
  );
  csatstl.add("cs")
  csatstl.to(body, 1, {
    backgroundColor: csats
  })
  .to(h1_ch, 1.2, {
    fill: csats,
  }, "cs")
  .to(h2_ch, 1.2, {
    fill: csats,
  }, "cs")
  .to(h3_ch, 1.2, {
    fill: csats,
  }, "cs")
  .to(city_back_2, 1.2, {
    fill: csats,
    ease: Linear.easeNone,
  }, "cs")
  .to(cityback, 1.2, {
    fill: csats,
    ease: Linear.easeNone,
  }, "cs")
  .to(planet, 1.2, {
    fill: csats,
    ease: Linear.easeNone,
  }, "cs")
  .to(chunktree_2, 1.2, {
    fill: csats,
    ease: Linear.easeNone,
  }, "cs")
  .to('#garbage_trunk rect, #garbage_trunk path ', 1.2, {
    fill: csats,
    ease: Linear.easeNone,
  }, "cs")
  .to('#grass', 1.2, {
    fill: csats,
    ease: Linear.easeNone,
  }, "cs")
  .reverse()
  return csatstl;
}

var pop5 = csat();
// steering gear animation 
function gearrun() {
  
  geartl.add("start")
  .to(rectgear, {
  duration: 13,
  ease: "none",
  x: "+=450", 
  modifiers: {
  x: gsap.utils.unitize(x => parseFloat(x) % 28) 
  },

 
},"start+=0")
  .to(rectgear2, {
  duration: 13,
  ease: "none",
  x: "+=-450", 
  modifiers: {
  x: gsap.utils.unitize(x => parseFloat(x) % 28) 
},
 
},"start+=0");
 
geartl.reverse();
 
return geartl;
}

var pop3 = gearrun();
 $(document).ready(function() {
  Draggable.create("#red_vavle", {
    type: "rotation",
    
    bounds: {
      minRotation: 0,
      maxRotation: 360
    },
    onDrag: function() {
      pop0.progress((this.rotation)/360);
      pop1.progress((this.rotation)/360);
      pop2.progress((this.rotation)/360);
      pop3.progress((this.rotation)/360);
      pop0.pause()
      pop1.pause()
      pop2.pause()
      pop3.pause()
    }
  });

  $(switchsmove).on('click', function(e) {
    e.preventDefault();
    pop1.reversed(!pop1.reversed());
     if (pop1.paused()) {
        pop1.resume(pop1.progress());
     }
     pop2.reversed(!pop2.reversed());
     if (pop2.paused()) {
        pop2.resume(pop2.progress());
     }
     pop3.reversed(!pop3.reversed());
     if (pop3.paused()) {
      pop3.resume(pop3.progress());
     }
    pop0.reversed(!pop0.reversed());
    if (pop0.paused()) {
      pop0.resume(pop0.progress());
   }
  });
  $(g_button).on('click', function(e) {
    e.preventDefault();
    pop4.reversed(!pop4.reversed())
  })
  $(r_button).on('click', function(e) {
    e.preventDefault();
    pop5.reversed(!pop5.reversed())
  })

 
 })
 

// activeAnimation()
              
            
!
999px

Console