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

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <div class="gradient"></div>
<div class="scene-wrapper">
  <canvas></canvas>
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 494.5 559.4" style="enable-background:new 0 0 494.5 559.4;" xml:space="preserve">
			<style type="text/css">
				.st0{clip-path:url(#outline_2_);}
				.st1{clip-path:url(#wavesMask_1_);fill:#E2E2E2;}
				.st2{clip-path:url(#wavesMask_1_);}
				.st3{fill:none;stroke:#D8D8D8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
				.st4{clip-path:url(#wavesMask_1_);fill:#FFFFFF;}
				.st5{fill:none;stroke:#555656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
				.st6{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st7{fill:#EEEDEE;stroke:#555656;stroke-miterlimit:10;}
				.st8{fill:#FFFFFF;stroke:#555656;stroke-miterlimit:10;}
				.st9{fill:none;stroke:#555656;stroke-miterlimit:10;}
				.st10{fill:#C2C1C0;}
				.st11{fill:#A7ABB5;stroke:#555656;stroke-miterlimit:10;}
				.st12{fill:#7B7B7B;stroke:#555656;stroke-miterlimit:10;}
				.st13{fill:#DDDEE0;stroke:#555656;stroke-miterlimit:10;}
				.st14{fill:#ED2024;stroke:#555656;stroke-miterlimit:10;}
				.st15{fill:#E0DEDE;stroke:#555656;stroke-miterlimit:10;}
				.st16{fill:none;stroke:#B7B7B7;stroke-width:0.5;stroke-miterlimit:10;}
				.st17{fill:#EDEEEF;stroke:#555656;stroke-miterlimit:10;}
				.st18{fill:none;stroke:#C2C1C0;stroke-miterlimit:10;}
				.st19{fill:#D8D8D8;stroke:#555656;stroke-miterlimit:10;}
				.st20{fill:#E5E5E5;stroke:#555656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
				.st21{fill:#FFFFFF;stroke:#555656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
				.st22{fill:#EEEDEE;}
				.st23{fill:none;}
			</style>
			<g id="Water">
				<g id="outlineMask-group">
					<defs>
						<circle id="outline_3_" cx="246" cy="324.1" r="234.2"/>
					</defs>
					<clipPath id="outline_2_">
						<use xlink:href="#outline_3_"  style="overflow:visible;"/>
					</clipPath>
					<g id="waves-mask-group" class="st0">
						<defs>
							<path id="wavesMask" d="M473.8,378.6C449.3,481.7,356.6,558.4,246,558.4c-110.8,0-203.7-77-228-180.4"/>
						</defs>
						<clipPath id="wavesMask_1_">
							<use xlink:href="#wavesMask"  style="overflow:visible;"/>
						</clipPath>
						<path id="water-color" class="st1" d="M473.8,378.6C449.3,481.7,356.6,558.4,246,558.4c-110.8,0-203.7-77-228-180.4"/>
						<g id="waves" class="st2">
							<path class="st3" d="M15.2,381.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,391.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,401.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,411.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,421.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,431.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,441.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,451.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,461.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,471.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,481.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,491.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,501.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,511.4c0,0,24.5,2.5,59-11.5c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5c42,14,52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,521.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6
								c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5c42,14,52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,531.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,541.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,551.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,561.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,571.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,581.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,591.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,386.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,396.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,406.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,416.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,426.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,436.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,446.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,456.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,466.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,476.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,486.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,496.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,506.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,516.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6
								c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5c42,14,52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,526.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,536.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2c34.5-14,61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,546.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,556.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,566.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,576.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,586.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
							<path class="st3" d="M15.2,596.4c0,0,24.5,2.5,59-11.5s61-11.5,61-11.5s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2
								s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53.2,11.6,53.2,11.6s24.8,2.4,59.3-11.6s61-11.5,61-11.5
								s19.5-2.5,61.5,11.5s52.8,12.2,52.8,12.2s24.2,1.8,58.8-12.2s61-11.5,61-11.5s19.5-2.5,61.5,11.5s53,11.7,53,11.7"/>
						</g>
						<rect id="hide-top-of-waves" y="328.5" class="st4" width="494.5" height="49.7"/>
					</g>
				</g>
				<g id="boat-2">
					<polygon class="st5" points="173.1,434.8 167.5,445.6 172.8,445.6 178.1,445.6 		"/>
					<line class="st5" x1="173.1" y1="434.8" x2="172.8" y2="445.6"/>
					<line class="st5" x1="168.9" y1="448.8" x2="175.4" y2="448.8"/>
					<line class="st5" x1="172.8" y1="445.6" x2="172.8" y2="448.8"/>
				</g>
				<g id="boat-1">
					<polygon class="st5" points="313.1,464.8 307.5,475.6 312.8,475.6 318.1,475.6 		"/>
					<line class="st5" x1="313.1" y1="464.8" x2="312.8" y2="475.6"/>
					<line class="st5" x1="308.9" y1="478.8" x2="315.4" y2="478.8"/>
					<line class="st5" x1="312.8" y1="475.6" x2="312.8" y2="478.8"/>
				</g>
			</g>
			<g id="outline">
				<circle id="outline_1_" class="st6" cx="246" cy="324.1" r="234.2"/>
			</g>
			<g id="buildings">
				<g id="skydome">
					<path id="roof-top" class="st7" d="M188.1,350.6c0.2,0,0.3-0.2,0.2-0.3c-31.4-36.7-91.7-36-91.7-36s-51.3-4-96,36.3"/>
					<path id="roof-middle" class="st8" d="M176.1,350.6c-25.8-27.7-80-28.4-80-28.4s-45.8-2.1-82.5,28.4"/>
					<rect id="building-bottom" x="0.5" y="350.6" class="st7" width="188" height="28"/>
					<g id="skydome-windows">
						<g id="window-frames">
							<rect x="12.2" y="360" class="st8" width="47.1" height="18.6"/>
							<rect x="68.7" y="360" class="st8" width="47.1" height="18.6"/>
							<rect x="125.2" y="360" class="st8" width="47.1" height="18.6"/>
							<line class="st9" x1="27.9" y1="360" x2="27.9" y2="378.6"/>
							<line class="st9" x1="43.5" y1="360" x2="43.5" y2="378.6"/>
							<line class="st9" x1="83.9" y1="360" x2="83.9" y2="378.6"/>
							<line class="st9" x1="99.5" y1="360" x2="99.5" y2="378.6"/>
							<line class="st9" x1="140.9" y1="360" x2="140.9" y2="378.6"/>
							<line class="st9" x1="156.5" y1="360" x2="156.5" y2="378.6"/>
						</g>
						<g id="windows-left">
							<rect x="49.1" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="46" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="52.2" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="55.4" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="49.1" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="46" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="52.2" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="55.4" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="49.1" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="46" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="52.2" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="55.4" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="49.1" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="46" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="52.2" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="55.4" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="49.1" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="46" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="52.2" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="55.4" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="39.6" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="33.4" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="30.2" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="36.5" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="39.6" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="33.4" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="30.2" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="36.5" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="39.6" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="33.4" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="30.2" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="36.5" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="39.6" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="33.4" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="30.2" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="36.5" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="39.6" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="33.4" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="30.2" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="36.5" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="17.7" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="14.6" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="20.9" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="24" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="17.7" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="14.6" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="20.9" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="24" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="17.7" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="14.6" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="20.9" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="24" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="17.7" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="14.6" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="20.9" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="24" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="17.7" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="14.6" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="20.9" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="24" y="374.5" class="st10" width="1.5" height="1.5"/>
						</g>
						<g id="windows-center">
							<rect x="105.5" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="102.4" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="108.6" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="111.8" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="105.5" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="102.4" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="108.6" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="111.8" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="105.5" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="102.4" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="108.6" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="111.8" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="105.5" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="102.4" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="108.6" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="111.8" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="105.5" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="102.4" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="108.6" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="111.8" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="96" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="89.7" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="86.6" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="92.9" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="96" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="89.7" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="86.6" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="92.9" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="96" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="89.7" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="86.6" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="92.9" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="96" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="89.7" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="86.6" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="92.9" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="96" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="89.7" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="86.6" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="92.9" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="74.1" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="71" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="77.2" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="80.4" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="74.1" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="71" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="77.2" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="80.4" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="74.1" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="71" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="77.2" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="80.4" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="74.1" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="71" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="77.2" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="80.4" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="74.1" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="71" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="77.2" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="80.4" y="374.5" class="st10" width="1.5" height="1.5"/>
						</g>
						<g id="windows-right">
							<rect x="162.2" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="159.1" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="165.3" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="168.5" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="162.2" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="159.1" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="165.3" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="168.5" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="162.2" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="159.1" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="165.3" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="168.5" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="162.2" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="159.1" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="165.3" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="168.5" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="162.2" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="159.1" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="165.3" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="168.5" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="152.7" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="146.4" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="143.3" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="149.6" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="152.7" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="146.4" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="143.3" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="149.6" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="152.7" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="146.4" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="143.3" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="149.6" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="152.7" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="146.4" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="143.3" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="149.6" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="152.7" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="146.4" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="143.3" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="149.6" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="130.8" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="127.7" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="134" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="137.1" y="362.5" class="st10" width="1.5" height="1.5"/>
							<rect x="130.8" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="127.7" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="134" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="137.1" y="365.5" class="st10" width="1.5" height="1.5"/>
							<rect x="130.8" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="127.7" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="134" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="137.1" y="368.5" class="st10" width="1.5" height="1.5"/>
							<rect x="130.8" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="127.7" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="134" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="137.1" y="371.5" class="st10" width="1.5" height="1.5"/>
							<rect x="130.8" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="127.7" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="134" y="374.5" class="st10" width="1.5" height="1.5"/>
							<rect x="137.1" y="374.5" class="st10" width="1.5" height="1.5"/>
						</g>
					</g>
				</g>
				<g id="cntower">
					<ellipse class="st8" cx="247.1" cy="83.1" rx="7.1" ry="2.3"/>
					<rect x="242.6" y="84.9" class="st11" width="8.7" height="42.2"/>
					<path class="st8" d="M258.7,130.4c0-2.6-5.2-4.7-11.7-4.7s-11.7,2.1-11.7,4.7c0,5.6,5.2,4.7,11.7,4.7
						C253.4,135.1,258.7,135.2,258.7,130.4z"/>
					<path class="st11" d="M263.8,145.4c0,7.3-7.6,13.2-16.9,13.2c-9.3,0-16.9-5.9-16.9-13.2s3.5-15.7,16.7-15.7
						C260.3,129.7,263.8,138.1,263.8,145.4z"/>
					<ellipse class="st8" cx="247" cy="153" rx="16.9" ry="5.3"/>
					<path class="st12" d="M260.3,155.4c0,2.1-6,3.2-13.4,3.2s-13.4-1.2-13.4-3.2c0-2.1,6-3.8,13.4-3.8S260.3,153.3,260.3,155.4z"/>
					<rect x="244" y="38.8" class="st8" width="5.9" height="40"/>
					<path class="st8" d="M243.9,76.6c0,0-4.3,2.8-3.9,6.5h14.3c0,0-0.2-3.6-4.1-6.5H243.9z"/>
					<path class="st11" d="M252.3,155.1c-3,54.2,6.2,223.4,6.2,223.4h-25.7c8.5-108.7,9-223.4,9-223.4s2.3-1.3,5.4-1.2
						C250.4,154.1,252.3,155.1,252.3,155.1z"/>
					<path class="st13" d="M229.3,138.2c0-0.1,0-0.1,0.1-0.2c0.6-0.5,4.9-3.3,17.6-3.3c12.6,0,17.1,2.9,17.6,3.3l0.1,0.1v7.3
						c0,0.2-0.1,0.3-0.3,0.2c-1.3-0.7-7.6-3.3-17.6-3.3s-15.9,2.6-17.2,3.3c-0.2,0.1-0.3,0-0.3-0.2L229.3,138.2L229.3,138.2z"/>
					<path class="st8" d="M250.6,85.3"/>
					<path class="st8" d="M247.1,82.3"/>
					<rect x="245.4" y="25.4" class="st8" width="3.2" height="13.3"/>
					<rect x="245.8" y="10.2" class="st8" width="2.3" height="15.2"/>
					<rect x="246.6" y="0.5" class="st14" width="0.7" height="9.8"/>
					<path id="elevator-shaft" class="st15" d="M248.9,154.1c0.1,0,0.2,0.1,0.2,0.2L249,378.6h-4.2V154.3c0-0.1,0.1-0.2,0.2-0.2
						C245,154.1,246.8,153.7,248.9,154.1z"/>
					<g id="window_dividers">
						<line class="st15" x1="245.3" y1="159.5" x2="248.5" y2="159.5"/>
						<line class="st15" x1="245.3" y1="164.5" x2="248.5" y2="164.5"/>
						<line class="st15" x1="245.3" y1="169.5" x2="248.5" y2="169.5"/>
						<line class="st15" x1="245.3" y1="174.5" x2="248.5" y2="174.5"/>
						<line class="st15" x1="245.3" y1="179.5" x2="248.5" y2="179.5"/>
						<line class="st15" x1="245.3" y1="184.5" x2="248.5" y2="184.5"/>
						<line class="st15" x1="245.3" y1="189.5" x2="248.5" y2="189.5"/>
						<line class="st15" x1="245.3" y1="194.5" x2="248.5" y2="194.5"/>
						<line class="st15" x1="245.3" y1="199.5" x2="248.5" y2="199.5"/>
						<line class="st15" x1="245.3" y1="204.5" x2="248.5" y2="204.5"/>
						<line class="st15" x1="245.3" y1="209.5" x2="248.5" y2="209.5"/>
						<line class="st15" x1="245.3" y1="214.5" x2="248.5" y2="214.5"/>
						<line class="st15" x1="245.3" y1="219.5" x2="248.5" y2="219.5"/>
						<line class="st15" x1="245.3" y1="224.5" x2="248.5" y2="224.5"/>
						<line class="st15" x1="245.3" y1="229.5" x2="248.5" y2="229.5"/>
						<line class="st15" x1="245.3" y1="234.5" x2="248.5" y2="234.5"/>
						<line class="st15" x1="245.3" y1="239.5" x2="248.5" y2="239.5"/>
						<line class="st15" x1="245.3" y1="244.5" x2="248.5" y2="244.5"/>
						<line class="st15" x1="245.3" y1="249.5" x2="248.5" y2="249.5"/>
						<line class="st15" x1="245.3" y1="254.5" x2="248.5" y2="254.5"/>
						<line class="st15" x1="245.3" y1="259.5" x2="248.5" y2="259.5"/>
						<line class="st15" x1="245.3" y1="264.5" x2="248.5" y2="264.5"/>
						<line class="st15" x1="245.3" y1="269.5" x2="248.5" y2="269.5"/>
						<line class="st15" x1="245.3" y1="274.5" x2="248.5" y2="274.5"/>
						<line class="st15" x1="245.3" y1="279.5" x2="248.5" y2="279.5"/>
						<line class="st15" x1="245.3" y1="284.5" x2="248.5" y2="284.5"/>
						<line class="st15" x1="245.3" y1="289.5" x2="248.5" y2="289.5"/>
						<line class="st15" x1="245.3" y1="294.5" x2="248.5" y2="294.5"/>
						<line class="st15" x1="245.3" y1="299.5" x2="248.5" y2="299.5"/>
						<line class="st15" x1="245.3" y1="304.5" x2="248.5" y2="304.5"/>
						<line class="st15" x1="245.3" y1="309.5" x2="248.5" y2="309.5"/>
						<line class="st15" x1="245.3" y1="314.5" x2="248.5" y2="314.5"/>
						<line class="st15" x1="245.3" y1="319.5" x2="248.5" y2="319.5"/>
						<line class="st15" x1="245.3" y1="324.5" x2="248.5" y2="324.5"/>
						<line class="st15" x1="245.3" y1="329.5" x2="248.5" y2="329.5"/>
						<line class="st15" x1="245.3" y1="334.5" x2="248.5" y2="334.5"/>
						<line class="st15" x1="245.3" y1="339.5" x2="248.5" y2="339.5"/>
						<line class="st15" x1="245.3" y1="344.5" x2="248.5" y2="344.5"/>
						<line class="st15" x1="245.3" y1="349.5" x2="248.5" y2="349.5"/>
						<line class="st15" x1="245.3" y1="354.5" x2="248.5" y2="354.5"/>
						<line class="st15" x1="245.3" y1="359.5" x2="248.5" y2="359.5"/>
						<line class="st15" x1="245.3" y1="364.5" x2="248.5" y2="364.5"/>
						<line class="st15" x1="245.3" y1="369.5" x2="248.5" y2="369.5"/>
						<line class="st15" x1="245.3" y1="374.5" x2="248.5" y2="374.5"/>
					</g>
					<g id="main_windows">
						<line class="st16" x1="246.8" y1="141.8" x2="246.8" y2="135.2"/>
						<line class="st16" x1="241.8" y1="142.1" x2="241.8" y2="135.4"/>
						<line class="st16" x1="236.8" y1="142.8" x2="236.8" y2="136"/>
						<line class="st16" x1="231.8" y1="144.2" x2="231.8" y2="137.3"/>
						<line class="st16" x1="251.8" y1="142.1" x2="251.8" y2="135.4"/>
						<line class="st16" x1="256.8" y1="142.7" x2="256.8" y2="136"/>
						<line class="st16" x1="261.8" y1="144" x2="261.8" y2="137.2"/>
					</g>
				</g>
				<g id="building-1">
					<rect x="180.9" y="306.9" class="st11" width="39.6" height="71.7"/>
					<g id="windows">
						<line class="st9" x1="187.5" y1="311.4" x2="187.5" y2="374.5"/>
						<line class="st9" x1="194.1" y1="311.4" x2="194.1" y2="374.5"/>
						<line class="st9" x1="207.3" y1="311.4" x2="207.3" y2="374.5"/>
						<line class="st9" x1="213.9" y1="311.4" x2="213.9" y2="374.5"/>
						<line class="st9" x1="200.7" y1="311.4" x2="200.7" y2="374.5"/>
					</g>
				</g>
				<g id="building-2">
					<rect x="209.3" y="330.2" class="st17" width="29.3" height="48.3"/>
					<rect x="206.7" y="330.2" class="st8" width="9.9" height="48.3"/>
					<g id="building_left_windows">
						<line class="st18" x1="220.5" y1="334.5" x2="235.2" y2="334.5"/>
						<line class="st18" x1="220.5" y1="338.5" x2="235.2" y2="338.5"/>
						<line class="st18" x1="220.5" y1="342.5" x2="235.2" y2="342.5"/>
						<line class="st18" x1="220.5" y1="346.5" x2="235.2" y2="346.5"/>
						<line class="st18" x1="220.5" y1="350.5" x2="235.2" y2="350.5"/>
						<line class="st18" x1="220.5" y1="354.5" x2="235.2" y2="354.5"/>
						<line class="st18" x1="220.5" y1="358.5" x2="235.2" y2="358.5"/>
						<line class="st18" x1="220.5" y1="362.5" x2="235.2" y2="362.5"/>
						<line class="st18" x1="220.5" y1="366.5" x2="235.2" y2="366.5"/>
						<line class="st18" x1="220.5" y1="370.5" x2="235.2" y2="370.5"/>
						<line class="st18" x1="220.5" y1="374.5" x2="235.2" y2="374.5"/>
					</g>
					<g id="building_left_windows_1_">
						<line class="st18" x1="209.2" y1="334.5" x2="214.2" y2="334.5"/>
						<line class="st18" x1="209.2" y1="338.5" x2="214.2" y2="338.5"/>
						<line class="st18" x1="209.2" y1="342.5" x2="214.2" y2="342.5"/>
						<line class="st18" x1="209.2" y1="346.5" x2="214.2" y2="346.5"/>
						<line class="st18" x1="209.2" y1="350.5" x2="214.2" y2="350.5"/>
						<line class="st18" x1="209.2" y1="354.5" x2="214.2" y2="354.5"/>
						<line class="st18" x1="209.2" y1="358.5" x2="214.2" y2="358.5"/>
						<line class="st18" x1="209.2" y1="362.5" x2="214.2" y2="362.5"/>
						<line class="st18" x1="209.2" y1="366.5" x2="214.2" y2="366.5"/>
						<line class="st18" x1="209.2" y1="370.5" x2="214.2" y2="370.5"/>
						<line class="st18" x1="209.2" y1="374.5" x2="214.2" y2="374.5"/>
					</g>
				</g>
				<g id="building-4">
					<rect x="272.6" y="298" class="st11" width="31.7" height="80.5"/>
					<g id="windows_1_">
						<line class="st9" x1="277.2" y1="303.1" x2="300" y2="303.1"/>
						<line class="st9" x1="277.2" y1="307.1" x2="300" y2="307.1"/>
						<line class="st9" x1="277.2" y1="311.1" x2="300" y2="311.1"/>
						<line class="st9" x1="277.2" y1="315.1" x2="300" y2="315.1"/>
						<line class="st9" x1="277.2" y1="319.1" x2="300" y2="319.1"/>
						<line class="st9" x1="277.2" y1="323.1" x2="300" y2="323.1"/>
						<line class="st9" x1="277.2" y1="327.1" x2="300" y2="327.1"/>
						<line class="st9" x1="277.2" y1="331.1" x2="300" y2="331.1"/>
						<line class="st9" x1="277.2" y1="335.1" x2="300" y2="335.1"/>
						<line class="st9" x1="277.2" y1="339.1" x2="300" y2="339.1"/>
						<line class="st9" x1="277.2" y1="343.1" x2="300" y2="343.1"/>
						<line class="st9" x1="277.2" y1="347.1" x2="300" y2="347.1"/>
						<line class="st9" x1="277.2" y1="351.1" x2="300" y2="351.1"/>
						<line class="st9" x1="277.2" y1="355.1" x2="300" y2="355.1"/>
						<line class="st9" x1="277.2" y1="359.1" x2="300" y2="359.1"/>
						<line class="st9" x1="277.2" y1="363.1" x2="300" y2="363.1"/>
						<line class="st9" x1="277.2" y1="367.1" x2="300" y2="367.1"/>
						<line class="st9" x1="277.2" y1="371.1" x2="300" y2="371.1"/>
					</g>
				</g>
				<g id="building-3">
					<rect x="255.3" y="319.1" class="st7" width="27" height="59.4"/>
					<g id="windows_2_">
						<rect x="268.1" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265.1" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="322.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="325.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="328.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="331.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="334.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="337.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="340.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="343.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="346.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="349.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="352.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="355.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.3" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="358.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="361.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="364.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265.1" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="261.9" y="373.5" class="st10" width="1.5" height="1.5"/>
						<rect x="258.7" y="373.5" class="st10" width="1.5" height="1.5"/>
						<rect x="265" y="373.5" class="st10" width="1.5" height="1.5"/>
						<rect x="268.1" y="373.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="367.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.3" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="370.5" class="st10" width="1.5" height="1.5"/>
						<rect x="274.3" y="373.5" class="st10" width="1.5" height="1.5"/>
						<rect x="271.1" y="373.5" class="st10" width="1.5" height="1.5"/>
						<rect x="277.4" y="373.5" class="st10" width="1.5" height="1.5"/>
					</g>
				</g>
				<g id="building-5">
					<rect id="building" x="363.6" y="334.9" class="st11" width="30.3" height="43.6"/>
					<g id="windows_3_">
						<line class="st9" x1="368" y1="339.1" x2="368" y2="375.1"/>
						<line class="st9" x1="372.4" y1="339.1" x2="372.4" y2="375.1"/>
						<line class="st9" x1="376.7" y1="339.1" x2="376.7" y2="375.1"/>
						<line class="st9" x1="381" y1="339.1" x2="381" y2="375.1"/>
						<line class="st9" x1="385.3" y1="339.1" x2="385.3" y2="375.1"/>
						<line class="st9" x1="389.6" y1="339.1" x2="389.6" y2="375.1"/>
					</g>
				</g>
				<g id="building-6">
					<rect x="394" y="312.2" class="st8" width="12.8" height="66.3"/>
					<rect x="406.8" y="312.2" class="st7" width="30.2" height="66.3"/>
					<g id="windows-right_1_">
						<line class="st18" x1="409.1" y1="315.4" x2="426.1" y2="315.4"/>
						<line class="st18" x1="409.1" y1="318.4" x2="426.1" y2="318.4"/>
						<line class="st18" x1="409.1" y1="321.4" x2="426.1" y2="321.4"/>
						<line class="st18" x1="409.1" y1="324.4" x2="426.1" y2="324.4"/>
						<line class="st18" x1="409.1" y1="327.4" x2="426.1" y2="327.4"/>
						<line class="st18" x1="409.1" y1="330.4" x2="426.1" y2="330.4"/>
						<line class="st18" x1="409.1" y1="333.4" x2="426.1" y2="333.4"/>
						<line class="st18" x1="409.1" y1="336.4" x2="426.1" y2="336.4"/>
						<line class="st18" x1="409.1" y1="339.4" x2="426.1" y2="339.4"/>
						<line class="st18" x1="409.1" y1="342.4" x2="426.1" y2="342.4"/>
						<line class="st18" x1="409.1" y1="345.4" x2="426.1" y2="345.4"/>
						<line class="st18" x1="409.1" y1="348.4" x2="426.1" y2="348.4"/>
						<line class="st18" x1="409.1" y1="351.4" x2="426.1" y2="351.4"/>
						<line class="st18" x1="409.1" y1="354.4" x2="426.1" y2="354.4"/>
						<line class="st18" x1="409.1" y1="357.4" x2="426.1" y2="357.4"/>
						<line class="st18" x1="409.1" y1="360.4" x2="426.1" y2="360.4"/>
						<line class="st18" x1="409.1" y1="363.4" x2="426.1" y2="363.4"/>
						<line class="st18" x1="409.1" y1="366.4" x2="426.1" y2="366.4"/>
						<line class="st18" x1="409.1" y1="369.4" x2="426.1" y2="369.4"/>
						<line class="st18" x1="409.1" y1="372.4" x2="426.1" y2="372.4"/>
						<line class="st18" x1="409.1" y1="375.4" x2="426.1" y2="375.4"/>
					</g>
					<g id="windows-left_1_">
						<line class="st18" x1="395.4" y1="315.4" x2="404.8" y2="315.4"/>
						<line class="st18" x1="395.4" y1="318.4" x2="404.8" y2="318.4"/>
						<line class="st18" x1="395.4" y1="321.4" x2="404.8" y2="321.4"/>
						<line class="st18" x1="395.4" y1="324.4" x2="404.8" y2="324.4"/>
						<line class="st18" x1="395.4" y1="327.4" x2="404.8" y2="327.4"/>
						<line class="st18" x1="395.4" y1="330.4" x2="404.8" y2="330.4"/>
						<line class="st18" x1="395.4" y1="333.4" x2="404.8" y2="333.4"/>
						<line class="st18" x1="395.4" y1="336.4" x2="404.8" y2="336.4"/>
						<line class="st18" x1="395.4" y1="339.4" x2="404.8" y2="339.4"/>
						<line class="st18" x1="395.4" y1="342.4" x2="404.8" y2="342.4"/>
						<line class="st18" x1="395.4" y1="345.4" x2="404.8" y2="345.4"/>
						<line class="st18" x1="395.4" y1="348.4" x2="404.8" y2="348.4"/>
						<line class="st18" x1="395.4" y1="351.4" x2="404.8" y2="351.4"/>
						<line class="st18" x1="395.4" y1="354.4" x2="404.8" y2="354.4"/>
						<line class="st18" x1="395.4" y1="357.4" x2="404.8" y2="357.4"/>
						<line class="st18" x1="395.4" y1="360.4" x2="404.8" y2="360.4"/>
						<line class="st18" x1="395.4" y1="363.4" x2="404.8" y2="363.4"/>
						<line class="st18" x1="395.4" y1="366.4" x2="404.8" y2="366.4"/>
						<line class="st18" x1="395.4" y1="369.4" x2="404.8" y2="369.4"/>
						<line class="st18" x1="395.4" y1="372.4" x2="404.8" y2="372.4"/>
						<line class="st18" x1="395.4" y1="375.4" x2="404.8" y2="375.4"/>
					</g>
				</g>
				<g id="building-7">
					<rect id="building_1_" x="427.8" y="278.1" class="st8" width="35.8" height="100.5"/>
					<g id="windows_5_">
						<line class="st18" x1="433.3" y1="284.5" x2="433.3" y2="376.1"/>
						<line class="st18" x1="439.5" y1="284.5" x2="439.5" y2="376.1"/>
						<line class="st18" x1="445.7" y1="284.5" x2="445.7" y2="376.1"/>
						<line class="st18" x1="451.9" y1="284.5" x2="451.9" y2="376.1"/>
						<line class="st18" x1="458.2" y1="284.5" x2="458.2" y2="376.1"/>
					</g>
					<line id="antena-large" class="st9" x1="441.9" y1="277.6" x2="441.9" y2="256.2"/>
					<line id="antena-small" class="st9" x1="447.9" y1="277.6" x2="447.9" y2="265.8"/>
				</g>
				<g id="building-8">
					<rect x="463.6" y="298.4" class="st11" width="30.3" height="80.1"/>
					<g id="windows_6_">
						<line class="st9" x1="467.5" y1="314.6" x2="490.3" y2="314.6"/>
						<line class="st9" x1="467.5" y1="317.6" x2="490.3" y2="317.6"/>
						<line class="st9" x1="467.5" y1="320.6" x2="490.3" y2="320.6"/>
						<line class="st9" x1="467.5" y1="323.6" x2="490.3" y2="323.6"/>
						<line class="st9" x1="467.5" y1="326.6" x2="490.3" y2="326.6"/>
						<line class="st9" x1="467.5" y1="329.6" x2="490.3" y2="329.6"/>
						<line class="st9" x1="467.5" y1="332.6" x2="490.3" y2="332.6"/>
						<line class="st9" x1="467.5" y1="335.6" x2="490.3" y2="335.6"/>
						<line class="st9" x1="467.5" y1="338.6" x2="490.3" y2="338.6"/>
						<line class="st9" x1="467.5" y1="341.6" x2="490.3" y2="341.6"/>
						<line class="st9" x1="467.5" y1="344.6" x2="490.3" y2="344.6"/>
						<line class="st9" x1="467.5" y1="347.6" x2="490.3" y2="347.6"/>
						<line class="st9" x1="467.5" y1="350.6" x2="490.3" y2="350.6"/>
						<line class="st9" x1="467.5" y1="353.6" x2="490.3" y2="353.6"/>
						<line class="st9" x1="467.5" y1="356.6" x2="490.3" y2="356.6"/>
						<line class="st9" x1="467.5" y1="359.6" x2="490.3" y2="359.6"/>
						<line class="st9" x1="467.5" y1="362.6" x2="490.3" y2="362.6"/>
						<line class="st9" x1="467.5" y1="365.6" x2="490.3" y2="365.6"/>
						<line class="st9" x1="467.5" y1="368.6" x2="490.3" y2="368.6"/>
						<line class="st9" x1="467.5" y1="302.6" x2="490.3" y2="302.6"/>
						<line class="st9" x1="467.5" y1="305.6" x2="490.3" y2="305.6"/>
						<line class="st9" x1="467.5" y1="308.6" x2="490.3" y2="308.6"/>
						<line class="st9" x1="467.5" y1="311.6" x2="490.3" y2="311.6"/>
					</g>
				</g>
				<g id="city-hall">
					<rect x="316.3" y="351.4" class="st7" width="22.3" height="27.2"/>
					<rect x="334.6" y="323.6" class="st7" width="29" height="55"/>
					<rect x="290.3" y="329.6" class="st7" width="28" height="48.9"/>
					<rect x="290.3" y="329.6" class="st8" width="11.4" height="48.9"/>
					<rect x="352.3" y="323.6" class="st8" width="11.4" height="55"/>
					<line class="st18" x1="294.1" y1="333.1" x2="294.1" y2="378.1"/>
					<line class="st18" x1="298.1" y1="333.1" x2="298.1" y2="378.1"/>
					<line class="st18" x1="356.1" y1="327.4" x2="356.1" y2="378"/>
					<line class="st18" x1="360.1" y1="327.4" x2="360.1" y2="378"/>
					<g id="windows_right_1_">
						<rect x="347.6" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="326.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="326.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="326.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="326.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="329.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="329.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="329.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="329.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="368.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="368.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="368.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="341.4" y="374.6" class="st10" width="1.5" height="1.5"/>
						<rect x="338.2" y="374.6" class="st10" width="1.5" height="1.5"/>
						<rect x="344.5" y="374.6" class="st10" width="1.5" height="1.5"/>
						<rect x="347.6" y="374.6" class="st10" width="1.5" height="1.5"/>
					</g>
					<g id="windows_left">
						<rect x="314.3" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="332.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="335.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="338.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="341.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="344.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="347.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="350.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="353.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="368.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="356.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="359.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="362.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="365.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="368.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="368.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="371.6" class="st10" width="1.5" height="1.5"/>
						<rect x="308" y="374.6" class="st10" width="1.5" height="1.5"/>
						<rect x="304.9" y="374.6" class="st10" width="1.5" height="1.5"/>
						<rect x="311.1" y="374.6" class="st10" width="1.5" height="1.5"/>
						<rect x="314.3" y="374.6" class="st10" width="1.5" height="1.5"/>
					</g>
					<polygon class="st19" points="313.1,378.6 313.1,372.4 340.2,372.4 340.2,378.6 		"/>
					<polygon class="st20" points="343.4,369.4 340.2,374.2 313.1,374.2 310,369.4 		"/>
					<path class="st21" d="M342.9,369.5c0.4,0,0.4-0.2,0.1-0.4c-1.8-1.1-7.7-4.1-16.2-4.1c-10.3,0-16.8,4.5-16.8,4.5H342.9z"/>
				</g>
				<line id="city-line" class="st9" x1="0" y1="378.6" x2="494.5" y2="378.6"/>
			</g>
			<g id="clouds">
				<path id="cloud-2" class="st22" d="M135.1,235.1c0,0-0.6-5.7-7.4-5.7s-7.7,6.4-7.7,6.4s-0.9-0.4-2.5-0.4c-1.6,0.1-6.4,2-5.7,7
					c0,0-3.7,1-3.7,3.8c0,2.9,3.1,3.3,3.1,3.3h48.9c0,0,1.6-0.3,1.6-2.5s-3-2.3-3-2.3l-5,0.1c0,0-0.1-6.1-7-6.1c0,0-3.1,0.1-3.8,1.3
					c0,0,1-4.8-5.3-4.8c0,0-2-0.1-2.8,0.8C135,236.1,135.3,236,135.1,235.1z"/>
				<path id="cloud-1" class="st22" d="M359.3,261c0,0-1.1-0.8-3-0.8s-4.1,1.4-4.1,2.8c0,0-1.1-0.6-3.4-0.6s-5.2,2.5-5.2,4.9h-6.2
					c0,0-2.5,0.4-2.5,2.5s0.6,2.8,2.4,2.8s36,0,36,0s4.2-0.8,4.2-5.5s-5.2-5.5-5.2-5.5s-1.4-5-6.6-5S359.3,261,359.3,261z"/>
			</g>
			<g id="triggers">
				<circle id="trigger-middle-left" class="st23" cx="229.6" cy="142.3" r="0.8"/>
				<circle id="trigger-middle-right" class="st23" cx="265.9" cy="142.3" r="0.8"/>
				<circle id="trigger-top-right" class="st23" cx="261.3" cy="135" r="0.8"/>
				<circle id="trigger-hat-right" class="st23" cx="254.3" cy="80.2" r="0.8"/>
				<circle id="trigger-hat-left" class="st23" cx="241.1" cy="80.2" r="0.8"/>
				<circle id="trigger-top-left" class="st23" cx="234" cy="135" r="0.8"/>
				<circle id="trigger-bottom-left" class="st23" cx="230.7" cy="149.1" r="0.8"/>
				<circle id="trigger-bottom-right" class="st23" cx="264.7" cy="149.1" r="0.8"/>
			</g>
			</svg>

  <div class="instructions">Use the <span>A</span>, <span>S</span>, <span>D</span>, and <span>F</span> key to trigger fireworks.</div>
</div>
            
          
!
            
              /* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #fff;
  margin: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.020em;
  font-size: 12px;
  color: #a7abb5;
}

canvas {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

.scene-wrapper {
  position: relative;
  height: 100%;
}

svg {
  max-height: 600px;
  max-width: calc(100% - 60px);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media(max-height: 780px) {
  svg {
    height: calc(100% - 60px);
  }
}

.instructions {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
}

@media(max-height: 840px) {
  .instructions {
    bottom: 20px;
  }
}

.instructions span {
  color: #555656;
}

#waves path {
  animation-name: waves;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes waves {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}

#boat-1,
#boat-2 {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
}

#boat-1 {
  animation-name: float;
  animation-duration: 7s;
}

#boat-2 {
  animation-name: floatReverse;
  animation-duration: 6s;
}

@-moz-document url-prefix() {
  #boat-1,
  #boat-2 {
    display: none;
  }
}

@keyframes float {
  0% {transform: translateY(0) rotate(-10deg);}
  25% {transform: translateY(5px) rotate(0deg);}
  50% {transform: translateY(10px) rotate(10deg);}
  75% {transform: translateY(5px) rotate(0deg);}
  100% {transform: translateY(0) rotate(-10deg);}
}

@keyframes floatReverse {
  0% {transform: translateY(0) rotate(10deg);}
  25% {transform: translateY(5px) rotate(0deg);}
  50% {transform: translateY(10px) rotate(-10deg);}
  75% {transform: translateY(5px) rotate(0deg);}
  100% {transform: translateY(0) rotate(10deg);}
}

svg {
  opacity: 0;
}

#outline {
  stroke-dasharray: 1572;
  stroke-dashoffset: 1572;
}

#city-line {
  stroke-dasharray: 495;
  stroke-dashoffset: 495;
}

#cloud-1,
#cloud-2 {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
}

#cloud-1 {
  animation-name: clouds;
  animation-duration: 14s;
}

#cloud-2 {
  animation-name: clouds;
  animation-duration: 20s;
}

@keyframes clouds {
  0% {transform: translateX(40px)}
  50% {transform: translateX(0)}
  100% {transform: translateX(40px)}
}

.gradient {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 0;
  height: 0;
  background: linear-gradient(180deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  z-index: 20;
  opacity: 0;
  transition: opacity 2s;
  animation: AnimationName 5s ease infinite;
}

@-moz-document url-prefix() {
  .gradient {
    display: none;
  }
}

@keyframes AnimationName {
  0%{background-position:49% 0%}
  50%{background-position:52% 100%}
  100%{background-position:49% 0%}
}

            
          
!
            
              // ---------
// Animation
// ---------

var svg = document.querySelector("svg");
var outline = document.querySelector("#outline");
var waterColor = document.querySelector("#water-color");
var waves = document.querySelector("#waves");
var cityLine = document.querySelector("#city-line");
var skydome = document.querySelector("#skydome");
var building1 = document.querySelector("#building-1");
var building2 = document.querySelector("#building-2");
var building3 = document.querySelector("#building-3");
var building4 = document.querySelector("#building-4");
var building5 = document.querySelector("#building-5");
var building6 = document.querySelector("#building-6");
var building7 = document.querySelector("#building-7");
var building8 = document.querySelector("#building-8");
var cityHall = document.querySelector("#city-hall");
var cntower = document.querySelector("#cntower");
var boat1 = document.querySelector("#boat-1");
var boat2 = document.querySelector("#boat-2");
var cloud1 = document.querySelector("#cloud-1");
var cloud2 = document.querySelector("#cloud-2");

var tl = new TimelineLite({
  onComplete: setupGradient
});

function setupGradient() {
  var gradient = document.querySelector(".gradient");
  var elevatorShaft = document.querySelector("#elevator-shaft");

  gradient.style.opacity = 0.7;
  gradient.style.top = elevatorShaft.getBoundingClientRect().top + 1 + "px";
  gradient.style.left = elevatorShaft.getBoundingClientRect().left + "px";
  gradient.style.width = elevatorShaft.getBoundingClientRect().width + "px";
  gradient.style.height =
    elevatorShaft.getBoundingClientRect().height - 1 + "px";
}

tl.to(svg, 0, { opacity: 1 });
tl.to(outline, 1.5, { strokeDashoffset: 0, ease: Power2.easeOut }, "water");
tl.from(waterColor, 0.8, { y: 180 }, "water+=0.2");
tl.from(waves, 0.8, { y: 180 }, "water+=0.2");
tl.to(
  cityLine,
  0.4,
  { strokeDashoffset: 0, ease: Power2.easeOut },
  "buildings-=0.4"
);

tl.from(
  skydome,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings-=0.4"
);
tl.from(
  building1,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings-=0.2"
);
tl.from(
  building2,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings"
);
tl.from(
  cntower,
  1,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings+=0.2"
);

tl.from(
  building8,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings-=0.4"
);
tl.from(
  building7,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings-=0.2"
);
tl.from(
  building6,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings"
);
tl.from(
  building5,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings+=0.2"
);
tl.from(
  cityHall,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings+=0.4"
);
tl.from(
  building4,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings+=0.6"
);
tl.from(
  building3,
  0.8,
  { y: -100, opacity: 0, ease: Bounce.easeOut },
  "buildings+=0.8"
);

tl.from(boat1, 0.8, { opacity: 0, ease: Power2.easeOut }, "buildings+=0.2");
tl.from(boat2, 0.8, { opacity: 0, ease: Power2.easeOut }, "buildings+=0.4");

tl.from(cloud1, 0.6, { opacity: 0, ease: Power2.easeOut }, "-=0.5");
tl.from(cloud2, 0.6, { opacity: 0, ease: Power2.easeOut }, "-=0.8");

// -----------
// DEFINITIONS
// -----------

var canvas = document.querySelector("canvas");
canvas.width = document.body.clientWidth * 2;
canvas.height = document.body.clientHeight * 2;
var context = canvas.getContext("2d");

var fireworks = [];
var colors = ["253,0,0", "0,113,253", "1,149,1", "226,42,220"];
var gravity = new vec2(0, 0.1);

// --------------
// Setup triggers
// --------------

var triggers = {};
var triggerInfo = [
  // id, velocity, lifespan
  ["#trigger-hat-left", { x: -5, y: -3 }, 160],
  ["#trigger-hat-right", { x: 5, y: -3 }, 160],
  ["#trigger-top-left", { x: -5, y: -4 }, 220],
  ["#trigger-top-right", { x: 5, y: -4 }, 220],
  ["#trigger-middle-left", { x: -8, y: -2 }, 250],
  ["#trigger-middle-right", { x: 8, y: -2 }, 250],
  ["#trigger-bottom-left", { x: -5, y: 1 }, 220],
  ["#trigger-bottom-right", { x: 5, y: 1 }, 220]
];

function Trigger(id, velocity, lifespan) {
  this.element = document.querySelector(id);
  this.info = this.element.getBoundingClientRect();
  this.top = this.info.top * 2;
  this.left = this.info.left * 2;
  this.active = false;
  this.velocity = velocity;
  this.lifespan = lifespan;
}

for (var i = 0; i < triggerInfo.length; i++) {
  triggers[triggerInfo[i]] = new Trigger(
    triggerInfo[i][0],
    triggerInfo[i][1],
    triggerInfo[i][2]
  );
}

// -------------
// Key listeners
// -------------

function triggerFireworks() {
  // The commented below will get you a random color
  // var color = (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256));
  var color = colors[Math.floor(Math.random() * colors.length)];

  for (var i = 0; i < arguments.length; i++) {
    var y = triggers[triggerInfo[arguments[i]]].top;
    var x = triggers[triggerInfo[arguments[i]]].left;
    var velocity = triggers[triggerInfo[arguments[i]]].velocity;
    var lifespan = triggers[triggerInfo[arguments[i]]].lifespan;

    fireworks.push(new Firework(x, y, velocity, lifespan, color, true)); // -5 is half the radius of the particle
  }
}

function onKeyDown(evt) {
  var key = evt.keyCode;
  switch (key) {
    case 65:
      triggerFireworks(0, 1);
      break;
    case 83:
      triggerFireworks(2, 3);
      break;
    case 68:
      triggerFireworks(4, 5);
      break;
    case 70:
      triggerFireworks(6, 7);
      break;
  }
}

document.addEventListener("keyup", onKeyDown);

// --------------------
// Particle constructor
// --------------------

function Particle(x, y, velocity, color, firework) {
  this.position = new vec2(x, y);
  this.lifespan = 100;
  this.radius = firework ? 3 : 1;
  if (firework) {
    var temp = new vec2();
    this.velocity = new vec2();
    this.velocity.add(velocity);
  } else {
    this.velocity = new vec2(
      Math.random() * (10 - -10) + -10,
      Math.random() * (10 - -10) + -10
    );
  }
  this.acceleration = new vec2(0, 0);

  this.applyForce = function(force) {
    this.acceleration.add(force);
  };

  this.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
    this.lifespan -= 2;
  };

  this.done = function() {
    if (this.lifespan < 0) {
      return true;
    }

    return false;
  };

  this.render = function() {
    context.beginPath();
    if (!color) {
      context.strokeStyle = "rgba(" + color + ", 1)";
    } else {
      context.strokeStyle = "rgba(" + color + ", " + this.lifespan / 100 + ")";
    }
    context.arc(
      this.position.x,
      this.position.y,
      this.radius,
      0,
      Math.PI * 2,
      false
    );
    context.stroke();
  };
}

// --------------------
// Firework constructor
// --------------------

function Firework(x, y, velocity, lifespan, color, firework) {
  this.firework = new Particle(x, y, velocity, color, firework);
  this.exploded = false;
  this.particles = [];
  this.lifespan = lifespan;

  this.update = function() {
    if (!this.exploded) {
      this.firework.update();
      this.firework.applyForce(gravity);
      this.lifespan -= 5;

      if (this.lifespan < 0) {
        this.exploded = true;
        this.explode();
      }
    }

    for (var i = this.particles.length - 1; i >= 0; i--) {
      this.particles[i].update();
      this.particles[i].applyForce(gravity);
      this.particles[i].velocity.mult(0.95);
      if (this.particles[i].done()) {
        this.particles.splice(i, 1);
      }
    }
  };

  this.explode = function() {
    for (var i = 20; i >= 0; i--) {
      var particle = new Particle(
        this.firework.position.x,
        this.firework.position.y,
        null,
        color,
        false
      );

      this.particles.push(particle);
    }
  };

  this.done = function() {
    if (this.exploded && this.particles.length === 0) {
      return true;
    }

    return false;
  };

  this.render = function() {
    if (!this.exploded) {
      this.firework.render();
    }

    for (var i = this.particles.length - 1; i >= 0; i--) {
      this.particles[i].render();
    }
  };
}

// ------------
// Update state
// ------------

function update() {
  // Update
  for (var i = fireworks.length - 1; i >= 0; i--) {
    fireworks[i].update();

    if (fireworks[i].done()) {
      fireworks.splice(i, 1);
    }
  }

  // Render
  render();
}

// ------
// Render
// ------

function render() {
  // Clear
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.strokeStyle = "#303b50";
  context.lineWidth = 2;

  // Draw
  for (var i = 0; i < fireworks.length; i++) {
    fireworks[i].render();
  }

  // Loop
  requestAnimationFrame(update);
}

// Start the animation
requestAnimationFrame(update);

// -------------
// Window resize
// -------------

window.addEventListener("resize", function() {
  setupGradient();

  // Update the canvas size
  canvas.width = document.body.clientWidth * 2;
  canvas.height = document.body.clientHeight * 2;

  // Update the trigger position
  triggers = {};
  for (var i = 0; i < triggerInfo.length; i++) {
    triggers[triggerInfo[i]] = new Trigger(
      triggerInfo[i][0],
      triggerInfo[i][1],
      triggerInfo[i][2]
    );
  }
});

            
          
!
999px
Loading ..................

Console