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

              
                <a href="https://codepen.io/smalinux/" target="_blank" title="Just say Hello!"><div class="FollowMe"></div></a>

<div class="container">
	<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800">
	  <g class="background">
	    <radialGradient id="a" cx="407.5" cy="391.001" r="400" gradientUnits="userSpaceOnUse">
	      <stop offset="0" stop-color="#F4E917"/>
	      <stop offset=".282" stop-color="#F3E517"/>
	      <stop offset=".538" stop-color="#EFDA16"/>
	      <stop offset=".784" stop-color="#E8C815"/>
	      <stop offset="1" stop-color="#E0B114"/>
	    </radialGradient>
	    <path fill="url(#a)" d="M1.5 0h800v800H1.5z"/>
	  </g>
	  <g class="object AllSVG">
	    <g class="ElBase">
	      <path fill="#662D1B" d="M125.5 439l75 121 60 9 28 42 153 42 76-46 56-71 69-48 10-49"/>
	      <path fill="#452117" d="M200.5 560l43-74 17 83"/>
	      <path fill="#914037" d="M200.5 560l43-74-118-47"/>
	      <path fill="#7A342C" d="M125.5 439l89 5 29 42"/>
	      <path fill="#612627" d="M243.5 486l17 83 28 42"/>
	      <path fill="#7A342C" d="M243.5 486l45 125 81-98"/>
	      <path fill="#52291E" d="M369.5 513l40-38 121-17"/>
	      <path fill="#612627" d="M289.5 608l81-98 72 140"/>
	      <path fill="#52291E" d="M369.5 513l72 140 76-46"/>
	      <path fill="#452117" d="M517.5 607c0-3 8-149 8-149l49 75-57 74z"/>
	      <path fill="#5E2517" d="M369.5 513l156-55-8 149"/>
	      <path fill="#452117" d="M441.5 652l39-68 37 23"/>
	      <path fill="#52291E" d="M480.5 584l39-16-2 39"/>
	      <path fill="#452117" d="M288.5 611l97 59 56-17m201-165l10-49-48 24"/>
	      <path fill="#52291E" d="M574.5 533l30-70-79-5"/>
	    </g>
	    <path class="GreenFloar" fill="#9C9424" d="M125.5 439l106 22 173 19 121-22.2 79 5.2 48-24-81-38-155-21-177 11"/>
	    <g class="clouds">
	      <g class="c3">
	        <path fill="#CCDEE6" d="M489.7 532.3l24.5-26.9 58 7.8 67.6 27.4 53.5-4.4 28 19.7-16.3 25.3-79 22.4-85.4-4.1-11.2-29.2-57.9-5.1-34.6-27.1"/>
	        <path fill="#FFF" d="M489.7 532.3l82.5-19.1-58-7.8"/>
	        <path fill="#D2E5ED" d="M436.9 538.1l52.8-5.8 24.5-26.9"/>
	        <path fill="#D5CCB9" d="M436.9 538.1l52.8-5.8-18.2 32.9"/>
	        <path fill="#E4DBC8" d="M489.7 532.3l60 5.7 22.5-24.8"/>
	        <path fill="#FFF" d="M536.4 532.9l35.8-19.7 52.9 40.9"/>
	        <path fill="#FFF" d="M623 553.5l16.8-12.9 53.5-4.4m-163.9 34.1l93.6-16.8 23.4 21.3"/>
	        <path fill="#D5CCB9" d="M489.7 532.3l46.7.6 35.8-19.7"/>
	        <path fill="#E2D8C2" d="M471.5 565.2l18.2-32.9 46.7.6 88.7 21.2"/>
	        <path fill="#D5CCB9" d="M471.5 565.2l149.4-11.6-91.5 16.7"/>
	        <path fill="#E2D8C2" d="M529.4 570.3l11.2 29.2 105.8-24.7"/>
	        <path fill="#D5CCB9" d="M540.6 599.5l105.8-24.7-20.4 28.8"/>
	        <path fill="#CCC3AF" d="M626 603.6l20.4-28.8 58.6 6.4"/>
	        <path fill="#F6EBD7" d="M646.4 574.8l46.9-38.6-70.3 17.3"/>
	        <path fill="#D5CCB9" d="M648.9 574.2l-2.5.6 58.6 6.4 16.3-25.3"/>
	      </g>
	      <g class="c2" opacity=".6">
	        <path fill="#CCDEE6" d="M303.4 152.8l-22.2-25-53.3 6.5-62.3 24.4-49-4.7-25.9 17.9 14.7 23.3 72.2 21.4 78.4-2.8 10.6-26.7 53.2-4 31.9-24.4"/>
	        <path fill="#FFF" d="M303.4 152.8l-75.5-18.5 53.3-6.5"/>
	        <path fill="#D2E5ED" d="M351.7 158.7l-48.3-5.9-22.2-25"/>
	        <path fill="#D5CCB9" d="M351.7 158.7l-48.3-5.9 16.4 30.3"/>
	        <path fill="#E4DBC8" d="M303.4 152.8l-55.1 4.5-20.4-23"/>
	        <path fill="#FFF" d="M260.5 152.8l-32.6-18.5-48.9 37"/>
	        <path fill="#FFF" d="M180.9 170.7l-15.3-12-49-4.7m150 33.1l-85.7-16.4-21.7 19.3"/>
	        <path fill="#D5CCB9" d="M303.4 152.8h-42.9l-32.6-18.5"/>
	        <path fill="#E2D8C2" d="M319.8 183.1l-16.4-30.3h-42.9L179 171.3"/>
	        <path fill="#D5CCB9" d="M319.8 183.1l-137-12.3 83.8 16.3"/>
	        <path fill="#E2D8C2" d="M266.6 187.1L256 213.8 159.2 190"/>
	        <path fill="#D5CCB9" d="M256 213.8L159.2 190l18.4 26.6"/>
	        <path fill="#CCC3AF" d="M177.6 216.6L159.2 190l-53.8 5.2"/>
	        <path fill="#F6EBD7" d="M159.2 190l-42.6-36 64.3 16.7"/>
	        <path fill="#D5CCB9" d="M156.9 189.4l2.3.6-53.8 5.2-14.7-23.3"/>
	      </g>
	      <g class="c1">
	        <path fill="#E2DFCB" d="M501.4 150.7l91.8 15.9 58.9-20.4 57.2-13.1-85-37.8-92.3 20.8-77.3-4.2"/>
	        <path fill="#FFF" d="M454.7 111.9l77.3 4.2 1.3 22.8m25.7-29.7l21.6 23 42-35.4 1.7-1.5"/>
	        <path fill="#D5D2C1" d="M533.3 138.9l-1.3-22.8 27-6.9 21.6 23"/>
	        <path fill="#E2DFCB" d="M454.7 111.9l46.7 38.8 31.9-11.8"/>
	        <path fill="#D5D2C1" d="M501.4 150.7l31.9-11.8 59.9 27.7"/>
	        <path fill="#CCC9BB" d="M635.7 152.5l-18.3-31.2 91.9 11.8"/>
	        <path fill="#F6F2E1" d="M617.4 121.3l6.9-26 85 37.8"/>
	        <path fill="#D5D2C1" d="M580.6 132.2l36.8-10.9 18.3 31.2"/>
	        <path fill="#F6F2E1" d="M533.3 138.9l47.3-6.7 55.1 20.3"/>
	        <path fill="#CCC9BB" d="M593.2 166.6l-6.2-20.4 48.7 6.3"/>
	      </g>
	    </g>
	    <g class="Asfalt">
	      <path fill="#C4B39B" d="M231.5 461l247-74 55 8-175 80"/>
	      <path fill="#B6A692" d="M246.5 462l241-74 36 6-174 80"/>
	      <path fill="#E2B681" d="M502.2 390.2l-213.8 77.1c1.9.2 3.8.5 5.4.9.1 0 .3.1.4.1l213.3-76.9c-1.7-.1-3.6-.5-5.3-1.2z" opacity=".7"/>
	    </g>
	    <g class="twr1">
	      <path fill="#CCB88C" d="M416 407l40.8-12.2V264.6l-40.8 9.9"/>
	      <path fill="#D8C8A5" d="M416 406.2l-48-9.3V267.3l48 7.2"/>
	      <g class="windowsTwr1">
	        	<polygon fill="#D8A32E" points="387.2,276.2 380.4,274.6 380.4,287.2 387.2,288.8"/>
	        	<polygon fill="#D8A32E" points="396.8,278.1 389.9,276.5 389.9,289.1 396.8,290.7"/>
	        	<polygon fill="#D8A32E" points="387.2,297.1 380.4,295.4 380.4,308.1 387.2,309.6"/>
	        	<polygon fill="#D8A32E" points="396.8,299 389.9,297.3 389.9,310 396.8,311.5"/>
	        	<polygon fill="#D8A32E" points="387.2,317.9 380.4,316.3 380.4,328.9 387.2,330.5"/>
	        	<polygon fill="#D8A32E" points="396.8,319.8 389.9,318.2 389.9,330.8 396.8,332.4"/>
	        	<polygon fill="#D98B19" points="387.2,338.8 380.4,337.2 380.4,349.8 387.2,351.3"/>
	        	<polygon fill="#D98B19" points="396.8,340.7 389.9,339.1 389.9,351.7 396.8,353.3"/>
	        	<polygon fill="#D98B19" points="387.2,359.7 380.4,358 380.4,370.6 387.2,372.2"/>
	        	<polygon fill="#D98B19" points="396.8,361.6 389.9,359.9 389.9,372.6 396.8,374.1"/>
	        	<polygon fill="#D8A32E" points="427.2,278.1 433.8,276.5 433.8,288.8 427.2,290.3"/>
	        	<polygon fill="#D8A32E" points="417.9,279.9 424.6,278.3 424.6,290.6 417.9,292.1"/>
	        	<polygon fill="#D8A32E" points="427.2,298.3 433.8,296.7 433.8,309 427.2,310.5"/>
	        	<polygon fill="#D8A32E" points="417.9,300.2 424.6,298.6 424.6,310.9 417.9,312.4"/>
	        	<polygon fill="#D8A32E" points="427.2,318.6 433.8,317 433.8,329.3 427.2,330.8"/>
	        	<polygon fill="#D8A32E" points="417.9,320.4 424.6,318.9 424.6,331.1 417.9,332.6"/>
	        	<polygon fill="#D8A32E" points="427.2,338.8 433.8,337.2 433.8,349.5 427.2,351"/>
	        	<polygon fill="#D8A32E" points="417.9,340.7 424.6,339.1 424.6,351.4 417.9,352.9"/>
	        	<polygon fill="#D8A32E" points="427.2,359.1 433.8,357.5 433.8,369.8 427.2,371.3"/>
	        	<polygon fill="#D8A32E" points="417.9,360.9 424.6,359.4 424.6,371.6 417.9,373.1"/>
	        	<polygon fill="#D8A32E" points="445.2,273.9 451.9,272.3 451.9,284.5 445.2,286.1"/>
	        	<polygon fill="#D8A32E" points="435.9,275.7 442.6,274.1 442.6,286.4 435.9,287.9"/>
	        	<polygon fill="#D8A32E" points="445.2,294.1 451.9,292.5 451.9,304.8 445.2,306.3"/>
	        	<polygon fill="#D8A32E" points="435.9,296 442.6,294.4 442.6,306.7 435.9,308.2"/>
	        	<polygon fill="#D98B19" points="445.2,314.4 451.9,312.8 451.9,325 445.2,326.6"/>
	        	<polygon fill="#D8A32E" points="435.9,316.2 442.6,314.6 442.6,326.9 435.9,328.4"/>
	        	<polygon fill="#D98B19" points="445.2,334.6 451.9,333 451.9,345.3 445.2,346.8"/>
	        	<polygon fill="#D98B19" points="435.9,336.5 442.6,334.9 442.6,347.2 435.9,348.7"/>
	        	<polygon fill="#D98B19" points="445.2,354.9 451.9,353.3 451.9,365.6 445.2,367.1"/>
	        	<polygon fill="#D98B19" points="435.9,356.7 442.6,355.1 442.6,367.4 435.9,368.9"/>
	        	<polygon fill="#D8A32E" points="427.7,376.6 434.3,375 434.3,387.3 427.7,388.8"/>
	        	<polygon fill="#D8A32E" points="418.4,378.4 425.1,376.9 425.1,389.1 418.4,390.6"/>
	        	<polygon fill="#D98B19" points="445.7,372.4 452.4,370.8 452.4,383.1 445.7,384.6"/>
	        	<polygon fill="#D98B19" points="436.4,374.2 443.1,372.6 443.1,384.9 436.4,386.4"/>
	        	<polygon fill="#E2D0AE" points="366.5,267.3 414.5,274.5 455.3,264.6 410.9,258.5"/>
	        	<polygon fill="#E2D3AC" points="389,264 411.5,268.5 411.5,244"/>
	        	<polygon fill="#CCB88C" points="411.5,244 411.5,268.5 430,263.5"/>
	      </g>
	      <path fill="#E2D0AE" d="M368 267.3l48 7.2 40.8-9.9-44.4-6.1"/>
	      <path fill="#E2D3AC" d="M390.5 264l22.5 4.5V244"/>
	      <path fill="#CCB88C" d="M413 244v24.5l18.5-5"/>
	    </g>
	    <g class="twr3">
	      <path fill="#CCC9BB" d="M313.5 363v67.1l91.1-27.5V341"/>
	      <path fill="#F6F2E1" d="M403.7 341.2L313.5 363l-15-14.5 72.1-14.5"/>
	      <path fill="#E2D3AC" d="M316.8 357.5l71.7-17-17.5-4-62.3 13.5m4.8 80.1l-15-21v-60.6l15 14.5"/>
	      <g class="windowsTwr3">
	        <polygon fill="#D98B19" points="325.5,367.5 325.5,380.5 336.5,377.7 336.5,364.8"/>
	        	<polygon fill="#D98B19" points="337.6,364 337.6,377 348.6,374.2 348.6,361.2"/>
	        	<polygon fill="#D98B19" points="349.7,360.8 349.7,373.8 360.7,371.1 360.7,358.1"/>
	        	<polygon fill="#D98B19" points="361.7,358.3 361.7,371.3 372.7,368.5 372.7,355.5"/>
	        	<polygon fill="#D98B19" points="373.8,354.8 373.8,367.8 384.8,365 384.8,352"/>
	        	<polygon fill="#D98B19" points="386.6,351.3 386.6,364.2 397.6,361.5 397.6,348.5"/>
	        	<polygon fill="#D98B19" points="325.5,382 325.5,395 336.5,392.2 336.5,379.3"/>
	        	<polygon fill="#D98B19" points="337.6,378.5 337.6,391.5 348.6,388.7 348.6,375.7"/>
	        	<polygon fill="#D98B19" points="349.7,375.3 349.7,388.3 360.7,385.6 360.7,372.6"/>
	        	<polygon fill="#D98B19" points="361.7,372.8 361.7,385.8 372.7,383 372.7,370"/>
	        	<polygon fill="#D98B19" points="373.8,369.3 373.8,382.3 384.8,379.5 384.8,366.5"/>
	        	<polygon fill="#D98B19" points="386.6,365.8 386.6,378.7 397.6,376 397.6,363"/>
	        	<polygon fill="#D98B19" points="360,415.5 360,389 373.5,386 373.5,411"/>
	        	<polygon fill="#D8A32E" points="325.5,395 336.5,377.7 336.5,392.2"/>
	        	<polygon fill="#D8A32E" points="348.6,388.7 360.7,385.6 360.5,378.5"/>
	        	<polygon fill="#D8A32E" points="360.7,371.1 360.7,358.1 348.6,374.2 372.6,368.1"/>
	        	<polygon fill="#D8A32E" points="373.8,354.8 373.8,367.8 372.6,368.1 384.8,365"/>
	        	<path fill="#BD7416" d="M356,418v-28l-30,7.5v29C326,426.5,357.6,417.5,356,418z"/>
	        	<path fill="#BD7416" d="M398.5,404.5v-26l-22,5.5v27C376.5,411,399.8,404,398.5,404.5z"/>
	      </g>
	    </g>
	    <g class="twr4">
	      <path fill="#E2D3AC" d="M506.3 455.9l-70.8-13.8V250.9l70.8 10.6"/>
	      <path fill="#CCB88C" d="M506.3 457l60.2-18V247l-60.2 14.5"/>
	      <path fill="#F6E2B7" d="M435.5 250.9l70.8 10.6 60.2-14.5-65.5-9.1"/>
	      <g class="windowsTwr4">
	        <polygon fill="#D8A32E" points="525.6,264.6 534.3,262.5 534.3,278.5 525.6,280.5"/>
	        <polygon fill="#D8A32E" points="513.4,267 522.2,264.9 522.2,280.9 513.4,282.9"/>
	        <polygon fill="#D8A32E" points="525.6,291 534.3,289 534.3,305 525.6,307"/>
	        <polygon fill="#D8A32E" points="513.4,293.5 522.2,291.4 522.2,307.4 513.4,309.4"/>
	        <polygon fill="#D98B19" points="525.6,317.5 534.3,315.4 534.3,331.4 525.6,333.4"/>
	        <polygon fill="#D8A32E" points="513.4,319.9 522.2,317.8 522.2,333.9 513.4,335.9"/>
	        <polygon fill="#D98B19" points="525.6,344 534.3,341.9 534.3,357.9 525.6,359.9"/>
	        <polygon fill="#D98B19" points="513.4,346.4 522.2,344.3 522.2,360.3 513.4,362.3"/>
	        <polygon fill="#D98B19" points="525.6,370.4 534.3,368.3 534.3,384.4 525.6,386.3"/>
	        <polygon fill="#D98B19" points="513.4,372.8 522.2,370.8 522.2,386.8 513.4,388.8"/>
	        <polygon fill="#D8A32E" points="549.2,259.1 557.9,257 557.9,273 549.2,275"/>
	        <polygon fill="#D8A32E" points="537.1,261.5 545.8,259.4 545.8,275.4 537.1,277.4"/>
	        <polygon fill="#D8A32E" points="549.2,285.5 557.9,283.5 557.9,299.5 549.2,301.5"/>
	        <polygon fill="#D8A32E" points="537.1,288 545.8,285.9 545.8,301.9 537.1,303.9"/>
	        <polygon fill="#D98B19" points="549.2,312 557.9,309.9 557.9,325.9 549.2,327.9"/>
	        <polygon fill="#D8A32E" points="537.1,314.4 545.8,312.3 545.8,328.4 537.1,330.3"/>
	        <polygon fill="#D98B19" points="549.2,338.5 557.9,336.4 557.9,352.4 549.2,354.4"/>
	        <polygon fill="#D98B19" points="537.1,340.9 545.8,338.8 545.8,354.8 537.1,356.8"/>
	        <polygon fill="#D98B19" points="549.2,364.9 557.9,362.8 557.9,378.8 549.2,380.8"/>
	        <polygon fill="#D98B19" points="537.1,367.3 545.8,365.3 545.8,381.3 537.1,383.3"/>
	        <polygon fill="#D98B19" points="526.6,393.7 535.3,391.7 535.3,407.7 526.6,409.7"/>
	        <polygon fill="#D98B19" points="514.4,396.2 523.2,394.1 523.2,410.1 514.4,412.1"/>
	        <polygon fill="#D98B19" points="550.2,388.2 558.9,386.2 558.9,402.2 550.2,404.2"/>
	        <polygon fill="#D98B19" points="538.1,390.7 546.8,388.6 546.8,404.6 538.1,406.6"/>
	        <polygon fill="#D98B19" points="527.9,415.4 536.6,413.3 536.6,429.4 527.9,431.3"/>
	        <polygon fill="#D98B19" points="515.8,417.8 524.5,415.8 524.5,431.8 515.8,433.8"/>
	        <polygon fill="#D98B19" points="551.5,409.9 560.3,407.8 560.3,423.8 551.5,425.8"/>
	        <polygon fill="#D98B19" points="539.4,412.3 548.1,410.3 548.1,426.3 539.4,428.3"/>
	        <polygon fill="#FFD654" points="452.8,259.1 443.8,257 443.8,273.5 452.8,275.5"/>
	        <polygon fill="#FFD654" points="465.3,261.6 456.3,259.5 456.3,276 465.3,278"/>
	        <polygon fill="#FFE291" points="452.8,286.4 443.8,284.3 443.8,300.8 452.8,302.8"/>
	        <polygon fill="#FFE291" points="465.3,288.9 456.3,286.8 456.3,303.3 465.3,305.3"/>
	        <polygon fill="#FFD654" points="452.8,313.6 443.8,311.5 443.8,328 452.8,330"/>
	        <polygon fill="#FFE291" points="465.3,316.1 456.3,314 456.3,330.5 465.3,332.5"/>
	        <polygon fill="#FFE291" points="452.8,340.9 443.8,338.8 443.8,355.3 452.8,357.3"/>
	        <polygon fill="#FFD654" points="465.3,343.4 456.3,341.3 456.3,357.8 465.3,359.8"/>
	        <polygon fill="#FFD654" points="452.8,368.1 443.8,366 443.8,382.5 452.8,384.5"/>
	        <polygon fill="#FFD654" points="465.3,370.6 456.3,368.5 456.3,385 465.3,387"/>
	        <polygon fill="#FFD654" points="478.8,265.8 469.8,263.7 469.8,280.2 478.8,282.2"/>
	        <polygon fill="#FFD654" points="491.3,268.3 482.3,266.2 482.3,282.7 491.3,284.7"/>
	        <polygon fill="#FFE291" points="478.8,293.1 469.8,290.9 469.8,307.4 478.8,309.5"/>
	        <polygon fill="#FFE291" points="491.3,295.6 482.3,293.4 482.3,309.9 491.3,312"/>
	        <polygon fill="#FFD654" points="478.8,320.3 469.8,318.2 469.8,334.7 478.8,336.7"/>
	        <polygon fill="#FFE291" points="491.3,322.8 482.3,320.7 482.3,337.2 491.3,339.2"/>
	        <polygon fill="#FFD654" points="478.8,347.6 469.8,345.4 469.8,361.9 478.8,364"/>
	        <polygon fill="#FFD654" points="491.3,350.1 482.3,347.9 482.3,364.4 491.3,366.5"/>
	        <polygon fill="#FFD654" points="478.8,374.8 469.8,372.7 469.8,389.2 478.8,391.2"/>
	        <polygon fill="#FFE291" points="491.3,377.3 482.3,375.2 482.3,391.7 491.3,393.7"/>
	        <polygon fill="#FFD654" points="452.1,394.1 443.1,392 443.1,408.5 452.1,410.5"/>
	        <polygon fill="#FFD654" points="464.6,396.6 455.6,394.5 455.6,411 464.6,413"/>
	        <polygon fill="#FFD654" points="478.1,400.8 469.1,398.7 469.1,415.2 478.1,417.2"/>
	        <polygon fill="#FFE291" points="490.6,403.3 481.6,401.2 481.6,417.7 490.6,419.7"/>
	      </g>
	      <g class="sp">
	      	<path fill="#E2D3AC" d="M457.2 247.7l46.6 7.6V232l-47-6.3"/>
	      	<path fill="#CCB88C" d="M503.8 232v23.3l41-11v-21.6"/>
	      	<path fill="#F6E2B7" d="M456.8 225.7l47 6.3 41-9.3-43.3-5"/>
	      	<path fill="#E2D3AC" d="M481.8 221.7l22.5 4.5v-24.5"/>
	      	<path fill="#CCB88C" d="M504.3 201.7v24.5l18.5-5"/>
	      	<path fill="#FFD654" d="M461.8 232v11.3l36 5.4v-12"/>
	      	<path fill="#D98B19" d="M510.5 237.3v10.4l30.7-7v-11"/>
	      </g>
	    </g>
	    <g class="twr2">
	      <path fill="#E2D3AC" d="M271.2 448l-62.7-12.2V266.5l62.7 9.4"/>
	      <path fill="#CCB88C" d="M271.2 449l53.3-15.9V263l-53.3 12.9"/>
	      <path fill="#F6E2B7" d="M208.5 266.5l62.7 9.4 53.3-12.9-58-8"/>
	      <path fill="#CCB88C" d="M262 274.5v172l4 1V275m-53.5-8v171l4 1V267.5m6.5-2l49 6.5 41.5-9-46-5"/>
	      <path fill="#B9A179" d="M223 265.5l44.5-8.5 46 6-8.3 1.3-37.7-4.3-36 6.7"/>
	      <g class="windowsTwr2">
	        <polygon fill="#FFD654" points="234.1,278.1 225.1,276 225.1,292.5 234.1,294.5"/>
	        <polygon fill="#FFD654" points="246.6,280.6 237.6,278.5 237.6,295 246.6,297"/>
	        <polygon fill="#F0B234" points="234.1,305.4 225.1,303.3 225.1,319.8 234.1,321.8"/>
	        <polygon fill="#F0B234" points="246.6,307.9 237.6,305.8 237.6,322.3 246.6,324.3"/>
	        <polygon fill="#FFD654" points="234.1,332.6 225.1,330.5 225.1,347 234.1,349"/>
	        <polygon fill="#F0B234" points="246.6,335.1 237.6,333 237.6,349.5 246.6,351.5"/>
	        <polygon fill="#FFD654" points="234.1,359.9 225.1,357.8 225.1,374.3 234.1,376.3"/>
	        <polygon fill="#FFD654" points="246.6,362.4 237.6,360.3 237.6,376.8 246.6,378.8"/>
	        <polygon fill="#FFD654" points="234.1,387.1 225.1,385 225.1,401.5 234.1,403.5"/>
	        <polygon fill="#FFD654" points="246.6,389.6 237.6,387.5 237.6,404 246.6,406"/>
	        <polygon fill="#D8A32E" points="286.2,280.6 295,278.5 295,294.5 286.2,296.5"/>
	        <polygon fill="#D8A32E" points="274.1,283 282.8,280.9 282.8,296.9 274.1,298.9"/>
	        <polygon fill="#D8A32E" points="286.2,307 295,305 295,321 286.2,323"/>
	        <polygon fill="#D8A32E" points="274.1,309.5 282.8,307.4 282.8,323.4 274.1,325.4"/>
	        <polygon fill="#D98B19" points="286.2,333.5 295,331.4 295,347.4 286.2,349.4"/>
	        <polygon fill="#D8A32E" points="274.1,335.9 282.8,333.8 282.8,349.9 274.1,351.9"/>
	        <polygon fill="#D98B19" points="286.2,360 295,357.9 295,373.9 286.2,375.9"/>
	        <polygon fill="#D98B19" points="274.1,362.4 282.8,360.3 282.8,376.3 274.1,378.3"/>
	        <polygon fill="#D98B19" points="286.2,386.4 295,384.3 295,400.4 286.2,402.3"/>
	        <polygon fill="#D98B19" points="274.1,388.8 282.8,386.8 282.8,402.8 274.1,404.8"/>
	        <polygon fill="#D8A32E" points="309.9,275.1 318.6,273 318.6,289 309.9,291"/>
	        <polygon fill="#D8A32E" points="297.7,277.5 306.5,275.4 306.5,291.4 297.7,293.4"/>
	        <polygon fill="#D8A32E" points="309.9,301.5 318.6,299.5 318.6,315.5 309.9,317.5"/>
	        <polygon fill="#D8A32E" points="297.7,304 306.5,301.9 306.5,317.9 297.7,319.9"/>
	        <polygon fill="#D98B19" points="309.9,328 318.6,325.9 318.6,341.9 309.9,343.9"/>
	        <polygon fill="#D8A32E" points="297.7,330.4 306.5,328.3 306.5,344.4 297.7,346.3"/>
	        <polygon fill="#D98B19" points="274.7,416.3 274.7,447.7 319,434.3 319,406"/>
	        <polygon fill="#D8A32E" points="319,434.3 319,406 312.7,407.3 312.7,430.3"/>
	        <polygon fill="#D98B19" points="309.9,354.5 318.6,352.4 318.6,368.4 309.9,370.4"/>
	        <polygon fill="#D98B19" points="297.7,356.9 306.5,354.8 306.5,370.8 297.7,372.8"/>
	        <polygon fill="#D98B19" points="309.9,380.9 318.6,378.8 318.6,394.9 309.9,396.8"/>
	        <polygon fill="#D98B19" points="297.7,383.3 306.5,381.3 306.5,397.3 297.7,399.3"/>
	        <polygon fill="#CE7C11" points="274.7,447.7 319,434.3 312.7,430.3 275,441.7"/>
	        <path fill="#B9A179" d="M282.5 411.3v9l32-8V404"/>
	      </g>
	    </g>
	    <g class="trees">
	      <g class="t13">
	        <polygon fill="#8F861E" points="569.9,425.7 561.9,412.8 565.6,397.7 576.7,389.3 591,391.4 601.5,400.5 602.4,414.9 595,426.3 582.9,429.4"/>
			<polygon fill="#C6B52F" points="565.6,397.7 576.7,389.3 582.9,403.8"/>
			<polygon fill="#B3A42C" points="565.6,397.7 561.9,412.8 582.9,403.8"/>
			<polygon fill="#B3A42C" points="582.9,403.8 576.7,389.3 591,391.4"/>
			<polygon fill="#7D7519" points="582.9,403.8 601.5,400.5 592.5,416.1"/>
			<polygon fill="#5C4F00" points="601.5,400.5 592.5,416.1 602.4,414.9"/>
			<polygon opacity="0.7" fill="#5F5407" points="592.5,416.1 595,426.3 602.4,414.9"/>
			<polygon fill="#9D9324" points="561.9,412.8 582.9,403.8 592.5,416.1"/>
			<polygon fill="#7D7519" points="561.9,412.8 569.9,425.7 592.5,416.1"/>
			<polygon fill="#5C4F00" points="582.9,429.4 592.5,416.1 595,426.3"/>
			<polygon fill="#5C4F00" points="569.9,425.7 582.9,429.4 592.5,416.1 571.1,425.1"/>
	      </g>
	      <g class="t12">
	        <polygon fill="#737525" points="574.4,415.3 555.5,437.8 571.5,444.2 584,441.7 593.9,436.2"/>
			<polygon fill="#ACAC40" points="555.5,437.8 571.5,444.2 574.4,415.3"/>
			<polygon opacity="0.8" fill="#545101" points="574.4,415.3 584,441.7 593.9,436.2"/>
			<polygon fill="#595914" points="555.5,437.8 571.5,444.2 584,441.7 593.9,436.2 585.3,445.3 572.9,447.5 562.1,442.9"/>
			<polygon fill="#737525" points="573.8,404.2 557.5,423.6 571.4,429.1 582.1,427 590.7,422.3"/>
			<polygon fill="#ACAC40" points="557.5,423.6 571.4,429.1 573.8,404.2"/>
			<polygon opacity="0.6" fill="#57560C" points="573.8,404.2 582.1,427 590.7,422.3"/>
			<polygon fill="#595914" points="557.5,423.6 571.4,429.1 582.1,427 590.7,422.3 583.3,430.1 572.5,432 563,428.9"/>
			<polygon fill="#737525" points="573.8,393.6 560.3,411.3 571.7,415.5 581.1,413.6 587.4,411.6"/>
			<polygon fill="#ACAC40" points="560.3,411.3 571.7,415.5 573.8,393.6"/>
			<polygon opacity="0.7" fill="#666401" points="573.8,393.6 581.1,413.6 587.4,411.6"/>
			<polygon fill="#595914" points="560.3,411.3 566.1,414.4 571.7,415.5 581.1,413.6 587.4,411.6 582,417.2 572.6,418.9 
				564.3,416.1"/>
			<polygon fill="#C0BF46" points="560.3,411.3 573.8,393.6 566.2,414.2"/>
			<polygon fill="#C0BF46" points="557.5,423.3 563.9,416.1 571.5,428.9"/>
	      </g>
	      <g class="t11">
	        <polygon fill="#8F861E" points="165.8,436.2 156.9,421.8 161,405 173.4,395.6 189.3,398 201,408 202,424.1 193.7,436.9 
				180.3,440.2"/>
			<polygon fill="#C6B52F" points="161,405 173.4,395.6 180.3,411.7"/>
			<polygon fill="#B3A42C" points="161,405 156.9,421.8 180.3,411.7"/>
			<polygon fill="#B3A42C" points="180.3,411.7 173.4,395.6 189.3,398"/>
			<polygon fill="#7D7519" points="180.3,411.7 201,408 191,425.5"/>
			<polygon fill="#5C4F00" points="201,408 191,425.5 202,424.1"/>
			<polygon opacity="0.7" fill="#5F5407" points="191,425.5 193.7,436.9 202,424.1"/>
			<polygon fill="#9D9324" points="156.9,421.8 180.3,411.7 191,425.5"/>
			<polygon fill="#7D7519" points="156.9,421.8 165.8,436.2 191,425.5"/>
			<polygon fill="#5C4F00" points="180.3,440.2 191,425.5 193.7,436.9"/>
			<polygon fill="#5C4F00" points="165.8,436.2 180.3,440.2 191,425.5 167.2,435.5"/>
	      </g>
	      <g class="t10">
	        <polygon fill="#9B9020" points="199.8,443.2 190.9,428.8 195,412 207.4,402.6 223.3,405 235,415 236,431.1 227.7,443.9 
				214.3,447.2"/>
			<polygon fill="#D2C032" points="195,412 207.4,402.6 214.3,418.7"/>
			<polygon fill="#BEAF2E" points="195,412 190.9,428.8 214.3,418.7"/>
			<polygon fill="#BEAF2E" points="214.3,418.7 207.4,402.6 223.3,405"/>
			<polygon fill="#8A801C" points="214.3,418.7 235,415 225,432.5"/>
			<polygon fill="#695A00" points="235,415 225,432.5 236,431.1"/>
			<polygon opacity="0.7" fill="#6C6008" points="225,432.5 227.7,443.9 236,431.1"/>
			<polygon fill="#A89C28" points="190.9,428.8 214.3,418.7 225,432.5"/>
			<polygon fill="#8A801C" points="190.9,428.8 199.8,443.2 225,432.5"/>
			<polygon fill="#695A00" points="214.3,447.2 225,432.5 227.7,443.9"/>
			<polygon fill="#695A00" points="199.8,443.2 214.3,447.2 225,432.5 201.2,442.5"/>
	      </g>
	      <g class="t9">
	        <polygon fill="#B0A525" points="235.8,450.2 226.9,435.8 231,419 243.4,409.6 259.3,412 271,422 272,438.1 263.7,450.9 
				250.3,454.2"/>
			<polygon fill="#E7D337" points="231,419 243.4,409.6 250.3,425.7"/>
			<polygon fill="#D3C234" points="231,419 226.9,435.8 250.3,425.7"/>
			<polygon fill="#D3C234" points="250.3,425.7 243.4,409.6 259.3,412"/>
			<polygon fill="#A19520" points="250.3,425.7 271,422 261,439.5"/>
			<polygon fill="#826F00" points="271,422 261,439.5 272,438.1"/>
			<polygon opacity="0.7" fill="#85760A" points="261,439.5 263.7,450.9 272,438.1"/>
			<polygon fill="#BEB12C" points="226.9,435.8 250.3,425.7 261,439.5"/>
			<polygon fill="#A19520" points="226.9,435.8 235.8,450.2 261,439.5"/>
			<polygon fill="#826F00" points="250.3,454.2 261,439.5 263.7,450.9"/>
			<polygon fill="#826F00" points="235.8,450.2 250.3,454.2 261,439.5 237.2,449.5"/>
	      </g>
	      <g class="t8">
	        <polygon fill="#8F861E" points="349.3,421.2 345,414.2 347,406.1 353,401.6 360.7,402.7 366.3,407.6 366.8,415.4 362.8,421.5 
				356.3,423.1"/>
			<polygon fill="#C6B52F" points="347,406.1 353,401.6 356.3,409.3"/>
			<polygon fill="#B3A42C" points="347,406.1 345,414.2 356.3,409.3"/>
			<polygon fill="#B3A42C" points="356.3,409.3 353,401.6 360.7,402.7"/>
			<polygon fill="#7D7519" points="356.3,409.3 366.3,407.6 361.5,416"/>
			<polygon fill="#5C4F00" points="366.3,407.6 361.5,416 366.8,415.4"/>
			<polygon opacity="0.7" fill="#5F5407" points="361.5,416 362.8,421.5 366.8,415.4"/>
			<polygon fill="#9D9324" points="345,414.2 356.3,409.3 361.5,416"/>
			<polygon fill="#7D7519" points="345,414.2 349.3,421.2 361.5,416"/>
			<polygon fill="#5C4F00" points="356.3,423.1 361.5,416 362.8,421.5"/>
			<polygon fill="#5C4F00" points="349.3,421.2 356.3,423.1 361.5,416 350,420.9"/>
	      </g>
	      <g class="t7">
	        <polygon fill="#8F861E" points="438.5,454 429.6,439.6 433.7,422.8 446.1,413.4 462,415.8 473.7,425.8 474.7,441.9 466.4,454.6 
				453,458"/>
			<polygon fill="#C6B52F" points="433.7,422.8 446.1,413.4 453,429.5"/>
			<polygon fill="#B3A42C" points="433.7,422.8 429.6,439.6 453,429.5"/>
			<polygon fill="#B3A42C" points="453,429.5 446.1,413.4 462,415.8"/>
			<polygon fill="#7D7519" points="453,429.5 473.7,425.8 463.7,443.2"/>
			<polygon fill="#5C4F00" points="473.7,425.8 463.7,443.2 474.7,441.9"/>
			<polygon opacity="0.7" fill="#5F5407" points="463.7,443.2 466.4,454.6 474.7,441.9"/>
			<polygon fill="#9D9324" points="429.6,439.6 453,429.5 463.7,443.2"/>
			<polygon fill="#7D7519" points="429.6,439.6 438.5,454 463.7,443.2"/>
			<polygon fill="#5C4F00" points="453,458 463.7,443.2 466.4,454.6"/>
			<polygon fill="#5C4F00" points="438.5,454 453,458 463.7,443.2 439.9,453.3"/>
	      </g>
	      <g class="t6">
	        <polygon fill="#8F861E" points="400.3,407.2 396,400.2 398,392.1 404,387.6 411.7,388.7 417.3,393.6 417.8,401.4 413.8,407.5 
				407.3,409.1"/>
			<polygon fill="#C6B52F" points="398,392.1 404,387.6 407.3,395.3"/>
			<polygon fill="#B3A42C" points="398,392.1 396,400.2 407.3,395.3"/>
			<polygon fill="#B3A42C" points="407.3,395.3 404,387.6 411.7,388.7"/>
			<polygon fill="#7D7519" points="407.3,395.3 417.3,393.6 412.5,402"/>
			<polygon fill="#5C4F00" points="417.3,393.6 412.5,402 417.8,401.4"/>
			<polygon opacity="0.7" fill="#5F5407" points="412.5,402 413.8,407.5 417.8,401.4"/>
			<polygon fill="#9D9324" points="396,400.2 407.3,395.3 412.5,402"/>
			<polygon fill="#7D7519" points="396,400.2 400.3,407.2 412.5,402"/>
			<polygon fill="#5C4F00" points="407.3,409.1 412.5,402 413.8,407.5"/>
			<polygon fill="#5C4F00" points="400.3,407.2 407.3,409.1 412.5,402 401,406.9"/>
	      </g>
	      <g class="t5">
	        <polygon fill="#8F861E" points="387.3,410.7 383,403.7 385,395.6 391,391.1 398.7,392.2 404.3,397.1 404.8,404.9 400.8,411 
				394.3,412.6"/>
			<polygon fill="#C6B52F" points="385,395.6 391,391.1 394.3,398.8"/>
			<polygon fill="#B3A42C" points="385,395.6 383,403.7 394.3,398.8"/>
			<polygon fill="#B3A42C" points="394.3,398.8 391,391.1 398.7,392.2"/>
			<polygon fill="#7D7519" points="394.3,398.8 404.3,397.1 399.5,405.5"/>
			<polygon fill="#5C4F00" points="404.3,397.1 399.5,405.5 404.8,404.9"/>
			<polygon opacity="0.7" fill="#5F5407" points="399.5,405.5 400.8,411 404.8,404.9"/>
			<polygon fill="#9D9324" points="383,403.7 394.3,398.8 399.5,405.5"/>
			<polygon fill="#7D7519" points="383,403.7 387.3,410.7 399.5,405.5"/>
			<polygon fill="#5C4F00" points="394.3,412.6 399.5,405.5 400.8,411"/>
			<polygon fill="#5C4F00" points="387.3,410.7 394.3,412.6 399.5,405.5 388,410.4"/>
	      </g>
	      <g class="t4">
	        <polygon fill="#9B9020" points="475,458.5 466.1,444.1 470.2,427.3 482.6,417.9 498.5,420.3 510.2,430.3 511.2,446.4 502.9,459.1 489.5,462.5"/>
			<polygon fill="#D2C032" points="470.2,427.3 482.6,417.9 489.5,434"/>
			<polygon fill="#BEAF2E" points="470.2,427.3 466.1,444.1 489.5,434"/>
			<polygon fill="#BEAF2E" points="489.5,434 482.6,417.9 498.5,420.3"/>
			<polygon fill="#8A801C" points="489.5,434 510.2,430.3 500.2,447.7"/>
			<polygon fill="#695A00" points="510.2,430.3 500.2,447.7 511.2,446.4"/>
			<polygon opacity="0.7" fill="#6C6008" points="500.2,447.7 502.9,459.1 511.2,446.4"/>
			<polygon fill="#A89C28" points="466.1,444.1 489.5,434 500.2,447.7"/>
			<polygon fill="#8A801C" points="466.1,444.1 475,458.5 500.2,447.7"/>
			<polygon fill="#695A00" points="489.5,462.5 500.2,447.7 502.9,459.1"/>
			<polygon fill="#695A00" points="475,458.5 489.5,462.5 500.2,447.7 476.4,457.8"/>
	      </g>
	      <g class="t3">
	        <polygon fill="#737525" points="552.8,425.3 534,447.7 550,454.1 562.5,451.6 572.4,446.2"/>
			<polygon fill="#ACAC40" points="534,447.7 550,454.1 552.8,425.3"/>
			<polygon opacity="0.8" fill="#545101" points="552.8,425.3 562.5,451.6 572.4,446.2"/>
			<polygon fill="#595914" points="534,447.7 550,454.1 562.5,451.6 572.4,446.2 563.8,455.3 551.3,457.4 540.6,452.8"/>
			<polygon fill="#737525" points="552.3,414.1 536,433.5 549.8,439.1 560.6,436.9 569.2,432.2"/>
			<polygon fill="#ACAC40" points="536,433.5 549.8,439.1 552.3,414.1"/>
			<polygon opacity="0.6" fill="#57560C" points="552.3,414.1 560.6,436.9 569.2,432.2"/>
			<polygon fill="#595914" points="536,433.5 549.8,439.1 560.6,436.9 569.2,432.2 561.7,440.1 551,441.9 541.5,438.8"/>
			<polygon fill="#737525" points="552.3,403.6 538.8,421.2 550.2,425.4 559.6,423.5 565.9,421.5"/>
			<polygon fill="#ACAC40" points="538.8,421.2 550.2,425.4 552.3,403.6"/>
			<polygon opacity="0.7" fill="#666401" points="552.3,403.6 559.6,423.5 565.9,421.5"/>
			<polygon fill="#595914" points="538.8,421.2 544.6,424.3 550.2,425.4 559.6,423.5 565.9,421.5 560.5,427.2 551.1,428.8 542.8,426.1"/>
			<polygon fill="#C0BF46" points="538.8,421.2 552.3,403.6 544.7,424.1"/>
			<polygon fill="#C0BF46" points="536,433.3 542.4,426 550,438.8"/>
	      </g>
	      <g class="t2">
	        <polygon fill="#737525" points="621.3,412.5 602.5,434.9 618.5,441.4 630.9,438.9 640.8,433.4"/>
	        <polygon fill="#ACAC40" points="602.5,434.9 618.5,441.4 621.3,412.5"/>
	        <polygon opacity="0.8" fill="#545101" points="621.3,412.5 630.9,438.9 640.8,433.4"/>
	        <polygon fill="#595914" points="602.5,434.9 618.5,441.4 630.9,438.9 640.8,433.4 632.2,442.5 619.8,444.7 609.1,440"/>
	        <polygon fill="#737525" points="620.7,401.4 604.5,420.8 618.3,426.3 629.1,424.2 637.6,419.4"/>
	        <polygon fill="#ACAC40" points="604.5,420.8 618.3,426.3 620.7,401.4"/>
	        <polygon opacity="0.6" fill="#57560C" points="620.7,401.4 629.1,424.2 637.6,419.4"/>
	        <polygon fill="#595914" points="604.5,420.8 618.3,426.3 629.1,424.2 637.6,419.4 630.2,427.3 619.4,429.2 609.9,426.1"/>
	        <polygon fill="#737525" points="620.8,390.8 607.3,408.5 618.6,412.6 628,410.7 634.4,408.7"/>
	        <polygon fill="#ACAC40" points="607.3,408.5 618.6,412.6 620.8,390.8"/>
	        <polygon opacity="0.7" fill="#666401" points="620.8,390.8 628,410.7 634.4,408.7"/>
	        <polygon fill="#595914" points="607.3,408.5 613.1,411.5 618.6,412.6 628,410.7 634.4,408.7 629,414.4 619.6,416 611.3,413.3"/>
	        <polygon fill="#C0BF46" points="607.3,408.5 620.8,390.8 613.1,411.3"/>
	        <polygon fill="#C0BF46" points="604.5,420.5 610.8,413.3 618.4,426"/>
	      </g>
	      <g class="t1">
	        <polygon fill="#8F861E" points="329.9,426.1 325.6,419.1 327.6,411 333.6,406.4 341.3,407.5 346.9,412.4 347.4,420.2 343.4,426.4 336.9,428"/>
        	<polygon fill="#C6B52F" points="327.6,411 333.6,406.4 336.9,414.2"/>
        	<polygon fill="#B3A42C" points="327.6,411 325.6,419.1 336.9,414.2"/>
        	<polygon fill="#B3A42C" points="336.9,414.2 333.6,406.4 341.3,407.5"/>
        	<polygon fill="#7D7519" points="336.9,414.2 346.9,412.4 342.1,420.9"/>
        	<polygon fill="#5C4F00" points="346.9,412.4 342.1,420.9 347.4,420.2"/>
        	<polygon opacity="0.7" fill="#5F5407" points="342.1,420.9 343.4,426.4 347.4,420.2"/>
        	<polygon fill="#9D9324" points="325.6,419.1 336.9,414.2 342.1,420.9"/>
        	<polygon fill="#7D7519" points="325.6,419.1 329.9,426.1 342.1,420.9"/>
        	<polygon fill="#5C4F00" points="336.9,428 342.1,420.9 343.4,426.4"/>
        	<polygon fill="#5C4F00" points="329.9,426.1 336.9,428 342.1,420.9 330.6,425.7"/>
	      </g>
	    </g>
	  </g>
	</svg>
</div>
              
            
!

CSS

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

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

svg { visibility: hidden }

.FollowMe {
	position: fixed;
	top: 5%;
	left: 5%;
	background-image: url("https://smalinux.github.io/myImg.jpg");
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	cursor: pointer;
  z-index: 3
}
a { z-index: 3 }
              
            
!

JS

              
                TweenMax.set(".container", {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50,
  width: "100%",
  height: "100%"
})

TweenMax.set('svg', { 
  width: '100%',
  height: '100%', 
  visibility: 'visible' 
})

var tl = new TimelineMax();

tl.from("background", 1, {
  scale: 0,  
  transformOrigin: '50% 50%'
})
.from(".GreenFloar", 1 , {
  scale: 0, 
  transformOrigin: '50% 50%'
})
.staggerFrom(".ElBase path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0,
  cycle: {
    x: [100,-100],
    y: [-100,100],
    rotation: [90,-90]
  }
})
.from(".Asfalt", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
})
.to("svg", 2, {
  scale: 2,
  x : '0%',
  y : '20%',
  ease: Back.easeOut
})
.from(".twr1", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 100%',
  scale: 0,
  width: 0,
  ease: Back.easeOut
})
.staggerFrom(".windowsTwr1 polygon", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 100%',
  scale: 0
}, 0.1)
.to("svg", 2, {
  scale: 2,
  x : '20%',
  ease: Back.easeOut
},"key2")
.from(".twr2", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 100%',
  scale: 0,
  width: 0,
  ease: Back.easeOut
},"key2")
.staggerFrom(".windowsTwr2 polygon", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
}, 0.1)
.staggerFrom(".windowsTwr2 path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
}, 0.1)
.to("svg", 2, {
  scale: 2,
  x : '0%',
  ease: Back.easeOut
},"key3")
.from(".twr3", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 100%',
  scale: 0,
  ease: Back.easeOut
},"key3")
.staggerFrom(".windowsTwr3 polygon", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
}, 0.1)
.staggerFrom(".windowsTwr3 path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
}, 0.1)
.to("svg", 2, {
  scale: 2,
  x : '-15%',
  ease: Back.easeOut
},"key4")
.from(".twr4", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 100%',
  scale: 0,
  ease: Back.easeOut
},"key4")
.staggerFrom(".windowsTwr4 polygon", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
}, 0.1)
.staggerFrom(".twr4 .sp path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0
}, 0.1)
.to("svg", 2, {
  scale: 1.5,
  x : '0%',
  y : '0%',
  ease: Back.easeOut
},"key5")
.staggerFrom([".t1 polygon",".t2 polygon",".t3 polygon",".t4 polygon",".t5 polygon",".t6 polygon",
  ".t7 polygon",".t8 polygon",".t9 polygon",".t10 polygon",".t11 polygon",".t12 polygon",".t13 polygon"], 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0,
  ease: Back.easeOut,
  cycle: {
    rotation: [360,-360]
  }
}, 0.4, "key5")
.to("svg", 2, {
  scale: 1,
  x : '0%',
  y : '0%',
  ease: Back.easeOut
})
.staggerFrom(".clouds .c1 path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0,
  cycle: {
    x: [-100,100],
    y: [100,-100],
    rotation: [90,-90]
  }
})
.staggerFrom(".clouds .c2 path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0,
  cycle: {
    x: [-100,100],
    y: [100,-100],
    rotation: [90,-90]
  }
})
.staggerFrom(".clouds .c3 path", 1 , {
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  scale: 0,
  cycle: {
    x: [100,-100],
    y: [-100,100],
    rotation: [-90,90]
  }
})
.to("svg", 10, {
  yoyo: true,
  repeat: -1,
  y: -30
}, "flag+=2")
.to(".c1", 5, {
  yoyo: true,
  repeat: -1,
  y: -50
}, "flag+=2")
.to(".c2", 5, {
  yoyo: true,
  repeat: -1,
  y: 50
}, "flag+=2")
.to(".c3", 15, {
  yoyo: true,
  repeat: -1,
  x: -500
}, "flag+=2")


// Control
tl.timeScale(1.5)
              
            
!
999px

Console