Urban landscape in polygonal style

index.html

<a href="http://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>

script.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)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.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 }

urban-landscape-in-polygonal-style.markdown

Urban landscape in polygonal style

Assets

A Pen by Sohaib Mohammed on CodePen.

License.