Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!-- Rain Machine by Laura Salgado for Creative Coding Club. All SVGs created with Method Draw - https://github.com/duopixel/Method-Draw/ -->

<div class="controls">

	<div class="rain-controls type-of-control">
		<div class="control-single">
			<input id="no-rain-radio" type="radio" name="rain-level" value="no-rain" checked></input>
			<label class="highlighted" id="label-no-rain" for="no-rain-radio">no rain</label>
		</div>
		<div class="control-single">
			<input id="light-rain-radio" type="radio" name="rain-level" value="light-rain"></input>
			<label id="label-light-rain" for="light-rain-radio">light rain</label>
		</div>
		<div class="control-single">
			<input id="heavy-rain-radio" type="radio" name="rain-level" value="heavy-rain"></input>
			<label id="label-heavy-rain" for="heavy-rain-radio">heavy rain</label>
		</div>
	</div>
	
	<div class="dusk-container type-of-control">
		<div class="control-single">
			<input type="radio" id="light-night" name="light-level" value="night" checked>
			<label id="label-night" for="light-night" class="highlighted">night mode</label>
		</div>
		<div class="control-single">
			<input type="checkbox" id="light-dusk" name="light-level" value="dusk">
			<label id="label-dusk" for="light-dusk">dusk mode</label>
		</div>
	</div>

	<div class="lightning-container type-of-control">
		<button class="lightning-button">lightning</button>
	</div>
</div>



	
	<div class="svg-container">

		<!-- start of lightning bolts -->
		<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
		 <!-- Created with Method Draw - https://github.com/duopixel/Method-Draw/ -->
		 <g>
		  <rect fill="rgba(0,0,0,.0)" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
		  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
		   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
		  </g>
		 </g>
		 <g>
		  
		  <path id="one" d="m0.5,7c0,0 0,0 2,2c1,1 2.173095,1.852731 3,3c1.307452,1.813993 4.520164,5.323669 6,7c2.386163,2.703003 6,6 8,8c2,2 5.450491,4.450491 8,7c2.549509,2.549511 5,5 7,7c2,2 3.310005,2.337494 6,4c1.203003,0.743496 2.902824,1.224205 5,2c3.867001,1.430496 6.152241,1.234634 8,2c1.306564,0.541195 3,1 5,1c1,0 2,0 3,0c2,0 3.053505,0.459507 5,0c2.176254,-0.513744 5.823746,-1.486256 8,-2c2.919746,-0.689259 5.823746,-0.486256 8,-1c1.946495,-0.459507 6,0 7,0c2,0 4,0 7,0c3,0 5,0 8,0c2,0 5,0 9,0c2,0 4,1 6,2c2,1 4.831276,3.220539 10,7c2.910461,2.128185 7.185364,5.822853 11,10c5.266754,5.767265 10,11 15,16c5,5 10.729614,12.228851 15,17c5.659012,6.322624 8.256287,8.759178 12,13c7.545715,8.547646 9.310211,10.718987 12,14c2.285873,2.78833 4.714127,5.21167 7,8c1.793198,2.187347 4,3 5,4c1,1 2,1 2,2c0,0 0,0 1,0c0,0 0.292892,-0.292892 1,-1c0.707108,-0.707108 0.693436,-1.458801 2,-2c0.923874,-0.38269 4,-1 6,-2c2,-1 5.038742,-0.519455 8,-1c3.121445,-0.506546 8,-1 11,-1c3,0 6,0 9,0c2,0 6,0 8,0c3,0 5,0 7,1c2,1 5.06601,1.877655 7,3c3.118469,1.809723 5.812653,4.206802 8,6c2.78833,2.285873 6.863251,4.146805 9,6c3.777283,3.276016 6.072784,5.881897 11,9c3.046722,1.92807 4.418854,4.418854 6,6c1.581146,1.581146 3,1 4,2c1,1 3.076111,1.61731 4,2c1.306549,0.541199 2.549164,1.95517 6,3c1.914185,0.579575 4.053497,0.540497 6,1c2.176239,0.513748 5.152252,1.234634 7,2c1.306549,0.541199 3,1 5,2c0,0 2,1 3,1c0,0 0.292908,1.292892 1,2c0.707092,0.707108 2.292908,0.292892 3,1c0.707092,0.707108 1,1 1,1c1,1 1,1 2,1c1,0 1,0 1,0c1,0 1,0 2,0c1,0 2,0 4,0c2,0 5,0 7,0c1,0 3,0 3,0c1,0 1,1 1,1c0,1 0.458801,2.693436 1,4c1.913422,4.6194 2.332703,8.753128 3,10c2.406006,4.495682 2.190277,7.881516 4,11c1.122345,1.93399 3.458801,4.693436 4,6c0.38269,0.923874 1.852722,2.173096 3,3c1.813995,1.307449 4.053497,1.540497 6,2c2.176239,0.513748 3.693451,1.458801 5,2c0.923889,0.38269 1.61731,0.076126 2,1c0.541199,1.306564 1,1 1,2c0,0 0.486267,1.823746 1,4c0.229767,0.973251 1,3 1,3c0,1 0.292908,1.292892 1,2c0.707092,0.707108 1,0 2,0c0,0 0.292908,0.707108 1,0c0.707092,-0.707108 0,0 0,0c0,0 0,1 0,1c0,1 0,0 0,0c0,-1 -0.707092,-1.292892 0,-2c0.707092,-0.707108 1,0 2,0c1,0 1,0 1,0c0,0 1,0 2,0c1,0 1,0 3,0c1,0 3,1 4,1c1,0 2,0 3,0c1,0 1,0 2,0c1,0 1,0 2,0c1,0 1,0 2,0c0,0 1,0 1,0c1,0 0.474274,0.149353 1,1c1.175568,1.902115 3.95517,2.549149 5,6c0.579559,1.914185 2.144287,7.934143 3,10c1.210144,2.92157 1,6 1,8c0,3 0,5 0,6c0,2 0,3 0,4c0,0 0,1 0,1c0,1 0,1 0,1l0,0l0,-1l0,0" id="svg_2" stroke-width=".25" stroke="#FFFFE5" fill="none"/>
		  <path id="two" d="m81.5,47c0,0 2,0 2,0c4,0 5,0 7,0c2,0 4.693436,0.458805 6,1c1.847755,0.765366 2.823746,0.486256 5,1c0.973251,0.229752 3.076118,-0.382683 4,0c1.306564,0.541195 2.152245,0.234634 4,1c1.306564,0.541195 2,1 4,1c0,0 2,1 2,1c1,1 1,2 1,2c1,0 1,1 1,1c0,1 1,1 1,1c0,0 0,0 1,0c0,0 0,0 1,0c0,0 1,0 2,0c1,0 1.292892,-0.707108 2,0c0.707108,0.707108 1,1 1,2c0,0 1,0 1,1c0,1 0,1 0,1c0,0 0,1 1,1c0,0 0,1 0,1c1,0 0.693436,0.458805 2,1c1.847763,0.765366 3.026749,-0.229752 4,0c2.176254,0.513744 4.823746,1.486259 7,2c0.973251,0.229752 3.076126,0.617317 4,1c1.306564,0.541199 1.458801,0.693436 2,2c0.38269,0.923882 1,1 1,2c0,0 0,1 0,1c1,0 1,1 1,1c1,0 1,0 2,0c0,0 1.076126,0.617317 2,1c1.306564,0.541199 0.693436,1.458801 2,2c0.923874,0.382683 0.692551,2.186005 2,4c0.826904,1.14727 3.839813,6.012909 4,7c0.506546,3.121445 2.569504,6.133003 4,10c0.775803,2.097176 2.346191,3.70546 4,6c1.307449,1.813995 2,3 3,4c1,1 2.186005,0.692551 4,2c1.147263,0.826904 1.693436,1.458801 3,2c0.923874,0.382683 3,1 4,2c1,1 2.458801,1.693436 3,3c0.38269,0.923882 1.458801,1.693436 2,3c0.765366,1.847755 1.173096,2.85273 2,4c1.307449,1.813995 1,3 2,4c1,1 1.292892,1.292892 2,2c0.707108,0.707108 1,0 2,1c0,0 1,0 2,0c0,0 2,0 3,0c2,0 3,0 4,0c2,0 2,1 3,1c1,0 1.292892,0.292892 2,1c0.707108,0.707108 0.458801,1.693436 1,3c0.765366,1.847763 0.458801,2.693436 1,4c1.148056,2.771637 0.458801,3.693436 1,5c0.765366,1.847763 1,3 1,4c0,1 0.292892,2.292892 1,3c0.707108,0.707108 2,1 3,2c0,0 0.693436,0.458801 2,1c0.923874,0.38269 2,1 3,1c2,0 3,0 5,0c3,0 5,0 8,0c2,0 5,0 8,0c3,0 6,0 9,0c2,0 4,0 6,0c2,0 4,0 5,0c1,0 2,0 3,0c0,0 0.292908,-0.707108 1,0c0.707092,0.707108 0,2 0,3c0,0 1,1 1,1c0,1 0.292908,0.292892 1,1c0.707092,0.707108 1,1 2,1c2,0 4,0 7,0c2,0 5,0 8,0c2,0 5,0 7,0c1,0 2,0 3,0c0,0 1,0 1,0c0,1 0,2 0,3c0,1 0,3 0,4c0,2 0.493469,3.878555 1,7c0.320374,1.974182 1,3 2,5c1,2 1.852722,3.173096 3,4c1.813995,1.307449 4.026764,1.770248 5,2c2.176239,0.513748 4.823761,1.486252 7,2c1.946503,0.459503 3.878571,0.493454 7,1c1.974182,0.320358 5,0 7,1c2,1 3.076111,0.61731 4,1c1.306549,0.541199 2,1 2,2c0,1 0,1 0,2c0,2 0,3 0,4c0,2 0.459503,3.053497 0,5c-0.513733,2.176254 -1.458801,3.693436 -2,5c-0.765381,1.847763 0,3 0,4c0,0 0,1 0,1c0,0 1,0 1,0c1,0 3,0 4,0c2,0 4,0 6,0c2,0 3,-1 5,-1c1,0 1,0 2,0c0,0 1,0 1,0c0,0 1,2 1,3c0,3 1,8 1,12c0,2 0.496216,7.907791 1,12c0.733093,5.955048 0,10 0,14c0,3 0.51944,8.038727 1,11c0.506531,3.121429 1,6 1,8c0,2 1,3 1,4c0,1 0,2 1,3c0,0 0,1 1,1c0,0 0,1 1,1c0,0 0,0 0,0c0,1 0,1 0,1c0,1 0,2 0,5c0,1 0,4 0,7c0,2 0,3 0,5c0,0 0,1 0,1c0,1 0,1 15,1c9,0 14,0 17,0c4,0 5,0 6,0c1,0 2.076111,0.61731 3,1c1.306549,0.541199 3.346191,3.705475 5,6c2.614899,3.627991 4.723999,7.222717 8,11c4.632965,5.341858 9.604645,9.429443 15,14c6.563751,5.560333 12.741821,9.327179 19,14c2.889038,2.157166 9,6 12,8c3,2 5.693451,4.458801 7,5c0.923889,0.38269 0.292908,0.292908 1,1c0.707092,0.707092 1,0 1,1c0,0 0,0 0,1c0,1 0,3 0,5c0,2 0,4 0,6c0,2 0.38269,2.076111 0,3c-0.541199,1.306549 -1.053497,0.540497 -3,1c-2.176239,0.513733 -3,1 -6,1c-2,0 -4,0 -5,0c-1,0 -2,0 -3,0c0,0 0,0 0,1l4,3" id="svg_3" stroke-width=".75" stroke="#FFFFE5" fill="none"/>
		  <path id="three" d="m278.5,139c1,0 1,0 1,0c1,0 1,0 2,0c1,0 2,0 3,-1c2,-2 5.309998,-2.337494 8,-4c2.406006,-1.487 6.761078,-3.415894 10,-5c2.840729,-1.389351 6.080261,-2.310738 9,-3c2.176239,-0.513741 5,-2 7,-2c2,0 3,0 5,0c1,0 2,0 3,0c2,0 3.103394,1.906326 4,3c2.285889,2.78833 4,5 6,8c2,3 4,5 7,8c2,2 5,6 9,11c0,0 3.21167,3.714127 6,6c2.187347,1.793198 3.796997,4.2565 5,5c2.690002,1.662506 4.053497,1.540497 6,2c2.176239,0.513748 5,1 10,1c5,0 9,0 14,0c3,0 8,0 14,0c4,0 8.051636,-0.640732 12,0c3.121429,0.506546 6.77063,2.259354 9,4c4.595978,3.58844 9.692383,6.410919 13,11c1.307465,1.813995 7.924713,8.078232 10,10c6.764587,6.264221 9.275055,7.416428 14,10c7.547699,4.127029 11.823761,6.486252 14,7c3.893005,0.919006 8.037476,1.389084 13,2c4.092224,0.503769 9.934143,3.144287 12,4c2.92157,1.210144 4.692535,2.186005 6,4c0.826904,1.147263 2.173096,2.852737 3,4c1.307434,1.813995 1.035522,7.504242 4,12c1.557007,2.361282 2.746765,4.371338 7,7c1.9021,1.175568 3.852722,2.173096 5,3c1.813965,1.307449 4.186035,0.692551 6,2c1.147278,0.826904 2.292908,1.292892 3,2c0.707092,0.707108 2.458801,1.693436 3,3c0.38269,0.923874 0.234619,3.152252 1,5c0.541199,1.306549 2,2 3,4c0,0 2.07843,2.789856 5,4c2.065857,0.855713 3,2 5,2c0,0 1.076111,0.61731 2,1c1.30658,0.541199 1.076111,0.61731 2,1c1.30658,0.541199 1.076111,1.61731 2,2c1.30658,0.541199 2,2 2,2c2,1 4.026733,1.770233 5,2c2.17627,0.513733 2,1 3,1c1,0 1,1 2,1c0,0 1,0 2,0c0,0 1,0 1,0c1,0 1,0 2,0l0,0" id="svg_5" stroke-width=".5" stroke="#FFFFE5" fill="none"/>
		  <path id="four" d="m513.5,226c0,0 0,1 0,3c0,2 0,3 0,5c0,3 0,5 0,7c0,2 0,4 0,5c0,1 -0.707092,1.292892 0,2c0.707092,0.707108 1,0 2,0c1,0 1.61731,1.076126 2,2c0.541199,1.306564 2,3 2,5c0,2 0,5 0,8c0,4 0,7 0,11c0,3 0,7 0,10c0,3 0,5 0,6c0,2 0.528137,3.118317 1,4c1.701294,3.178925 5,3 8,5c3,2 5.593994,3.513 8,5c2.690002,1.662506 6,2 8,4c1,1 3.458801,1.693451 4,3c0.38269,0.923889 0.540466,2.053497 1,4c0.513733,2.176239 1.288574,3.868286 3,8c1.210144,2.92157 3,6 5,9c2,3 2.040344,6.647339 5,10c2.386169,2.703003 4,4 6,7c2,3 4,6 5,8c1,2 1.955139,5.549164 3,9c0.869324,2.871277 0,5 0,8c0,2 0,5 0,8c0,2 0.459534,3.053497 0,5c-0.513733,2.176239 -1,3 -1,4c0,1 0,2 0,2c0,1 0,1 0,2l-1,0" id="svg_6" stroke-width=".5" stroke="#FFFFE5" fill="none"/>
		  <path id="five" d="m356.5,280c1,0 -0.513,0.593994 -2,3c-1.662506,2.690002 -4.519287,5.558197 -7,9c-2.614899,3.627991 -4.60083,8.255768 -6,10c-2.579926,3.216187 -3,7 -4,9c-1,2 -2,3 -2,3c0,1 0,1 1,1c0,0 0,0 0,1c0,0 0,0 0,2c0,1 0,3 0,6c0,4 0,6 0,9c0,3 -0.486267,3.823761 -1,6c-0.229767,0.973236 -1,1 -1,2c0,0 -1,0 -1,0c0,0 0,0 -1,0c0,0 -1,0 -3,0c-1,0 -3,0 -5,0c-3,0 -7,0 -10,0c-2,0 -4,0 -6,0c-2,0 -1.823761,0.486267 -4,1c-0.973236,0.229767 -1.852722,1.173096 -3,2c-1.813995,1.307465 -4.186005,2.692535 -6,4c-2.294525,1.653809 -5.186005,3.692535 -7,5c-2.294525,1.653809 -3,2 -4,3c-1,1 -1.292908,0.292908 -2,1c-0.707092,0.707092 0,1 0,1c0,1 0,1 0,1c0,1 0,2 0,3c0,1 1.493469,2.878571 2,6c0.320374,1.974182 0.679626,5.025818 1,7c0.506531,3.121429 1,6 1,7c0,1 0,2 0,3c0,0 0,1 0,1c0,0 0,0 -1,1c0,0 0,0 0,1c0,0 -1,0 -1,0l0,0l-1,0" id="svg_8" stroke-width=".25" stroke="#FFFFE5" fill="none"/>
		  <path id="six" d="m3.5,10c0,0 0.173095,0.852731 1,2c1.307452,1.813993 2,3 3,5c1,2 1.692548,3.186007 3,5c0.826905,1.14727 2.486257,1.82375 3,4c0.229753,0.973249 0.292893,1.292892 1,2c0.707107,0.707108 4,0 4,0c1,0 1,0 2,0c0,0 1,0 2,0c1,0 3,0 3,0c2,0 3,1 3,1c1,0 2.458803,0.693438 3,2c0.382683,0.92388 1.173096,1.85273 2,3c1.307453,1.813992 2.692547,3.186008 4,5c0.826904,1.14727 1,2 2,3c1,1 2,3 3,4c1,1 2,2 3,3c1,1 2.076122,0.617317 3,1c1.306564,0.541195 1.076122,0.617317 2,1c1.306564,0.541195 2,1 2,1c1,1 2.292892,0.292892 3,1c0.707108,0.707108 1,1 1,1c1,1 1.292892,0.292892 2,1c0.707108,0.707108 0.617317,1.076122 1,2c0.541195,1.306564 2,3 3,4c1,1 0.692547,3.186005 2,5c0.826904,1.14727 1,2 2,3c0,0 0,1 1,1c0,0 1,0 1,0c1,0 1,0 2,0c2,0 2,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 2,0c1,0 2.076118,-0.382683 3,0c1.306564,0.541199 1.292892,1.292892 2,2c0.707108,0.707108 0.292892,1.292892 1,2c0.707108,0.707108 2.076118,0.617317 3,1c1.306564,0.541199 1.878555,1.493462 5,2c1.974174,0.320366 4,1 6,1c2,0 4,0 5,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 1,0 2,0c1,0 2,0 2,0c1,0 2,0 3,0c0,0 1,0 2,0c1,0 2.026749,0.229752 3,0c2.176254,-0.513741 3,-1 4,-1c2,0 3,0 3,0c1,0 1,0 2,0c0,0 0,0 1,0c0,0 0.693436,-0.458801 2,-1c1.847763,-0.765366 2.823746,-0.486259 5,-1c0.973251,-0.229752 2,0 4,-1c0,0 2,0 2,0c0,0 1,0 1,0c0,0 1,0 1,0c0,1 0.458801,2.693436 1,4c0.38269,0.923882 0.70546,2.346191 3,4c1.813995,1.307449 2.70546,3.346191 5,5c1.813995,1.307449 3.906326,3.103401 5,4c2.78833,2.285881 4,3 5,4c1,1 2,2 3,3c1,1 1.486252,1.823746 2,4c0.229752,0.973251 1.486252,3.823746 2,6c0.459503,1.946495 1,4 1,6c0,2 1.486252,3.823746 2,6c0.229752,0.973251 0.693436,2.458801 2,3c0.923874,0.382683 2,1 3,1c1,0 2,0 2,0c1,0 1,0 1,0c1,1 1,1 1,1c0,0 -0.707108,0.292892 0,1c0.707108,0.707108 1,1 1,2c0,0 0,1 0,1c1,1 1,1 1,1c1,0 2,0 4,0c1,0 4,0 7,0c5,0 7,0 10,0c3,0 5,0 8,0c1,0 2,0 3,0c1,0 2.292892,-0.707108 3,0c0.707108,0.707108 1,1 1,2c0,1 0.234634,1.152237 1,3c0.541199,1.306564 1.346191,2.70546 3,5c1.307449,1.813995 3.692551,5.186005 5,7c1.653809,2.29454 2.823746,3.486252 5,4c0.973251,0.229752 2,1 2,1c1,0 1,0 2,0c0,0 1,0 1,0c0,0 0,0 0,1c0,0 0,0 0,1c0,0 0,0 0,0c0,1 0,1 0,1c0,1 0,1 1,1c0,0 0,0 0,0c1,0 3.934143,1.144287 6,2c2.92157,1.210144 6,3 8,4c2,1 4,2 6,3c2,1 4.026764,1.770248 5,2c2.176239,0.513748 2.076111,0.61731 3,1c1.306549,0.541199 2,1 2,1c0,0 1,0 1,0c1,0 1.292908,-0.292892 2,-1c1.414215,-1.414215 2.296997,-2.613831 5,-5c1.676331,-1.479843 3,-3 5,-5c1,-1 1,-2 2,-3c0,0 1,-1 1,-1c1,0 1,0 1,1c0,1 0.770233,2.026749 1,3c0.513733,2.176254 1.665375,2.506241 3,5c2.406006,4.495682 2.224213,8.902832 3,11c1.430481,3.867004 2.496216,8.907791 3,13c0.366547,2.977524 0.292908,7.292892 1,8c0.707092,0.707108 1,1 1,1c0,0 0,0 0,0c0,0 1,0 2,0c0,0 -0.707092,-0.292892 0,-1c0.707092,-0.707108 1,-1 1,-1c0,0 1,0 1,0c0,0 0.693451,0.458801 2,1c1.847748,0.765366 2.418854,0.418854 4,2c1.581146,1.581146 3.29361,2.726501 7,7c3.276001,3.777267 4.820953,7.821213 10,14c5.017151,5.985657 6.729614,7.228851 11,12c3.772675,4.215088 8,8 11,11c2,2 4,3 6,5c1,1 3,1 4,2c1,1 1.076111,0.61731 2,1c1.306549,0.541199 1,1 2,1c0,0 1,0 1,0c0,0 0,0 0,0c0,1 0,1 0,1c0,1 0,1 0,1c0,1 0,2 0,3c0,1 0,2 0,4c0,1 0.765381,2.152252 0,4c-0.541199,1.306549 -1,2 -1,3c0,0 0,1 0,1c0,0 -0.307465,-0.186005 1,-2c0.826904,-1.147278 1.418854,-3.418854 3,-5c1.581146,-1.581146 3.418854,-2.418854 5,-4c1.581146,-1.581146 2,-3 3,-4c1,-1 2,-1 3,-2c1,-1 2,-1 3,-1c0,0 2,0 3,0c0,0 1.076111,-0.38269 2,0c1.306549,0.541199 3,3 4,5c1,2 1.188354,3.943665 2,7c1.308746,4.928192 1,9 1,10c0,1 0,3 0,3c0,1 -0.292908,1.292908 -1,2c-0.707092,0.707092 0,2 -1,3c0,0 0,1 0,1c0,0 0,0 0,1c0,0 0,0 0,1c0,0 0,0 0,0c1,1 1.693451,1.458801 3,2c0.923889,0.38269 1.693451,0.458801 3,1c0.923889,0.38269 3,1 4,2c1,1 3,1 4,2c1,1 3.693451,1.458801 5,2c0.923889,0.38269 3.026764,0.770233 4,1c2.176239,0.513733 5.693451,1.458801 7,2c1.847748,0.765381 5.152252,0.234619 7,1c1.306549,0.541199 2.881531,2.190277 6,4c1.93399,1.122345 3.186005,1.692535 5,3c1.147278,0.826904 3,2 3,2c1,1 1,1 2,2c0,0 1,0 1,1c0,0 1,0 1,0c0,0 1,0 1,0c0,0 0,0 1,-1c1,-1 1.61731,-1.076111 2,-2c0.541199,-1.306549 2,-2 4,-3c2,-1 2.693451,-3.458801 4,-4c0.923889,-0.38269 2,0 3,-1c0,0 1,0 1,0c0,0 1,0 1,0c0,0 1,0 1,0c0,0 0,0 0,1c0,1 0.61731,2.076111 1,3c0.541199,1.306549 0.61731,2.076111 1,3c0.541199,1.306549 0.292908,2.292908 1,3c0.707092,0.707092 1,1 1,1c0,0 0.292908,0.292908 1,1c0.707092,0.707092 0,1 0,1c0,1 1,1 1,1c0,1 1,1 1,1c0,0 1,0 1,0c1,1 3,2 3,2c1,0 1.292908,1.292908 2,2c0.707092,0.707092 3.173096,1.852722 4,3c1.307465,1.813995 3.877655,4.06601 5,6c1.809723,3.118469 4,5 6,7c1,1 1.513,1.593994 3,4c1.662506,2.690002 1.31073,7.080261 2,10c0.513733,2.176239 1.679626,6.025818 2,8c0.506531,3.121429 1.493469,4.878571 2,8c0.320374,1.974182 1,8 1,10c0,3 0,6 0,9c0,1 1,3 1,4c0,1 0,1 0,2c0,0 0,0 0,1c0,0 0,0 0,0c0,1 0,1 0,1c0,0 -0.707092,0.292908 0,1c0.707092,0.707092 1,0 2,0c0,0 1,1 2,1c0,0 1,1 1,1c1,0 2,1 2,1c1,1 2.852722,3.173096 4,4c1.813965,1.307465 2.292908,1.292908 3,2c0.707092,0.707092 1,2 2,3c0,0 1,1 1,1c1,1 1,1 1,1c0,0 1,1 1,1l0,1l0,0" id="svg_9" stroke-width="1.5" stroke="#FFFFCC" fill="none"/>
		  <path id ="seven" d="m170.5,92c0,0 -0.581146,0.418861 1,2c1.581146,1.581139 3.770615,3.259354 6,5c4.595993,3.58844 8.450485,7.450493 11,10c2.549515,2.549507 6,5 9,8c2,2 5,4 7,6c2,2 2.70546,3.346191 5,5c1.813995,1.307449 4,3 6,5c1,1 4,4 6,6c1,1 3,2 5,4c1,1 2.852737,2.173096 4,3c1.813995,1.307449 3,2 5,3c2,1 3.906326,2.103409 5,3c2.78833,2.285873 4.852737,3.173096 6,4c1.813995,1.307449 3,1 4,2c1,1 1,2 2,3c1,1 2.346191,1.70546 4,4c1.307465,1.813995 2.458801,3.693436 3,5c0.765381,1.847763 1,3 1,5c0,1 1,2 1,2c1,1 1,1 1,2c0,0 -0.707092,0.292892 0,1c0.707092,0.707108 1,0 1,0c0,0 0,1 0,1c0,1 0,2 0,2c0,2 0,3 0,4c0,2 0,4 0,5c0,1 0,2 0,3c0,1 0,2 0,2c1,1 1,2 2,3c1,1 1.693451,2.458801 3,3c0.923889,0.38269 2,1 2,1c1,1 1.292908,1.292892 2,2c1.414215,1.414215 1,2 1,4c0,1 0.679626,3.025818 1,5c0.506531,3.121445 0.610657,7.159271 2,10c1.584106,3.238922 3.415894,5.761078 5,9c1.389343,2.840729 2.714111,6.21167 5,9c2.689789,3.281006 4,5 7,8c2,2 5,4 7,6c2,2 3.917603,1.386871 5,4c0.38269,0.923889 0,1 1,2c0,0 0,1 0,2c0,0 0,1 0,1c0,1 0,1 0,2c0,0 0,0 0,1c0,1 0,2 0,3c0,2 -0.540497,4.053497 -1,6c-0.513733,2.176239 -0.851959,5.228363 -2,8c-1.082397,2.613129 -2.486267,3.823761 -3,6c-0.459503,1.946503 -1,5 -1,7c0,2 -0.493469,4.878571 -1,8c-0.320374,1.974182 0,3 0,4c0,2 0,3 0,4c0,1 0,1 0,2c0,0 0,1 0,1c0,1 0,1 0,1c0,1 0,1 0,1c0,0 -0.076111,0.61731 -1,1c-1.306549,0.541199 -2.705475,1.346191 -5,3c-1.813995,1.307465 -3.761078,2.415894 -7,4c-2.840729,1.389343 -5.132019,2.75531 -9,5c-3.118469,1.809723 -5.812653,3.206818 -8,5c-2.78833,2.285889 -5,4 -6,5c-1,1 -1.292908,1.292908 -2,2c-0.707092,0.707092 0,1 0,1c0,0 0,1 0,1c0,0 0,1 0,1c0,1 0,1 0,2c0,0 0,1 0,3c0,0 0,2 0,3c0,2 0,4 0,7c0,5 -0.505127,9.020447 -1,15c-0.501709,6.062042 -1.605835,11.01947 -2,15c-0.502441,5.074219 -1.881332,9.025208 -3,14c-0.904556,4.022644 -1.486252,6.823761 -2,9c-0.459503,1.946503 -0.770248,4.026764 -1,5c-0.513748,2.176239 -2,3 -2,4c0,0 0,0 -1,1c0,0 0,0 0,0l0,0" id="svg_10" stroke-width=".25" stroke="#FFFFE5" fill="none"/>
		 </g>
		</svg>

		

		<!-- start of rain panels-->

		<!-- rain back -->

		<svg id="rain-back" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
		 <!-- Created with Method Draw - https://github.com/duopixel/Method-Draw/ -->
		 <g>
		  
		  <rect fill="rgba(0,0,0,.0)" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
		 </g>
		 <g>
		  
		  <path id="svg_1" d="m430.538895,388.892834c-1.038905,-0.422753 -1.783558,-1.766044 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015244,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.717109 -2.429234,2.692488c-0.386768,-0.007186 -0.806356,-0.055035 -0.932418,-0.106332l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245043,-0.287682c-0.453775,0 -1.083234,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606522,-0.113696c-0.113191,1.132491 1.884735,2.683793 2.075429,1.611481l0,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_2" d="m50.538895,8.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_3" d="m9.538895,226.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path stroke="rgba(255,255,255,.1)" id="svg_4" d="m536.538895,16.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_5" d="m199.538895,24.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_6" d="m412.538895,52.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_7" d="m150.538895,108.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_8" d="m263.538895,102.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_9" d="m124.538895,237.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_10" d="m490.538895,180.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_11" d="m65.538895,136.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_12" d="m250.538895,208.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_13" d="m245.538895,313.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_14" d="m524.538895,321.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_15" d="m44.538895,389.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path stroke="rgba(255,255,255,.1)" id="svg_16" d="m386.538895,154.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_17" d="m135.538895,329.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_18" d="m432.538895,253.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_19" d="m294.538895,383.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		  <path stroke="rgba(255,255,255,.1)" transform="rotate(0.362020343542099 569.3975219726597,159.98051452637466) " id="svg_20" d="m570.601639,162.878954c1.45182,-0.314725 2.492437,-1.314759 2.255947,-2.167969c-0.149124,-0.538014 -3.295259,-3.804132 -3.570016,-3.706167c-0.089677,0.031974 -0.887691,0.793444 -1.773364,1.692154c-1.418757,1.439639 -1.610315,1.708088 -1.610315,2.256677c0,1.111968 1.542567,2.022796 3.394739,2.004467c0.54049,-0.00535 1.126844,-0.040972 1.30301,-0.079161l0,0zm-1.454561,-0.559279c-0.048056,-0.14396 0.0642,-0.214169 0.342437,-0.214169c0.634128,0 1.513767,-0.463342 1.710292,-0.900881c0.209639,-0.466735 0.765484,-0.522244 0.847584,-0.084642c0.15818,0.8431 -2.633828,1.997993 -2.900312,1.199693l-0.000001,0z" stroke-width="1.5" fill="rgba(255,255,255,.1)"/>
		  <path id="svg_21" d="m341.538895,286.892834c-1.038905,-0.422753 -1.783558,-1.766043 -1.614328,-2.912113c0.106711,-0.722684 2.358047,-5.10988 2.55466,-4.978289c0.064172,0.042949 0.635221,1.065789 1.268998,2.272977c1.015245,1.933788 1.152322,2.29438 1.152322,3.031269c0,1.493645 -1.103842,2.71711 -2.429234,2.692489c-0.386768,-0.007186 -0.806356,-0.055036 -0.932418,-0.106333l0,0zm1.040866,-0.751248c0.034388,-0.193374 -0.045941,-0.287682 -0.245044,-0.287682c-0.453774,0 -1.083233,-0.622382 -1.223864,-1.210104c-0.150015,-0.626939 -0.547771,-0.701501 -0.606521,-0.113695c-0.113192,1.13249 1.884735,2.683793 2.075428,1.611481l0.000001,0z" stroke-width="1.5" stroke="rgba(255,255,255,.1)" fill="rgba(255,255,255,.1)"/>
		 </g>
		</svg>


		<!-- rain middle -->
		<svg id="rain-middle" width="580" height="400" xmlns="http://www.w3.org/2000/svg">

			 <g>
			  
			  <rect fill="rgba(0,0,0,.0)" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
			 </g>
			 <g>
			  
			  <path stroke="rgba(255,255,255,.2)" id="svg_1" d="m495.211221,305.626786c-0.831126,-0.462063 -1.426849,-1.930261 -1.291465,-3.182899c0.085369,-0.789883 1.886442,-5.585027 2.043732,-5.441199c0.051338,0.046943 0.508178,1.164892 1.015201,2.484332c0.812197,2.113603 0.921859,2.507725 0.921859,3.313135c0,1.632533 -0.883076,2.969762 -1.943391,2.942852c-0.309415,-0.007854 -0.645086,-0.060153 -0.745936,-0.11622l0,0zm0.832694,-0.821104c0.027511,-0.211355 -0.036753,-0.314432 -0.196035,-0.314432c-0.36302,0 -0.866589,-0.680255 -0.979093,-1.322626c-0.120012,-0.685236 -0.438218,-0.766731 -0.485218,-0.124268c-0.090553,1.237797 1.507791,2.933348 1.660346,1.761326l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_2" d="m372.211223,155.626778c-0.831124,-0.462062 -1.426846,-1.930256 -1.291463,-3.182891c0.085369,-0.789882 1.886438,-5.585014 2.043728,-5.441187c0.051337,0.046943 0.508177,1.164889 1.015199,2.484326c0.812196,2.113598 0.921857,2.507719 0.921857,3.313127c0,1.632529 -0.883074,2.969755 -1.943387,2.942845c-0.309414,-0.007854 -0.645085,-0.060153 -0.745934,-0.116219l0,0zm0.832693,-0.821102c0.02751,-0.211355 -0.036753,-0.314431 -0.196035,-0.314431c-0.36302,0 -0.866587,-0.680253 -0.979092,-1.322623c-0.120012,-0.685235 -0.438217,-0.766729 -0.485217,-0.124268c-0.090553,1.237793 1.507788,2.933342 1.660343,1.761322l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_3" d="m384.555883,25.653453c-0.415562,-0.356374 -0.713423,-1.488745 -0.645731,-2.454863c0.042684,-0.60921 0.943219,-4.307543 1.021864,-4.196614c0.025669,0.036206 0.254088,0.898442 0.507599,1.916081c0.406098,1.630151 0.460929,1.934124 0.460929,2.555309c0,1.259117 -0.441537,2.290477 -0.971694,2.269722c-0.154707,-0.006057 -0.322543,-0.046394 -0.372967,-0.089636l0,0zm0.416346,-0.63329c0.013755,-0.163011 -0.018376,-0.242511 -0.098017,-0.242511c-0.18151,0 -0.433293,-0.524658 -0.489546,-1.020097c-0.060006,-0.5285 -0.219108,-0.591354 -0.242609,-0.095844c-0.045277,0.954671 0.753894,2.262393 0.830172,1.358452l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_4" d="m57.228213,147.626776c-0.207781,-0.462062 -0.356712,-1.930256 -0.322866,-3.182891c0.021342,-0.789882 0.471609,-5.585014 0.510932,-5.441187c0.012834,0.046943 0.127044,1.164889 0.2538,2.484326c0.203049,2.113598 0.230464,2.507719 0.230464,3.313127c0,1.632529 -0.220768,2.969755 -0.485847,2.942844c-0.077354,-0.007854 -0.161271,-0.060153 -0.186484,-0.116219l0,0zm0.208173,-0.821102c0.006878,-0.211355 -0.009188,-0.314431 -0.049009,-0.314431c-0.090755,0 -0.216647,-0.680253 -0.244773,-1.322623c-0.030003,-0.685234 -0.109554,-0.766729 -0.121304,-0.124268c-0.022638,1.237793 0.376947,2.933341 0.415086,1.761322l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_5" d="m12.555886,18.640116c-0.415562,-0.409218 -0.713423,-1.709501 -0.645731,-2.818877c0.042684,-0.699546 0.943219,-4.946279 1.021864,-4.8189c0.025669,0.041574 0.254088,1.031666 0.507599,2.200204c0.406098,1.871875 0.460929,2.220921 0.460929,2.934218c0,1.445823 -0.441537,2.630116 -0.971694,2.606283c-0.154707,-0.006956 -0.322543,-0.053273 -0.372967,-0.102928l0,0zm0.416346,-0.727196c0.013755,-0.187183 -0.018376,-0.278471 -0.098017,-0.278471c-0.18151,0 -0.433293,-0.602456 -0.489546,-1.17136c-0.060006,-0.606867 -0.219108,-0.679042 -0.242609,-0.110056c-0.045277,1.096232 0.753894,2.597867 0.830172,1.559887l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_6" d="m250.228223,352.640124c-0.207778,-0.409218 -0.356707,-1.709503 -0.322861,-2.81888c0.021342,-0.699547 0.471603,-4.946285 0.510925,-4.818906c0.012834,0.041574 0.127042,1.031667 0.253796,2.200206c0.203046,1.871877 0.230461,2.220924 0.230461,2.934222c0,1.445825 -0.220765,2.63012 -0.48584,2.606287c-0.077353,-0.006956 -0.161269,-0.053273 -0.186481,-0.102928l0,0zm0.20817,-0.727197c0.006878,-0.187183 -0.009188,-0.278471 -0.049008,-0.278471c-0.090754,0 -0.216644,-0.602456 -0.244769,-1.171362c-0.030003,-0.606868 -0.109553,-0.679042 -0.121303,-0.110056c-0.022638,1.096233 0.376942,2.59787 0.41508,1.559889l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_7" d="m223.211225,17.600105c-0.831124,-0.56775 -1.426845,-2.371767 -1.291462,-3.91092c0.085369,-0.970553 1.886436,-6.862484 2.043727,-6.685759c0.051337,0.05768 0.508176,1.431337 1.015198,3.05257c0.812195,2.597045 0.921856,3.081314 0.921856,4.070945c0,2.00594 -0.883073,3.649032 -1.943385,3.615967c-0.309414,-0.00965 -0.645085,-0.073911 -0.745934,-0.142802l0,0zm0.832692,-1.008914c0.02751,-0.259698 -0.036753,-0.386352 -0.196035,-0.386352c-0.363019,0 -0.866586,-0.835849 -0.979091,-1.625149c-0.120012,-0.841969 -0.438216,-0.942105 -0.485217,-0.152692c-0.090553,1.520916 1.507787,3.60429 1.660342,2.164192l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_8" d="m135.555884,80.626776c-0.415562,-0.462062 -0.713423,-1.930255 -0.645731,-3.182889c0.042684,-0.789881 0.943218,-5.58501 1.021863,-5.441183c0.025669,0.046943 0.254088,1.164889 0.507599,2.484324c0.406097,2.113597 0.460928,2.507717 0.460928,3.313125c0,1.632528 -0.441537,2.969753 -0.971693,2.942843c-0.154707,-0.007854 -0.322542,-0.060152 -0.372967,-0.116219l0,0zm0.416346,-0.821101c0.013755,-0.211354 -0.018376,-0.314431 -0.098017,-0.314431c-0.18151,0 -0.433293,-0.680253 -0.489545,-1.322622c-0.060006,-0.685234 -0.219108,-0.766729 -0.242608,-0.124267c-0.045276,1.237793 0.753893,2.933339 0.830171,1.761321l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_9" d="m473.883553,150.613439c-0.623343,-0.514906 -1.070135,-2.151012 -0.968597,-3.546905c0.064027,-0.880217 1.414828,-6.223749 1.532796,-6.063473c0.038503,0.052312 0.381133,1.298113 0.761399,2.768448c0.609147,2.355322 0.691393,2.794516 0.691393,3.692036c0,1.819234 -0.662305,3.309394 -1.45754,3.279406c-0.232061,-0.008752 -0.483814,-0.067032 -0.559451,-0.129511l0,0zm0.624519,-0.915008c0.020633,-0.235526 -0.027565,-0.350391 -0.147026,-0.350391c-0.272265,0 -0.64994,-0.758051 -0.734319,-1.473886c-0.090009,-0.763602 -0.328662,-0.854417 -0.363913,-0.13848c-0.067915,1.379355 1.130841,3.268816 1.245257,1.962757l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_10" d="m345.900543,211.600104c0,-0.56775 0,-2.371767 0,-3.91092c0,-0.970553 0,-6.862484 0,-6.685759c0,0.05768 0,1.431337 0,3.05257c0,2.597045 0,3.081314 0,4.070945c0,2.00594 0,3.649032 0,3.615967c0,-0.00965 0,-0.073911 0,-0.142802l0,0zm0,-1.008914c0,-0.259698 0,-0.386352 0,-0.386352c0,0 0,-0.835849 0,-1.625149c0,-0.841969 0,-0.942105 0,-0.152692c0,1.520916 0,3.60429 0,2.164192l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_11" d="m452.211224,227.640113c-0.831125,-0.409218 -1.426848,-1.709501 -1.291464,-2.818877c0.085369,-0.699546 1.88644,-4.946279 2.043731,-4.818901c0.051337,0.041574 0.508178,1.031666 1.0152,2.200204c0.812197,1.871875 0.921858,2.220921 0.921858,2.934218c0,1.445823 -0.883075,2.630116 -1.94339,2.606284c-0.309415,-0.006956 -0.645086,-0.053273 -0.745935,-0.102928l0,0zm0.832694,-0.727196c0.02751,-0.187183 -0.036753,-0.278471 -0.196035,-0.278471c-0.36302,0 -0.866588,-0.602456 -0.979093,-1.17136c-0.120012,-0.606867 -0.438217,-0.679042 -0.485218,-0.110056c-0.090553,1.096232 1.50779,2.597867 1.660346,1.559887l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_12" d="m220.883561,159.613439c-0.623341,-0.514906 -1.07013,-2.151012 -0.968593,-3.546906c0.064026,-0.880217 1.414823,-6.223749 1.53279,-6.063473c0.038503,0.052312 0.381131,1.298113 0.761396,2.768448c0.609144,2.355322 0.69139,2.794516 0.69139,3.692036c0,1.819234 -0.662303,3.309394 -1.457534,3.279406c-0.23206,-0.008752 -0.483812,-0.067032 -0.559449,-0.129511l0,0zm0.624517,-0.915008c0.020633,-0.235526 -0.027564,-0.350391 -0.147025,-0.350391c-0.272264,0 -0.649938,-0.758051 -0.734316,-1.473886c-0.090008,-0.763602 -0.328661,-0.854417 -0.363912,-0.13848c-0.067915,1.379355 1.130837,3.268816 1.245252,1.962757l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_13" d="m140.900553,254.653461c0.000003,-0.356375 0.000005,-1.488748 0.000005,-2.454868c0,-0.609212 -0.000007,-4.307553 -0.000008,-4.196623c0,0.036206 -0.000002,0.898444 -0.000004,1.916086c-0.000003,1.630155 -0.000004,1.934128 -0.000004,2.555315c0,1.25912 0.000003,2.290483 0.000007,2.269727c0.000001,-0.006057 0.000002,-0.046394 0.000003,-0.089636l0,0zm-0.000003,-0.633291c0,-0.163011 0,-0.242511 0.000001,-0.242511c0.000001,0 0.000003,-0.524659 0.000004,-1.020099c0,-0.528501 0.000002,-0.591355 0.000002,-0.095844c0,0.954673 -0.000006,2.262398 -0.000006,1.358455l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_14" d="m87.555884,313.653461c-0.415562,-0.356375 -0.713423,-1.48875 -0.645731,-2.454871c0.042684,-0.609213 0.943219,-4.307558 1.021864,-4.196628c0.025669,0.036206 0.254088,0.898445 0.507599,1.916088c0.406098,1.630157 0.460929,1.93413 0.460929,2.555318c0,1.259122 -0.441537,2.290485 -0.971694,2.26973c-0.154707,-0.006057 -0.322543,-0.046394 -0.372967,-0.089636l0,0zm0.416346,-0.633292c0.013755,-0.163012 -0.018376,-0.242512 -0.098017,-0.242512c-0.18151,0 -0.433293,-0.52466 -0.489546,-1.020101c-0.060006,-0.528501 -0.219108,-0.591356 -0.242609,-0.095844c-0.045277,0.954674 0.753894,2.262401 0.830172,1.358456l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_15" d="m565.572862,20.640119c0.207768,-0.409218 0.356688,-1.709501 0.322845,-2.818877c-0.021341,-0.699546 -0.471579,-4.946279 -0.510899,-4.818901c-0.012833,0.041574 -0.127036,1.031666 -0.253783,2.200204c-0.203036,1.871875 -0.230449,2.220921 -0.230449,2.934219c0,1.445823 0.220754,2.630117 0.485815,2.606284c0.077349,-0.006956 0.161261,-0.053273 0.186471,-0.102928l0,0zm-0.20816,-0.727196c-0.006877,-0.187183 0.009188,-0.278471 0.049005,-0.278471c0.090749,0 0.216633,-0.602456 0.244757,-1.17136c0.030001,-0.606867 0.109547,-0.679042 0.121296,-0.110056c0.022637,1.096232 -0.376923,2.597867 -0.415059,1.559887l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_16" d="m329.883553,290.613449c-0.623343,-0.514907 -1.070135,-2.151016 -0.968597,-3.546913c0.064027,-0.880219 1.414828,-6.223762 1.532796,-6.063485c0.038503,0.052312 0.381133,1.298116 0.761399,2.768454c0.609147,2.355327 0.691393,2.794522 0.691393,3.692044c0,1.819238 -0.662305,3.309401 -1.45754,3.279412c-0.232061,-0.008752 -0.483814,-0.067032 -0.559451,-0.129511l0,0zm0.624519,-0.91501c0.020633,-0.235527 -0.027565,-0.350392 -0.147026,-0.350392c-0.272265,0 -0.64994,-0.758053 -0.734319,-1.473889c-0.090009,-0.763604 -0.328662,-0.854419 -0.363913,-0.13848c-0.067915,1.379358 1.130841,3.268822 1.245257,1.962761l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			  <path stroke="rgba(255,255,255,.2)" id="svg_17" d="m428.555883,352.666799c-0.415562,-0.303531 -0.713423,-1.267995 -0.645731,-2.090858c0.042684,-0.518877 0.943219,-3.668824 1.021864,-3.574343c0.025669,0.030837 0.254088,0.765222 0.507599,1.631966c0.406098,1.388433 0.460929,1.647333 0.460929,2.17641c0,1.072417 -0.441537,1.950847 -0.971694,1.93317c-0.154707,-0.005159 -0.322543,-0.039514 -0.372967,-0.076345l0,0zm0.416346,-0.539386c0.013755,-0.13884 -0.018376,-0.206551 -0.098017,-0.206551c-0.18151,0 -0.433293,-0.446862 -0.489546,-0.868838c-0.060006,-0.450134 -0.219108,-0.503668 -0.242609,-0.081632c-0.045277,0.813113 0.753894,1.926927 0.830172,1.157022l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.2)"/>
			 </g>
		</svg>
		

		<!-- rain back-->

		
		<svg id="rain-forward" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
			
			 <g>
			 
			  <rect fill="rgba(0,0,0,.0)" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
			 </g>
			 <g>
			  
			  <path stroke="rgba(255,255,255,.3)" id="svg_1" d="m547.177238,346.520086c-2.077814,-0.884816 -3.567123,-3.696302 -3.228663,-6.095009c0.213423,-1.512567 4.716104,-10.694902 5.109331,-10.419483c0.128344,0.089893 1.270445,2.23068 2.538002,4.757307c2.030493,4.047389 2.304648,4.802102 2.304648,6.344401c0,3.126176 -2.207689,5.686869 -4.858477,5.635337c-0.773537,-0.01504 -1.612716,-0.115188 -1.86484,-0.222552l0,-0.000001zm2.081735,-1.572352c0.068777,-0.404729 -0.091882,-0.602113 -0.490087,-0.602113c-0.907551,0 -2.166471,-1.302637 -2.447733,-2.532729c-0.30003,-1.312175 -1.095544,-1.468231 -1.213046,-0.237964c-0.226383,2.370286 3.769478,5.617139 4.150866,3.372806l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_2" d="m367.849572,109.506746c-1.87003,-0.93766 -3.210405,-3.917055 -2.905791,-6.459019c0.19208,-1.602901 4.244485,-11.33363 4.598389,-11.041762c0.115509,0.095261 1.143398,2.363902 2.284197,5.041425c1.82744,4.28911 2.074178,5.088896 2.074178,6.723306c0,3.312879 -1.986916,6.026503 -4.372621,5.971894c-0.696182,-0.015938 -1.451441,-0.122067 -1.678352,-0.235843l0,-0.000001zm1.873558,-1.666256c0.061898,-0.4289 -0.082694,-0.638073 -0.441078,-0.638073c-0.816794,0 -1.949821,-1.380433 -2.202956,-2.68399c-0.270026,-1.390542 -0.985987,-1.555918 -1.091739,-0.252175c-0.203744,2.511846 3.392524,5.952609 3.735772,3.574239l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_3" d="m445.177242,59.533419c-2.077811,-0.831971 -3.567116,-3.475545 -3.228657,-5.730991c0.213422,-1.42223 4.716095,-10.05616 5.109321,-9.79719c0.128343,0.084524 1.270442,2.097455 2.537997,4.473181c2.030489,3.805663 2.304643,4.515301 2.304643,5.965488c0,2.939468 -2.207685,5.347226 -4.858467,5.298772c-0.773536,-0.014141 -1.612713,-0.108308 -1.864836,-0.20926l0,-0.000001zm2.081731,-1.478444c0.068776,-0.380557 -0.091882,-0.566153 -0.490087,-0.566153c-0.907549,0 -2.166467,-1.224838 -2.447729,-2.381464c-0.300029,-1.233807 -1.095541,-1.380543 -1.213043,-0.223751c-0.226383,2.228723 3.769471,5.281661 4.150858,3.171368l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_4" d="m87.521902,203.533418c-1.662249,-0.831971 -2.853693,-3.475545 -2.582925,-5.730991c0.170738,-1.42223 3.772876,-10.05616 4.087457,-9.79719c0.102675,0.084524 1.016354,2.097455 2.030397,4.473181c1.624391,3.805663 1.843714,4.515301 1.843714,5.965488c0,2.939468 -1.766148,5.347226 -3.886774,5.298772c-0.618829,-0.014141 -1.29017,-0.108308 -1.491869,-0.20926l0,-0.000001zm1.665385,-1.478444c0.055021,-0.380557 -0.073506,-0.566153 -0.392069,-0.566153c-0.72604,0 -1.733174,-1.224838 -1.958183,-2.381464c-0.240023,-1.233807 -0.876433,-1.380543 -0.970435,-0.223751c-0.181106,2.228723 3.015577,5.281661 3.320687,3.171368l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_5" d="m25.521904,36.520082c-1.662249,-0.884815 -2.853693,-3.6963 -2.582925,-6.095005c0.170738,-1.512565 3.772876,-10.694894 4.087457,-10.419476c0.102675,0.089892 1.016354,2.230678 2.030397,4.757303c1.624391,4.047386 1.843714,4.802099 1.843714,6.344397c0,3.126173 -1.766148,5.686864 -3.886774,5.635333c-0.618829,-0.01504 -1.29017,-0.115188 -1.491869,-0.222551l0,-0.000001zm1.665385,-1.57235c0.055021,-0.404729 -0.073506,-0.602113 -0.392069,-0.602113c-0.726039,0 -1.733174,-1.302635 -1.958183,-2.532727c-0.240023,-1.312174 -0.876433,-1.468231 -0.970435,-0.237963c-0.181106,2.370284 3.015577,5.617135 3.320687,3.372803l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_6" d="m226.849576,346.560099c-1.870028,-0.726284 -3.210402,-3.034037 -2.905789,-5.002968c0.19208,-1.24156 4.244482,-8.778699 4.598386,-8.552627c0.115509,0.073787 1.143397,1.83101 2.284196,3.904941c1.827439,3.322219 2.074177,3.941711 2.074177,5.207677c0,2.56606 -1.986915,4.667954 -4.372618,4.625655c-0.696182,-0.012345 -1.45144,-0.09455 -1.678351,-0.182677l0,0zm1.873557,-1.290634c0.061898,-0.332214 -0.082694,-0.494233 -0.441078,-0.494233c-0.816794,0 -1.949819,-1.069243 -2.202954,-2.078941c-0.270026,-1.077073 -0.985987,-1.205169 -1.091738,-0.195328c-0.203744,1.945602 3.392521,4.610718 3.73577,2.768501l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_7" d="m175.521907,42.520082c-1.662247,-0.884815 -2.85369,-3.6963 -2.582923,-6.095005c0.170737,-1.512566 3.772873,-10.694895 4.087453,-10.419476c0.102675,0.089892 1.016353,2.230678 2.030396,4.757303c1.62439,4.047386 1.843713,4.802099 1.843713,6.344397c0,3.126174 -1.766146,5.686865 -3.886771,5.635333c-0.618828,-0.01504 -1.290169,-0.115188 -1.491868,-0.222551l0,-0.000001zm1.665384,-1.57235c0.055021,-0.404729 -0.073506,-0.602113 -0.392069,-0.602113c-0.726039,0 -1.733172,-1.302636 -1.958181,-2.532727c-0.240023,-1.312174 -0.876432,-1.468231 -0.970434,-0.237963c-0.181106,2.370284 3.015574,5.617135 3.320684,3.372803l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_8" d="m171.521907,124.546753c-1.662247,-0.779127 -2.85369,-3.254788 -2.582923,-5.366975c0.170737,-1.331894 3.772873,-9.417421 4.087453,-9.174901c0.102675,0.079155 1.016353,1.96423 2.030396,4.189057c1.62439,3.563938 1.843713,4.228502 1.843713,5.586578c0,2.752761 -1.766146,5.007586 -3.886771,4.962209c-0.618828,-0.013243 -1.290169,-0.101429 -1.491868,-0.195968l0,-0.000001zm1.665384,-1.384538c0.055021,-0.356385 -0.073506,-0.530192 -0.392069,-0.530192c-0.726039,0 -1.733172,-1.14704 -1.958181,-2.230201c-0.240023,-1.155439 -0.876432,-1.292855 -0.970434,-0.209539c-0.181106,2.087161 3.015574,4.946185 3.320684,2.969932l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_9" d="m391.521902,189.533418c-1.662249,-0.831971 -2.853693,-3.475545 -2.582925,-5.730991c0.170738,-1.42223 3.772876,-10.05616 4.087457,-9.79719c0.102675,0.084524 1.016354,2.097455 2.030397,4.473181c1.624391,3.805663 1.843714,4.515301 1.843714,5.965488c0,2.939468 -1.766148,5.347226 -3.886774,5.298772c-0.618829,-0.014141 -1.29017,-0.108308 -1.491869,-0.20926l0,-0.000001zm1.665385,-1.478444c0.055021,-0.380557 -0.073506,-0.566153 -0.392069,-0.566153c-0.72604,0 -1.733174,-1.224838 -1.958183,-2.381464c-0.240023,-1.233807 -0.876433,-1.380543 -0.970435,-0.223751c-0.181106,2.228723 3.015577,5.281661 3.320687,3.171368l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_10" d="m278.866562,98.520084c-1.246686,-0.884815 -2.14027,-3.6963 -1.937194,-6.095005c0.128053,-1.512566 2.829657,-10.694895 3.065592,-10.419476c0.077006,0.089892 0.762265,2.230678 1.522798,4.757303c1.218293,4.047386 1.382786,4.802099 1.382786,6.344397c0,3.126174 -1.324611,5.686865 -2.91508,5.635333c-0.464122,-0.01504 -0.967628,-0.115188 -1.118902,-0.222551l0,-0.000001zm1.249039,-1.57235c0.041266,-0.404729 -0.055129,-0.602113 -0.294052,-0.602113c-0.54453,0 -1.29988,-1.302636 -1.468637,-2.532727c-0.180018,-1.312174 -0.657325,-1.468231 -0.727826,-0.237963c-0.13583,2.370284 2.261682,5.617135 2.490515,3.372803l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_11" d="m512.849576,226.506744c-1.870032,-0.93766 -3.210409,-3.917055 -2.905795,-6.459019c0.19208,-1.602901 4.244491,-11.33363 4.598395,-11.041762c0.115509,0.095261 1.143399,2.363902 2.2842,5.041425c1.827442,4.28911 2.074181,5.088896 2.074181,6.723306c0,3.312879 -1.986919,6.026503 -4.372626,5.971894c-0.696183,-0.015938 -1.451443,-0.122067 -1.678355,-0.235843l0,-0.000001zm1.873561,-1.666256c0.061898,-0.4289 -0.082694,-0.638073 -0.441079,-0.638073c-0.816795,0 -1.949823,-1.380433 -2.202959,-2.68399c-0.270027,-1.390542 -0.985989,-1.555918 -1.09174,-0.252175c-0.203745,2.511846 3.392528,5.952609 3.735777,3.574239l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_12" d="m252.177245,215.546755c-2.07781,-0.779127 -3.567114,-3.254789 -3.228655,-5.366977c0.213422,-1.331895 4.716092,-9.417425 5.109318,-9.174904c0.128343,0.079155 1.270441,1.964231 2.537995,4.189059c2.030488,3.563939 2.304641,4.228504 2.304641,5.58658c0,2.752762 -2.207684,5.007587 -4.858465,4.962211c-0.773536,-0.013243 -1.612712,-0.101429 -1.864835,-0.195968l0,-0.000001zm2.08173,-1.384538c0.068776,-0.356385 -0.091882,-0.530192 -0.490086,-0.530192c-0.907549,0 -2.166466,-1.14704 -2.447727,-2.230201c-0.300029,-1.155439 -1.095541,-1.292855 -1.213043,-0.209539c-0.226383,2.087162 3.769469,4.946187 4.150856,2.969933l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_13" d="m175.866568,285.546761c-1.246684,-0.779128 -2.140266,-3.254792 -1.937191,-5.366982c0.128053,-1.331896 2.829652,-9.417433 3.065588,-9.174912c0.077006,0.079155 0.762264,1.964233 1.522796,4.189062c1.218291,3.563943 1.382783,4.228508 1.382783,5.586585c0,2.752765 -1.324609,5.007592 -2.915076,4.962215c-0.464121,-0.013243 -0.967626,-0.101429 -1.1189,-0.195968l0,-0.000001zm1.249037,-1.38454c0.041266,-0.356385 -0.055129,-0.530193 -0.294052,-0.530193c-0.544529,0 -1.299878,-1.147041 -1.468635,-2.230203c-0.180017,-1.15544 -0.657324,-1.292856 -0.727825,-0.20954c-0.135829,2.087163 2.261679,4.946191 2.490511,2.969936l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_14" d="m39.194234,362.546761c-1.454467,-0.779128 -2.496981,-3.254792 -2.26006,-5.366982c0.149395,-1.331896 3.301266,-9.417433 3.576524,-9.174912c0.08984,0.079155 0.889309,1.964233 1.776598,4.189062c1.421342,3.563943 1.61325,4.228508 1.61325,5.586585c0,2.752765 -1.545379,5.007592 -3.400927,4.962215c-0.541475,-0.013243 -1.128899,-0.101429 -1.305385,-0.195968l0,-0.000001zm1.457212,-1.38454c0.048143,-0.356385 -0.064317,-0.530193 -0.343061,-0.530193c-0.635285,0 -1.516527,-1.147041 -1.71341,-2.230203c-0.210021,-1.15544 -0.766879,-1.292856 -0.84913,-0.20954c-0.158468,2.087163 2.638629,4.946191 2.905601,2.969936l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_15" d="m531.866556,77.546758c-1.246694,-0.779127 -2.140283,-3.254789 -1.937206,-5.366977c0.128054,-1.331895 2.829674,-9.417425 3.065611,-9.174904c0.077006,0.079155 0.76227,1.964231 1.522807,4.189059c1.218301,3.563939 1.382794,4.228504 1.382794,5.58658c0,2.752762 -1.324619,5.007587 -2.915098,4.962211c-0.464124,-0.013243 -0.967634,-0.101429 -1.118908,-0.195968l0,-0.000001zm1.249046,-1.384538c0.041266,-0.356385 -0.05513,-0.530192 -0.294054,-0.530192c-0.544533,0 -1.299888,-1.14704 -1.468646,-2.230201c-0.180019,-1.155439 -0.657329,-1.292855 -0.72783,-0.209539c-0.13583,2.087162 2.261696,4.946187 2.49053,2.969933l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_16" d="m331.521902,296.533424c-1.662249,-0.831972 -2.853693,-3.475547 -2.582925,-5.730996c0.170738,-1.422231 3.772876,-10.056168 4.087457,-9.797198c0.102675,0.084524 1.016354,2.097457 2.030397,4.473185c1.624391,3.805666 1.843714,4.515305 1.843714,5.965493c0,2.93947 -1.766148,5.347231 -3.886774,5.298776c-0.618829,-0.014141 -1.29017,-0.108308 -1.491869,-0.20926l0,-0.000001zm1.665385,-1.478446c0.055021,-0.380557 -0.073506,-0.566153 -0.392069,-0.566153c-0.72604,0 -1.733174,-1.224839 -1.958183,-2.381466c-0.240023,-1.233808 -0.876433,-1.380544 -0.970435,-0.223752c-0.181106,2.228725 3.015577,5.281665 3.320687,3.171371l0.000001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			  <path stroke="rgba(255,255,255,.3)" id="svg_17" d="m430.194232,362.533424c-1.454467,-0.831972 -2.496981,-3.475547 -2.26006,-5.730996c0.149395,-1.422231 3.301266,-10.056168 3.576524,-9.797198c0.08984,0.084524 0.889309,2.097457 1.776598,4.473185c1.421342,3.805666 1.61325,4.515305 1.61325,5.965493c0,2.93947 -1.545379,5.347231 -3.400927,5.298776c-0.541475,-0.014141 -1.128899,-0.108308 -1.305385,-0.20926l0,-0.000001zm1.457212,-1.478446c0.048143,-0.380557 -0.064317,-0.566153 -0.343061,-0.566153c-0.635285,0 -1.516527,-1.224839 -1.71341,-2.381466c-0.210021,-1.233808 -0.766879,-1.380544 -0.84913,-0.223752c-0.158468,2.228725 2.638629,5.281665 2.905601,3.171371l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="rgba(255,255,255,.3)"/>
			 </g>
		</svg> 
	</div>

	


	


<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
              
            
!

CSS

              
                body{
	background: #0f0f12;
	font-family:sans-serif;
	letter-spacing: 2px;
	margin:0;
	padding:0;
	text-transform: uppercase;
	font-size:.8rem;
}

body.dusk{
	background: #00001e; /* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #ffd89b , #00001e); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #ffd89b , #00001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.svg{

	width:100%;
}

.svg-container{
	height:100vh;
	width:100%;
	float:left;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	
	position: relative;
}

.controls{
	position: absolute;
	z-index:1;
	margin-top:20px;
}

.type-of-control{
	margin:20px 0 20px 30px;
	padding:10px;
}

.control-single{
	display:inline-block;
}

label{
	color:rgba(255,255,255,.5);
	margin-right:20px;
	padding:10px;
	border:1px solid rgba(255,255,255,.0);
	transition:all .2s;
}

label.highlighted{
	color:rgba(255,255,255,.95);
	font-weight:bold;
	border:1px solid white;
}

button{
    color:#333;
    background-color: rgba(255,255,255,.7);
    padding: 10px;
    border:1px solid rgba(255,255,255,.0);
    letter-spacing: 3px;
    text-transform: uppercase;
    font: .8rem system-ui;
    font-weight:bold;
    transition: all .2s
}

input{
	display: none;
}

input:hover, 
button:hover,
label:hover{
	cursor:pointer;
}

button:hover{
	color:black;
	background-color: rgba(255,255,255,.9);
	border:1px solid rgba(255,255,255,.0);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.0);
    border-image: initial;
}

label:hover{
	background-color: rgba(255,255,255,.1)
}

svg#rain-back,
svg#rain-middle,
svg#rain-forward{
	position: absolute;
}

.text{
	color:rgba(255,255,255,.5);
	font-family: sans-serif;
	letter-spacing: 5px;
	font-size:20px;
}

/*lightning lines*/
#one{
  stroke-dasharray: 571;
  opacity: 0;
}

#one.bolt-active{
  animation:animationone .25s 0s 3 linear;
}

#two{
	stroke-dasharray: 641.24;
	opacity: 0;
}

#two.bolt-active{
	animation: animationtwo .25s 0s 3 linear;
}

#three{
	stroke-dasharray: 366.74;
	opacity: 0;
}

#three.bolt-active{
	animation:animationthree .25s 0s 3 linear;
}

#four{
	stroke-dasharray: 197.63;
	opacity: 0;
}

#four.bolt-active{
	animation:animationfour .25s 0s 2 linear;
}

#five{
	stroke-dasharray: 159.93;
	opacity: 0;
}

#five.bolt-active{
	animation:animationfive .25s 0.3s 3 linear;
}

#six{
	stroke-dasharray: 819.26;
	opacity: 0;
}

#six.bolt-active{
	animation:animationsix .35s 0s 3 linear;
}

#seven{
	stroke-dasharray: 417.92;
	opacity: 0;
}

#seven.bolt-active{
	animation:animationseven .25s .2s 1 linear;
}

body.bolt-active {
	animation:pop .4s .2s 2 cubic-bezier(0,.94,.73,1);
}

body.dusk.bolt-active{
	animation:popdusk .4s .2s 2 cubic-bezier(0,.94,.73,1);
}

/*raindrops*/
#svg_1,
#svg_2,
#svg_3,
#svg_4,
#svg_5,
#svg_6,
#svg_7,
#svg_8,
#svg_9,
#svg_10,
#svg_11,
#svg_12,
#svg_13,
#svg_14,
#svg_15,
#svg_16,
#svg_17,
#svg_18,
#svg_19,
#svg_20,
#svg_21{
	opacity: 0;
}

#svg_11.animated,
#svg_7.animated,
#svg_20.animated{
	animation: fall 0.5s linear infinite;
	opacity: 1;
}

#svg_9.animated,
#svg_16.animated,
#svg_18.animated,
#svg_13.animated{
	animation: fall .8s linear infinite;
	opacity: 1;
}

#svg_8.animated,
#svg_14.animated,
#svg_15.animated{
	animation: fall 1.2s linear infinite;
	opacity: 1;
}

#svg_6.animated,
#svg_21.animated,
#svg_2.animated,
#svg_10.animated{
	animation: fall 1.6s linear infinite;
	opacity: 1;
}

#svg_12.animated,
#svg_1.animated,
#svg_19.animated,
#svg_3.animated{
	animation: fall 1.8s linear infinite;
	opacity: 1;
}

#svg_4.animated,
#svg_17.animated,
#svg_5.animated{
	animation: fall 2.1s linear infinite;
	opacity: 1;
}

#rain-forward #svg_4.animated,
#rain-forward #svg_12.animated{
	animation: fall .2s linear infinite;
	opacity:1;
}

#rain-forward #svg_14.animated,
#rain-forward #svg_2.animated,
#rain-forward #svg_9.animated{
	animation: fall .4s linear infinite;
	opacity:1;
}

#rain-forward #svg_17.animated,
#rain-forward #svg_3.animated,
#rain-forward #svg_1.animated{
	animation: fall .6s linear infinite;
	opacity:1;
}

#rain-forward #svg_5.animated,
#rain-forward #svg_7.animated,
#rain-forward #svg_10.animated{
	animation: fall 1s linear infinite;
	opacity:1;
}

#rain-forward #svg_6.animated,
#rain-forward #svg_8.animated,
#rain-forward #svg_11.animated{
	animation: fall 1.5s linear infinite;
	opacity:1;
}

@keyframes animationone {
	from{
		stroke-dashoffset:571;
		opacity: 0;
	}

	to {
	    stroke-dashoffset: 0;
	    opacity: 1;
	 }
}

@keyframes animationtwo{
	from{
		stroke-dashoffset: 641.24;
		opacity: 0;
	}
	to{
		stroke-dashoffset: 0;
		 opacity: 1;
	}
}

@keyframes animationthree{
	from{
		stroke-dashoffset: 366.74;
		opacity: 0;
	}
	to{
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes animationfour{
	from{
		stroke-dashoffset: 197.63;
		opacity: 0;
	}
	to{
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes animationfive{
	from{
		stroke-dashoffset: 159.93;
		opacity: 0;
	}
	to{
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes animationsix{
	from{
		stroke-dashoffset: 819.26;
		opacity: 0;
	}
	to{
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes animationseven{
	from{
		stroke-dashoffset: 417.92;
		opacity: 0;
	}
	to{
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes pop{
	from{
		background:#0f0f12;
	}
	to{
		background:  #211d23;
	}
}

@keyframes popdusk{
	to{
		background: rgba(0,0,30,.6); /* fallback for old browsers */
	    background: -webkit-linear-gradient(bottom, #ffd89b, rgba(0,0,30,.6));
    	background: -o-linear-gradient(bottom, #ffd89b, rgba(0,0,30,.6));
	    background: linear-gradient(to top, #ffd89b, rgba(0,0,30,.6)); /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	}

}

@keyframes fall {
	  from {
	    transform:translateY(-200px);
	  }
	  to {
	  	 transform:translateY(400px);
	  }
}

@media(max-width:767px){
	.control-single{
		display:block;
		margin-bottom:30px;
	}
}
              
            
!

JS

              
                $( document ).ready(function() {
   

	function runLightning(){
		$('#one, #two, #three, #four, #five, #six, #seven, body, body.dusk').addClass('bolt-active');
		
	}

	function resetLightning(){
		$('#one, #two, #three, #four, #five, #six, #seven, body, body.dusk').removeClass('bolt-active');
		$('.lightning-button').prop('disabled', false);
	}

	$('.lightning-button').on('click', function(){
		runLightning();
		setTimeout(resetLightning, 1000);
		$(this).prop('disabled', true);
	})

	$('#no-rain-radio').on('click', function(){
		$('#svg_1, #svg_2, #svg_3, #svg_4, #svg_5, #svg_6, #svg_7, #svg_8, #svg_9, #svg_10, #svg_11, #svg_12, #svg_13, #svg_14, #svg_15, #svg_16, #svg_17, #svg_18, #svg_19, #svg_20, #svg_21').removeClass('animated');
		$('#light-rain-radio')
	});

	$('#light-rain-radio').on('click', function(){
		$('#rain-back #svg_1, #rain-back #svg_2, #rain-back #svg_3, #rain-back #svg_4, #rain-back #svg_5, #rain-back #svg_6, #rain-back #svg_7, #rain-back #svg_8, #rain-back #svg_9, #rain-back #svg_10, #rain-back #svg_11, #rain-back #svg_12, #rain-back #svg_13, #rain-back #svg_14, #rain-back #svg_15, #rain-back #svg_16, #rain-back #svg_17, #rain-back #svg_18, #rain-back #svg_19, #rain-back #svg_20, #rain-back #svg_21, #rain-middle #svg_1, #rain-middle #svg_2, #rain-middle #svg_3, #rain-middle #svg_4, #rain-middle #svg_5, #rain-middle #svg_6, #rain-middle #svg_7, #rain-middle #svg_8, #rain-middle #svg_9, #rain-middle #svg_10, #rain-middle #svg_11, #rain-middle #svg_12, #rain-middle #svg_13, #rain-middle #svg_14, #rain-middle #svg_15, #rain-middle #svg_16, #rain-middle #svg_17').addClass('animated');
		$('#rain-forward #svg_1, #rain-forward #svg_2, #rain-forward #svg_3, #rain-forward #svg_4, #rain-forward #svg_5, #rain-forward #svg_6, #rain-forward #svg_7, #rain-forward #svg_8, #rain-forward #svg_9, #rain-forward #svg_10, #rain-forward #svg_11, #rain-forward #svg_12, #rain-forward #svg_13, #rain-forward #svg_14, #rain-forward #svg_15, #rain-forward #svg_16, #rain-forward #svg_17').removeClass('animated');
	});

	$('#heavy-rain-radio').on('click', function(){
		$('#svg_1, #svg_2, #svg_3, #svg_4, #svg_5, #svg_6, #svg_7, #svg_8, #svg_9, #svg_10, #svg_11, #svg_12, #svg_13, #svg_14, #svg_15, #svg_16, #svg_17, #svg_18, #svg_19, #svg_20, #svg_21').addClass('animated');
	});

	$('#no-rain-radio').on('click', function(){
		$('#label-light-rain, #label-heavy-rain').removeClass('highlighted');
		$('#label-no-rain').addClass('highlighted');
	});

	$('#light-rain-radio').on('click', function(){
		$('#label-no-rain, #label-heavy-rain').removeClass('highlighted');
		$('#label-light-rain').addClass('highlighted');
	});

	$('#heavy-rain-radio').on('click', function(){
		$('#label-no-rain, #label-light-rain').removeClass('highlighted');
		$('#label-heavy-rain').addClass('highlighted');
	});

	$('#light-night').on('click', function(){
		$('#label-dusk').removeClass('highlighted');
		$('#label-night').addClass('highlighted');
		$('body').removeClass('dusk');
	});

	$('#light-dusk').on('click', function(){
		$('#label-night').removeClass('highlighted');
		$('#label-dusk').addClass('highlighted');
		$('body').addClass('dusk');
	});
});
              
            
!
999px

Console