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

              
                <!--Work in progress. Icons match with forecast.io's (nka darksky.net) API "Icon" field-->

<div class="fluid-container">
	<div class="fluid-row" id="top">
		<div class="col-xs-2 format">
			<div class="icon-position" title="Clear Day"><svg id="clear-day" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Clear Day</title><g><path id="cd-sun" d="M49.5,27A22.5,22.5,0,1,1,27,49.5,22.53,22.53,0,0,1,49.5,27m0-5A27.5,27.5,0,1,0,77,49.5,27.5,27.5,0,0,0,49.5,22Z"/><g id="cd-rays"><path d="M16.5,52H2.5a2.5,2.5,0,0,1,0-5h14a2.5,2.5,0,0,1,0,5Z"/><path d="M96.5,52h-14a2.5,2.5,0,0,1,0-5h14a2.5,2.5,0,0,1,0,5Z"/><path d="M49.5,99A2.5,2.5,0,0,1,47,96.5v-14a2.5,2.5,0,0,1,5,0v14A2.5,2.5,0,0,1,49.5,99Z"/><path d="M49.5,19A2.5,2.5,0,0,1,47,16.5V2.5a2.5,2.5,0,0,1,5,0v14A2.5,2.5,0,0,1,49.5,19Z"/><path d="M82.73,85.23A2.49,2.49,0,0,1,81,84.5l-9.9-9.9a2.5,2.5,0,0,1,3.54-3.54L84.5,81a2.5,2.5,0,0,1-1.77,4.27Z"/><path d="M26.17,28.67a2.49,2.49,0,0,1-1.77-.73L14.5,18A2.5,2.5,0,0,1,18,14.5l9.9,9.9a2.5,2.5,0,0,1-1.77,4.27Z"/><path d="M72.83,28.67a2.5,2.5,0,0,1-1.77-4.27L81,14.5A2.5,2.5,0,0,1,84.5,18l-9.9,9.9A2.49,2.49,0,0,1,72.83,28.67Z"/><path d="M16.27,85.23A2.5,2.5,0,0,1,14.5,81l9.9-9.9a2.5,2.5,0,0,1,3.54,3.54L18,84.5A2.49,2.49,0,0,1,16.27,85.23Z"/></g></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Clear Night"><svg id="clear-night" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Clear Night</title><g><g id="cn-stars"><polygon points="46.75 10 47.83 12.3 50.25 12.67 48.5 14.47 48.91 17 46.75 15.8 44.59 17 45 14.47 43.25 12.67 45.67 12.3 46.75 10" style="fill-rule:evenodd"/><path d="M48.91,17.38a.38.38,0,0,1-.18,0l-2-1.1-2,1.1a.38.38,0,0,1-.55-.39l.38-2.35L43,12.94a.37.37,0,0,1,.21-.63L45.41,12l1-2.12a.39.39,0,0,1,.68,0l1,2.12,2.22.34a.37.37,0,0,1,.21.63L48.9,14.59l.38,2.35a.38.38,0,0,1-.37.44Zm-2.16-1.95a.38.38,0,0,1,.18,0l1.49.82-.29-1.77a.37.37,0,0,1,.1-.32l1.24-1.27-1.7-.26a.38.38,0,0,1-.28-.21l-.74-1.58L46,12.46a.38.38,0,0,1-.28.21l-1.7.26,1.24,1.27a.37.37,0,0,1,.1.32l-.29,1.77,1.49-.82A.38.38,0,0,1,46.75,15.43Z"/><polygon points="80.75 24.5 82.3 27.79 85.75 28.32 83.25 30.88 83.84 34.5 80.75 32.79 77.66 34.5 78.25 30.88 75.75 28.32 79.2 27.79 80.75 24.5" style="fill-rule:evenodd"/><path d="M83.84,34.88a.38.38,0,0,1-.18,0l-2.91-1.61-2.91,1.61a.38.38,0,0,1-.55-.39L77.85,31l-2.37-2.43a.37.37,0,0,1,.21-.63l3.26-.5,1.46-3.11a.39.39,0,0,1,.68,0l1.46,3.11,3.26.5a.37.37,0,0,1,.21.63L83.65,31l.56,3.43a.38.38,0,0,1-.37.44Zm-3.09-2.46a.38.38,0,0,1,.18,0l2.41,1.33-.47-2.86a.37.37,0,0,1,.1-.32l2-2-2.73-.42A.38.38,0,0,1,82,28l-1.21-2.57L79.54,28a.38.38,0,0,1-.28.21l-2.73.42,2,2a.37.37,0,0,1,.1.32l-.47,2.86,2.41-1.33A.38.38,0,0,1,80.75,32.42Z"/><polygon points="15.75 27.5 17.3 30.79 20.75 31.32 18.25 33.88 18.84 37.5 15.75 35.79 12.66 37.5 13.25 33.88 10.75 31.32 14.21 30.79 15.75 27.5" style="fill-rule:evenodd"/><path d="M18.84,37.88a.38.38,0,0,1-.18,0l-2.91-1.61-2.91,1.61a.38.38,0,0,1-.55-.39L12.85,34l-2.37-2.43a.37.37,0,0,1,.21-.63l3.26-.5,1.46-3.11a.39.39,0,0,1,.68,0l1.46,3.11,3.26.5a.37.37,0,0,1,.21.63L18.65,34l.56,3.43a.38.38,0,0,1-.37.44Zm-3.09-2.46a.38.38,0,0,1,.18,0l2.41,1.33-.47-2.86a.37.37,0,0,1,.1-.32l2-2-2.73-.42A.38.38,0,0,1,17,31l-1.21-2.57L14.54,31a.38.38,0,0,1-.28.21l-2.73.42,2,2a.37.37,0,0,1,.1.32l-.47,2.86,2.41-1.33A.38.38,0,0,1,15.75,35.42Z"/><polygon points="85.75 55 86.83 57.3 89.25 57.67 87.5 59.47 87.91 62 85.75 60.8 83.59 62 84 59.47 82.25 57.67 84.67 57.3 85.75 55" style="fill-rule:evenodd"/><path d="M87.91,62.38a.38.38,0,0,1-.18,0l-2-1.1-2,1.1a.38.38,0,0,1-.55-.39l.38-2.35L82,57.94a.37.37,0,0,1,.21-.63L84.41,57l1-2.12a.39.39,0,0,1,.68,0l1,2.12,2.22.34a.37.37,0,0,1,.21.63L87.9,59.59l.38,2.35a.38.38,0,0,1-.37.44Zm-2.16-1.95a.38.38,0,0,1,.18,0l1.49.82-.29-1.77a.37.37,0,0,1,.1-.32l1.24-1.27-1.7-.26a.38.38,0,0,1-.28-.21l-.74-1.58L85,57.46a.38.38,0,0,1-.28.21l-1.7.26,1.24,1.27a.37.37,0,0,1,.1.32l-.29,1.77,1.49-.82A.38.38,0,0,1,85.75,60.43Z"/></g><path id="cn-moon" d="M52.67,33.5A32.37,32.37,0,0,0,50.19,46a32.74,32.74,0,0,0,16,28A22.51,22.51,0,1,1,52.67,33.5m0-5A27.5,27.5,0,1,0,74.81,72.35a27.51,27.51,0,0,1-14.24-42.7,27.3,27.3,0,0,0-7.88-1.15Z"/></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Rain"><svg id="rain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Rain</title><g><g id="r-rain"><g id="r-rain1"><path d="M8,97a1,1,0,0,1-1-1V88a1,1,0,0,1,2,0v8A1,1,0,0,1,8,97Z"/><path d="M26,97a1,1,0,0,1-1-1V88a1,1,0,0,1,2,0v8A1,1,0,0,1,26,97Z"/><path d="M17,81a1,1,0,0,1-1-1V72a1,1,0,0,1,2,0v8A1,1,0,0,1,17,81Z"/><path d="M44,97a1,1,0,0,1-1-1V88a1,1,0,0,1,2,0v8A1,1,0,0,1,44,97Z"/><path d="M62,97a1,1,0,0,1-1-1V88a1,1,0,0,1,2,0v8A1,1,0,0,1,62,97Z"/><path d="M80,97a1,1,0,0,1-1-1V88a1,1,0,0,1,2,0v8A1,1,0,0,1,80,97Z"/><path d="M35,81a1,1,0,0,1-1-1V72a1,1,0,0,1,2,0v8A1,1,0,0,1,35,81Z"/><path d="M53,81a1,1,0,0,1-1-1V72a1,1,0,0,1,2,0v8A1,1,0,0,1,53,81Z"/><path d="M71,81a1,1,0,0,1-1-1V72a1,1,0,0,1,2,0v8A1,1,0,0,1,71,81Z"/><path d="M89,81a1,1,0,0,1-1-1V72a1,1,0,0,1,2,0v8A1,1,0,0,1,89,81Z"/></g><g id="r-rain2"><path d="M8,65a1,1,0,0,1-1-1V56a1,1,0,0,1,2,0v8A1,1,0,0,1,8,65Z"/><path d="M26,65a1,1,0,0,1-1-1V56a1,1,0,0,1,2,0v8A1,1,0,0,1,26,65Z"/><path d="M17,49a1,1,0,0,1-1-1V40a1,1,0,0,1,2,0v8A1,1,0,0,1,17,49Z"/><path d="M44,65a1,1,0,0,1-1-1V56a1,1,0,0,1,2,0v8A1,1,0,0,1,44,65Z"/><path d="M62,65a1,1,0,0,1-1-1V56a1,1,0,0,1,2,0v8A1,1,0,0,1,62,65Z"/><path d="M80,65a1,1,0,0,1-1-1V56a1,1,0,0,1,2,0v8A1,1,0,0,1,80,65Z"/><path d="M35,49a1,1,0,0,1-1-1V40a1,1,0,0,1,2,0v8A1,1,0,0,1,35,49Z"/><path d="M53,49a1,1,0,0,1-1-1V40a1,1,0,0,1,2,0v8A1,1,0,0,1,53,49Z"/><path d="M71,49a1,1,0,0,1-1-1V40a1,1,0,0,1,2,0v8A1,1,0,0,1,71,49Z"/><path d="M89,49a1,1,0,0,1-1-1V40a1,1,0,0,1,2,0v8A1,1,0,0,1,89,49Z"/></g></g><path id="r-cloud" d="M97,48A20,20,0,0,1,64.62,63.69,27,27,0,0,1,33.7,62.52,17.49,17.49,0,1,1,21,33a16.84,16.84,0,0,1,3.12.29,27,27,0,0,1,49.69-5A19.71,19.71,0,0,1,77,28,20,20,0,0,1,97,48Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M77,70.5a22.19,22.19,0,0,1-12.51-3.81,29.49,29.49,0,0,1-30.56-.95A20,20,0,1,1,21,30.5c.47,0,.94,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08a22.5,22.5,0,0,1,0,45ZM64.77,60.62l1.41,1.11A17.28,17.28,0,0,0,77,65.5a17.5,17.5,0,0,0,0-35,17.3,17.3,0,0,0-2.79.23L72.45,31l-.84-1.57A24.51,24.51,0,0,0,26.52,34l-.64,2.16-2.21-.42A14.41,14.41,0,0,0,21,35.5a15,15,0,0,0,0,30,14.79,14.79,0,0,0,10.88-4.69l1.54-1.64,1.79,1.36a24.47,24.47,0,0,0,28,1.06Z"/></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Snow"><svg id="snow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Snow</title><g><g id="s-snow"><g id="s-snow1"><path d="M8,95.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,8,95.38Z"/><path d="M12,95.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M10,96a.38.38,0,0,1-.37-.37V90a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,10,96Z"/><path d="M12.83,93.38H7.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M25,95.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,25,95.38Z"/><path d="M29,95.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M27,96a.38.38,0,0,1-.37-.37V90a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,27,96Z"/><path d="M29.83,93.38H24.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M42,95.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,42,95.38Z"/><path d="M46,95.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M44,96a.38.38,0,0,1-.37-.37V90a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,44,96Z"/><path d="M46.83,93.38H41.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M59,95.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,59,95.38Z"/><path d="M63,95.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M61,96a.38.38,0,0,1-.37-.37V90a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,61,96Z"/><path d="M63.83,93.38H58.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M76,95.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,76,95.38Z"/><path d="M80,95.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M78,96a.38.38,0,0,1-.37-.37V90a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,78,96Z"/><path d="M80.83,93.38H75.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M17,86.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,17,86.38Z"/><path d="M21,86.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M19,87a.38.38,0,0,1-.37-.37V81a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,19,87Z"/><path d="M21.83,84.38H16.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M34,86.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,34,86.38Z"/><path d="M38,86.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M36,87a.38.38,0,0,1-.37-.37V81a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,36,87Z"/><path d="M38.83,84.38H33.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M51,86.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,51,86.38Z"/><path d="M55,86.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M53,87a.38.38,0,0,1-.37-.37V81a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,53,87Z"/><path d="M55.83,84.38H50.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M68,86.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,68,86.38Z"/><path d="M72,86.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M70,87a.38.38,0,0,1-.37-.37V81a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,70,87Z"/><path d="M72.83,84.38H67.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M85,86.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,85,86.38Z"/><path d="M89,86.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M87,87a.38.38,0,0,1-.37-.37V81a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,87,87Z"/><path d="M89.83,84.38H84.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M8,77.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,8,77.38Z"/><path d="M12,77.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M10,78a.38.38,0,0,1-.37-.37V72a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,10,78Z"/><path d="M12.83,75.38H7.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M25,77.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,25,77.38Z"/><path d="M29,77.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M27,78a.38.38,0,0,1-.37-.37V72a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,27,78Z"/><path d="M29.83,75.38H24.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M42,77.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,42,77.38Z"/><path d="M46,77.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M44,78a.38.38,0,0,1-.37-.37V72a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,44,78Z"/><path d="M46.83,75.38H41.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M59,77.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,59,77.38Z"/><path d="M63,77.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M61,78a.38.38,0,0,1-.37-.37V72a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,61,78Z"/><path d="M63.83,75.38H58.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M76,77.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,76,77.38Z"/><path d="M80,77.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M78,78a.38.38,0,0,1-.37-.37V72a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,78,78Z"/><path d="M80.83,75.38H75.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/></g><g id="s-snow2"><path d="M17,68.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,17,68.38Z"/><path d="M21,68.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M19,69a.38.38,0,0,1-.37-.37V63a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,19,69Z"/><path d="M21.83,66.38H16.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M34,68.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,34,68.38Z"/><path d="M38,68.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M36,69a.38.38,0,0,1-.37-.37V63a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,36,69Z"/><path d="M38.83,66.38H33.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M51,68.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,51,68.38Z"/><path d="M55,68.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M53,69a.38.38,0,0,1-.37-.37V63a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,53,69Z"/><path d="M55.83,66.38H50.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M68,68.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,68,68.38Z"/><path d="M72,68.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M70,69a.38.38,0,0,1-.37-.37V63a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,70,69Z"/><path d="M72.83,66.38H67.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M85,68.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,85,68.38Z"/><path d="M89,68.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M87,69a.38.38,0,0,1-.37-.37V63a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,87,69Z"/><path d="M89.83,66.38H84.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M8,59.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,8,59.38Z"/><path d="M12,59.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M10,60a.38.38,0,0,1-.37-.37V54a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,10,60Z"/><path d="M12.83,57.38H7.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M25,59.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,25,59.38Z"/><path d="M29,59.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M27,60a.38.38,0,0,1-.37-.37V54a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,27,60Z"/><path d="M29.83,57.38H24.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M42,59.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,42,59.38Z"/><path d="M46,59.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M44,60a.38.38,0,0,1-.37-.37V54a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,44,60Z"/><path d="M46.83,57.38H41.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M59,59.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,59,59.38Z"/><path d="M63,59.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M61,60a.38.38,0,0,1-.37-.37V54a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,61,60Z"/><path d="M63.83,57.38H58.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M76,59.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,76,59.38Z"/><path d="M80,59.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M78,60a.38.38,0,0,1-.37-.37V54a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,78,60Z"/><path d="M80.83,57.38H75.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M17,50.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,17,50.38Z"/><path d="M21,50.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M19,51a.38.38,0,0,1-.37-.37V45a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,19,51Z"/><path d="M21.83,48.38H16.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M34,50.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,34,50.38Z"/><path d="M38,50.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M36,51a.38.38,0,0,1-.37-.37V45a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,36,51Z"/><path d="M38.83,48.38H33.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M51,50.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,51,50.38Z"/><path d="M55,50.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M53,51a.38.38,0,0,1-.37-.37V45a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,53,51Z"/><path d="M55.83,48.38H50.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M68,50.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,68,50.38Z"/><path d="M72,50.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M70,51a.38.38,0,0,1-.37-.37V45a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,70,51Z"/><path d="M72.83,48.38H67.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M85,50.38a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.38.38,0,0,1,85,50.38Z"/><path d="M89,50.38a.38.38,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M87,51a.38.38,0,0,1-.37-.37V45a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,87,51Z"/><path d="M89.83,48.38H84.17a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/></g></g><path id="s-cloud" data-name="s-cloud" d="M97,47A20,20,0,0,1,64.62,62.69,27,27,0,0,1,33.7,61.52,17.49,17.49,0,1,1,21,32a16.84,16.84,0,0,1,3.12.29,27,27,0,0,1,49.69-5A19.71,19.71,0,0,1,77,27,20,20,0,0,1,97,47Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M77,69.5a22.2,22.2,0,0,1-12.51-3.81,29.49,29.49,0,0,1-30.56-.95A20,20,0,1,1,21,29.5c.47,0,.94,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08a22.5,22.5,0,0,1,0,45ZM64.77,59.62l1.41,1.11A17.28,17.28,0,0,0,77,64.5a17.5,17.5,0,0,0,0-35,17.31,17.31,0,0,0-2.79.23L72.45,30l-.84-1.57A24.51,24.51,0,0,0,26.52,33l-.64,2.16-2.21-.42A14.4,14.4,0,0,0,21,34.5a15,15,0,0,0,0,30,14.79,14.79,0,0,0,10.88-4.69l1.54-1.64,1.79,1.36a24.47,24.47,0,0,0,28,1.06Z"/></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Sleet"><svg id="sleet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Sleet</title><g><g id="sl-sleet"><g id="sl-sleet1"><path d="M24.59,91.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,24.59,91.88Z"/><path d="M28.59,91.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M26.59,92.53a.38.38,0,0,1-.37-.37V86.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,26.59,92.53Z"/><path d="M29.41,89.88H23.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M60.59,91.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,60.59,91.88Z"/><path d="M64.59,91.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M62.59,92.53a.38.38,0,0,1-.37-.37V86.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,62.59,92.53Z"/><path d="M65.41,89.88H59.76a.38.38,0,1,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M15.59,75.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,15.59,75.88Z"/><path d="M19.59,75.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M17.59,76.53a.38.38,0,0,1-.37-.37V70.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,17.59,76.53Z"/><path d="M20.41,73.88H14.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M51.59,75.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,51.59,75.88Z"/><path d="M55.59,75.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M53.59,76.53a.38.38,0,0,1-.37-.37V70.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,53.59,76.53Z"/><path d="M56.41,73.88H50.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M87.59,75.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,87.59,75.88Z"/><path d="M91.59,75.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M89.59,76.53a.38.38,0,0,1-.37-.37V70.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,89.59,76.53Z"/><path d="M92.41,73.88H86.76a.38.38,0,1,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M8.59,94a1,1,0,0,1-1-1V85a1,1,0,0,1,2,0v8A1,1,0,0,1,8.59,94Z"/><path d="M44.59,94a1,1,0,0,1-1-1V85a1,1,0,0,1,2,0v8A1,1,0,0,1,44.59,94Z"/><path d="M80.59,94a1,1,0,0,1-1-1V85a1,1,0,0,1,2,0v8A1,1,0,0,1,80.59,94Z"/><path d="M35.59,78a1,1,0,0,1-1-1V69a1,1,0,0,1,2,0v8A1,1,0,0,1,35.59,78Z"/><path d="M71.59,78a1,1,0,0,1-1-1V69a1,1,0,0,1,2,0v8A1,1,0,0,1,71.59,78Z"/></g><g id="sl-sleet2"><path d="M24.59,59.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,24.59,59.88Z"/><path d="M28.59,59.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M26.59,60.53a.38.38,0,0,1-.37-.37V54.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,26.59,60.53Z"/><path d="M29.41,57.88H23.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M60.59,59.88a.38.38,0,0,1-.27-.64l4-4a.38.38,0,0,1,.53.53l-4,4A.37.37,0,0,1,60.59,59.88Z"/><path d="M64.59,59.88a.37.37,0,0,1-.27-.11l-4-4a.38.38,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M62.59,60.53a.38.38,0,0,1-.37-.37V54.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,62.59,60.53Z"/><path d="M65.41,57.88H59.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M15.59,43.88a.38.38,0,0,1-.27-.64l4-4a.37.37,0,0,1,.53.53l-4,4A.37.37,0,0,1,15.59,43.88Z"/><path d="M19.59,43.88a.37.37,0,0,1-.27-.11l-4-4a.37.37,0,1,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M17.59,44.53a.38.38,0,0,1-.37-.37V38.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,17.59,44.53Z"/><path d="M20.41,41.88H14.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M51.59,43.88a.38.38,0,0,1-.27-.64l4-4a.37.37,0,0,1,.53.53l-4,4A.37.37,0,0,1,51.59,43.88Z"/><path d="M55.59,43.88a.37.37,0,0,1-.27-.11l-4-4a.37.37,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M53.59,44.53a.38.38,0,0,1-.37-.37V38.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,53.59,44.53Z"/><path d="M56.41,41.88H50.76a.38.38,0,0,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M87.59,43.88a.38.38,0,0,1-.27-.64l4-4a.37.37,0,0,1,.53.53l-4,4A.37.37,0,0,1,87.59,43.88Z"/><path d="M91.59,43.88a.37.37,0,0,1-.27-.11l-4-4a.37.37,0,0,1,.53-.53l4,4a.38.38,0,0,1-.27.64Z"/><path d="M89.59,44.53a.38.38,0,0,1-.37-.37V38.5a.38.38,0,0,1,.75,0v5.66A.38.38,0,0,1,89.59,44.53Z"/><path d="M92.41,41.88H86.76a.38.38,0,1,1,0-.75h5.66a.38.38,0,0,1,0,.75Z"/><path d="M8.59,62a1,1,0,0,1-1-1V53a1,1,0,0,1,2,0v8A1,1,0,0,1,8.59,62Z"/><path d="M44.59,62a1,1,0,0,1-1-1V53a1,1,0,0,1,2,0v8A1,1,0,0,1,44.59,62Z"/><path d="M80.59,62a1,1,0,0,1-1-1V53a1,1,0,1,1,2,0v8A1,1,0,0,1,80.59,62Z"/><path d="M35.59,46a1,1,0,0,1-1-1V37a1,1,0,0,1,2,0v8A1,1,0,0,1,35.59,46Z"/><path d="M71.59,46a1,1,0,0,1-1-1V37a1,1,0,0,1,2,0v8A1,1,0,0,1,71.59,46Z"/></g></g><path id="r-cloud" d="M97,45A20,20,0,0,1,64.62,60.69,27,27,0,0,1,33.7,59.52,17.49,17.49,0,1,1,21,30a16.84,16.84,0,0,1,3.12.29,27,27,0,0,1,49.69-5A19.71,19.71,0,0,1,77,25,20,20,0,0,1,97,45Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M77,67.5a22.19,22.19,0,0,1-12.51-3.81,29.49,29.49,0,0,1-30.56-.95A20,20,0,1,1,21,27.5c.47,0,.94,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08a22.5,22.5,0,0,1,0,45ZM64.77,57.62l1.41,1.11A17.28,17.28,0,0,0,77,62.5a17.5,17.5,0,0,0,0-35,17.3,17.3,0,0,0-2.79.23L72.45,28l-.84-1.57A24.51,24.51,0,0,0,26.52,31l-.64,2.16-2.21-.42A14.41,14.41,0,0,0,21,32.5a15,15,0,0,0,0,30,14.79,14.79,0,0,0,10.88-4.69l1.54-1.64,1.79,1.36a24.47,24.47,0,0,0,28,1.06Z"/></g></g></svg></div>
		</div>
	</div>
	<div class="fluid-row" id="bottom">
		<div class="col-xs-2 format">
			<div class="icon-position" title="Wind"><svg id="wind" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Wind</title><g><g id="w-wind4"><path d="M10,39.6a1.5,1.5,0,0,1,0-3c18.39-.2,37.58-.2,55.5,0a1.5,1.5,0,0,1,0,3h0c-17.9-.2-37.07-.2-55.44,0Z"/><path d="M65.95,39.6a1.5,1.5,0,0,1,0-3,7.51,7.51,0,0,0,7.5-7.5,5.71,5.71,0,0,0-5.7-5.7,4.26,4.26,0,0,0-4.26,4.26,3.11,3.11,0,0,0,3.11,3.11,2.19,2.19,0,0,0,2.17-1.88,1.5,1.5,0,0,1,3,.42,5.21,5.21,0,0,1-5.14,4.46,6.12,6.12,0,0,1-6.11-6.11,7.27,7.27,0,0,1,7.26-7.26,8.71,8.71,0,0,1,8.7,8.7A10.51,10.51,0,0,1,65.95,39.6Z"/></g><g id="w-wind3"><path d="M62.15,67.63H26a1.5,1.5,0,0,1,0-3H62.15a1.5,1.5,0,0,1,0,3Z"/><path d="M62.88,79.37a5.68,5.68,0,0,1-5.67-5.67A4.84,4.84,0,0,1,62,68.86a4.19,4.19,0,0,1,4.13,3.58,1.5,1.5,0,1,1-3,.42,1.17,1.17,0,0,0-1.16-1,1.84,1.84,0,0,0-1.84,1.84,2.67,2.67,0,0,0,2.67,2.67,3.72,3.72,0,0,0,3.71-3.71,5,5,0,0,0-5-5,1.5,1.5,0,0,1,0-3,8,8,0,0,1,8,8A6.72,6.72,0,0,1,62.88,79.37Z"/></g><g id="w-wind2"><path d="M80.33,53.55H18a1.5,1.5,0,0,1,0-3H80.33a1.5,1.5,0,0,1,0,3Z"/><path d="M82.57,69.45a7.16,7.16,0,0,1-7.16-7.16,6,6,0,0,1,6-6,5.14,5.14,0,0,1,5.07,4.4,1.5,1.5,0,0,1-3,.42,2.13,2.13,0,0,0-2.1-1.82,3,3,0,0,0-3,3,4.16,4.16,0,0,0,4.16,4.16,5.57,5.57,0,0,0,5.57-5.57,7.34,7.34,0,0,0-7.34-7.34,1.5,1.5,0,0,1,0-3A10.35,10.35,0,0,1,91.14,60.88,8.58,8.58,0,0,1,82.57,69.45Z"/></g><g id="w-wind1"><path d="M81.5,47.37H70a1.5,1.5,0,0,1,0-3H81.5a1.5,1.5,0,0,1,0,3Z"/><path d="M81.84,47.37a1.5,1.5,0,0,1,0-3,5,5,0,0,0,5-5,3.72,3.72,0,0,0-3.71-3.71,2.67,2.67,0,0,0-2.67,2.67,1.84,1.84,0,0,0,1.84,1.84,1.17,1.17,0,0,0,1.16-1,1.5,1.5,0,1,1,3,.42,4.19,4.19,0,0,1-4.13,3.58,4.84,4.84,0,0,1-4.84-4.84,5.68,5.68,0,0,1,5.67-5.67,6.72,6.72,0,0,1,6.71,6.71A8,8,0,0,1,81.84,47.37Z"/></g></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Fog"><svg id="fog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Fog</title><g><path id="f-cloud" d="M3.25,49.5A17.51,17.51,0,0,1,20.75,32a16.84,16.84,0,0,1,3.12.29,27,27,0,0,1,49.69-5A19.71,19.71,0,0,1,76.75,27a20,20,0,0,1,20,20,20.24,20.24,0,0,1-.12,2.22" style="fill:#fff;fill-opacity:0;fill-rule:evenodd"/><path d="M3.25,52a2.5,2.5,0,0,1-2.5-2.5,20,20,0,0,1,20-20c.47,0,.94,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08A22.53,22.53,0,0,1,99.25,47a22.78,22.78,0,0,1-.14,2.49,2.5,2.5,0,1,1-5-.55A17.75,17.75,0,0,0,94.25,47a17.52,17.52,0,0,0-17.5-17.5,17.25,17.25,0,0,0-2.79.23L72.2,30l-.84-1.57A24.51,24.51,0,0,0,26.27,33l-.64,2.16-2.22-.42a14.36,14.36,0,0,0-2.66-.25,15,15,0,0,0-15,15A2.5,2.5,0,0,1,3.25,52Z"/><g id="f-fog"><path id="f-fog1" d="M97,60H3a2,2,0,0,1,0-4H97a2,2,0,0,1,0,4Z"/><path id="f-fog2" d="M97,70H3a2,2,0,0,1,0-4H97a2,2,0,0,1,0,4Z"/><path id="f-fog3" d="M97,80H3a2,2,0,0,1,0-4H97a2,2,0,0,1,0,4Z"/></g></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Cloudy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="30 0 100 100"><title>Cloudy</title><g id="Layer_2" data-name="Layer 2"><g id="weather-icons"><g id="c-cloud"><path d="M106.75,59a22.2,22.2,0,0,1-12.51-3.81,29.49,29.49,0,0,1-30.56-1A20,20,0,1,1,50.75,19q.71,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08a22.5,22.5,0,0,1,0,45ZM94.52,49.12l1.41,1.11A17.28,17.28,0,0,0,106.75,54a17.5,17.5,0,0,0,0-35,17.25,17.25,0,0,0-2.79.23l-1.76.29-.84-1.57A24.51,24.51,0,0,0,56.27,22.5l-.64,2.16-2.22-.42A14.35,14.35,0,0,0,50.75,24a15,15,0,0,0,0,30,14.79,14.79,0,0,0,10.88-4.69l1.54-1.64L65,49a24.47,24.47,0,0,0,28,1.06Z"/></g><g id="c-moving-clouds"><g id="c-moving-cloud3"><path id="r-cloud" d="M278,53.19a16.23,16.23,0,0,1-26.3,12.74,21.9,21.9,0,0,1-25.11-1,14.21,14.21,0,1,1-10.31-24,13.68,13.68,0,0,1,2.53.24,21.93,21.93,0,0,1,40.36-4.09,16,16,0,0,1,2.59-.21A16.24,16.24,0,0,1,278,53.19Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M261.73,71.46a18,18,0,0,1-10.16-3.09,24,24,0,0,1-24.82-.77A16.24,16.24,0,1,1,216.24,39c.38,0,.76,0,1.14,0a24,24,0,0,1,42.84-4c.5,0,1-.06,1.5-.06a18.27,18.27,0,1,1,0,36.55Zm-9.94-8,1.14.9a14,14,0,0,0,8.79,3.06,14.21,14.21,0,1,0,0-28.43,14.05,14.05,0,0,0-2.26.18l-1.43.23-.69-1.28a19.9,19.9,0,0,0-36.62,3.71l-.52,1.75-1.8-.34a11.7,11.7,0,0,0-2.16-.2,12.18,12.18,0,0,0,0,24.37,12,12,0,0,0,8.84-3.81l1.25-1.33,1.45,1.1a19.87,19.87,0,0,0,22.78.86Z"/></g><g id="c-moving-cloud1"><path id="r-cloud" data-name="r-cloud" d="M78,53.19a16.23,16.23,0,0,1-26.3,12.74,21.9,21.9,0,0,1-25.11-1A14.21,14.21,0,1,1,16.24,41a13.68,13.68,0,0,1,2.53.24,21.93,21.93,0,0,1,40.36-4.09,16,16,0,0,1,2.59-.21A16.24,16.24,0,0,1,78,53.19Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M61.73,71.46a18,18,0,0,1-10.16-3.09,24,24,0,0,1-24.82-.77A16.24,16.24,0,1,1,16.24,39c.38,0,.76,0,1.14,0a24,24,0,0,1,42.84-4c.5,0,1-.06,1.5-.06a18.27,18.27,0,1,1,0,36.55Zm-9.94-8,1.14.9a14,14,0,0,0,8.79,3.06,14.21,14.21,0,0,0,0-28.43,14.05,14.05,0,0,0-2.26.18L58,39.39l-.69-1.28a19.9,19.9,0,0,0-36.62,3.71l-.52,1.75-1.8-.34a11.7,11.7,0,0,0-2.16-.2,12.18,12.18,0,0,0,0,24.37,12,12,0,0,0,8.84-3.81l1.25-1.33,1.45,1.1a19.87,19.87,0,0,0,22.78.86Z"/></g><g id="c-moving-cloud2"><path id="r-cloud" data-name="r-cloud" d="M178,53.19a16.23,16.23,0,0,1-26.3,12.74,21.9,21.9,0,0,1-25.11-1,14.21,14.21,0,1,1-10.31-24,13.68,13.68,0,0,1,2.53.24,21.93,21.93,0,0,1,40.36-4.09,16,16,0,0,1,2.59-.21A16.24,16.24,0,0,1,178,53.19Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M161.73,71.46a18,18,0,0,1-10.16-3.09,24,24,0,0,1-24.82-.77A16.24,16.24,0,1,1,116.24,39c.38,0,.76,0,1.14,0a24,24,0,0,1,42.84-4c.5,0,1-.06,1.5-.06a18.27,18.27,0,1,1,0,36.55Zm-9.94-8,1.14.9a14,14,0,0,0,8.79,3.06,14.21,14.21,0,1,0,0-28.43,14.05,14.05,0,0,0-2.26.18l-1.43.23-.69-1.28a19.9,19.9,0,0,0-36.62,3.71l-.52,1.75-1.8-.34a11.7,11.7,0,0,0-2.16-.2,12.18,12.18,0,0,0,0,24.37,12,12,0,0,0,8.84-3.81l1.25-1.33,1.45,1.1a19.87,19.87,0,0,0,22.78.86Z"/></g></g></g></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Partly Cloudy Day"><svg id="partly-cloudy-day" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Partly Cloudy Day</title><g><path id="pcd-sun" d="M29.5,20.16A11.34,11.34,0,1,1,18.16,31.5,11.35,11.35,0,0,1,29.5,20.16m0-3A14.34,14.34,0,1,0,43.84,31.5,14.34,14.34,0,0,0,29.5,17.16Z"/><g id="pcd-rays"><path d="M12.82,36,5.63,37.23a1.5,1.5,0,1,1-.52-3L12.3,33a1.5,1.5,0,1,1,.52,3Z"/><path d="M53.89,28.72,46.7,30a1.5,1.5,0,1,1-.52-3l7.19-1.27a1.5,1.5,0,0,1,.52,3Z"/><path d="M34,57.11a1.5,1.5,0,0,1-1.74-1.22L31,48.7a1.5,1.5,0,0,1,3-.52l1.27,7.19A1.5,1.5,0,0,1,34,57.11Z"/><path d="M26.77,16A1.5,1.5,0,0,1,25,14.82L23.77,7.63a1.5,1.5,0,1,1,3-.52L28,14.3A1.5,1.5,0,0,1,26.77,16Z"/><path d="M49.83,47a1.5,1.5,0,0,1-1.12-.25l-6-4.19a1.5,1.5,0,0,1,1.72-2.46l6,4.19a1.5,1.5,0,0,1-.6,2.71Z"/><path d="M15.67,23.11a1.5,1.5,0,0,1-1.12-.25l-6-4.19a1.5,1.5,0,1,1,1.72-2.46l6,4.19a1.5,1.5,0,0,1-.6,2.71Z"/><path d="M39.63,18.89a1.5,1.5,0,0,1-1.49-2.34l4.19-6a1.5,1.5,0,1,1,2.46,1.72l-4.19,6A1.5,1.5,0,0,1,39.63,18.89Z"/><path d="M15.71,53a1.5,1.5,0,0,1-1.49-2.34l4.19-6a1.5,1.5,0,0,1,2.46,1.72l-4.19,6A1.5,1.5,0,0,1,15.71,53Z"/></g><path id="pcd-cloud" d="M97,54A20,20,0,0,1,64.62,69.69,27,27,0,0,1,33.7,68.52,17.49,17.49,0,1,1,21,39a16.84,16.84,0,0,1,3.12.29,27,27,0,0,1,49.69-5A19.71,19.71,0,0,1,77,34,20,20,0,0,1,97,54Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M77,76.5a22.2,22.2,0,0,1-12.51-3.81,29.49,29.49,0,0,1-30.56-1A20,20,0,1,1,21,36.5c.47,0,.94,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08a22.5,22.5,0,0,1,0,45ZM64.77,66.62l1.41,1.11A17.28,17.28,0,0,0,77,71.5a17.5,17.5,0,0,0,0-35,17.25,17.25,0,0,0-2.79.23L72.45,37l-.84-1.57A24.51,24.51,0,0,0,26.52,40l-.64,2.16-2.22-.42A14.36,14.36,0,0,0,21,41.5a15,15,0,0,0,0,30,14.79,14.79,0,0,0,10.88-4.69l1.54-1.64,1.79,1.36a24.47,24.47,0,0,0,28,1.06Z"/></g></svg></div>
		</div>
		<div class="col-xs-2 format">
			<div class="icon-position" title="Partly Cloudy Night"><svg id="partly-cloudy-night" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>Partly Cloudy Night</title><g><g id="pcn-stars"><polygon points="40.65 4.81 41.33 6.25 42.84 6.48 41.74 7.6 42 9.18 40.65 8.43 39.3 9.18 39.56 7.6 38.47 6.48 39.98 6.25 40.65 4.81" style="fill-rule:evenodd"/><path d="M42,9.43a.25.25,0,0,1-.12,0l-1.23-.68-1.23.68a.25.25,0,0,1-.26,0,.25.25,0,0,1-.1-.24l.24-1.46-1-1a.25.25,0,0,1,.14-.42L39.81,6l.62-1.32a.26.26,0,0,1,.45,0L41.5,6l1.38.21a.25.25,0,0,1,.14.42l-1,1,.24,1.46a.25.25,0,0,1-.25.29ZM40.65,8.18a.25.25,0,0,1,.12,0l.9.5L41.5,7.64a.25.25,0,0,1,.07-.21l.75-.77-1-.16a.25.25,0,0,1-.19-.14l-.45-1-.45,1A.25.25,0,0,1,40,6.5l-1,.16.75.77a.25.25,0,0,1,.07.21l-.17,1.07.9-.5A.25.25,0,0,1,40.65,8.18Z"/><polygon points="65.88 9.86 66.84 11.92 69 12.25 67.44 13.85 67.8 16.1 65.88 15.04 63.95 16.1 64.31 13.85 62.75 12.25 64.91 11.92 65.88 9.86" style="fill-rule:evenodd"/><path d="M67.8,16.35a.25.25,0,0,1-.12,0l-1.81-1-1.81,1a.25.25,0,0,1-.37-.26L64,13.93l-1.47-1.51a.25.25,0,0,1,.14-.42l2-.31.91-1.93a.25.25,0,0,1,.23-.14h0a.25.25,0,0,1,.23.14L67,11.69,69,12a.25.25,0,0,1,.14.42L67.7,13.93l.35,2.13a.25.25,0,0,1-.25.29Zm-4.53-3.93,1.22,1.25a.25.25,0,0,1,.07.21l-.29,1.75,1.48-.82a.25.25,0,0,1,.24,0l1.48.82-.29-1.75a.25.25,0,0,1,.07-.21l1.22-1.25-1.68-.26a.25.25,0,0,1-.19-.14l-.74-1.57L65.14,12a.25.25,0,0,1-.19.14Z"/><polygon points="6.3 11.73 7.27 13.79 9.42 14.12 7.86 15.72 8.23 17.98 6.3 16.91 4.37 17.98 4.74 15.72 3.18 14.12 5.34 13.79 6.3 11.73" style="fill-rule:evenodd"/><path d="M8.23,18.23a.25.25,0,0,1-.12,0l-1.81-1-1.81,1a.25.25,0,0,1-.37-.26l.35-2.13L3,14.29a.25.25,0,0,1,.14-.42l2-.31.91-1.93a.25.25,0,0,1,.23-.14h0a.25.25,0,0,1,.23.14l.91,1.93,2,.31a.25.25,0,0,1,.14.42L8.13,15.8l.35,2.13a.25.25,0,0,1-.25.29ZM3.7,14.29l1.22,1.25a.25.25,0,0,1,.07.21L4.7,17.51l1.48-.82a.25.25,0,0,1,.24,0l1.48.82-.29-1.75a.25.25,0,0,1,.07-.21L8.9,14.29,7.23,14A.25.25,0,0,1,7,13.9L6.3,12.32,5.56,13.9a.25.25,0,0,1-.19.14Z"/><polygon points="85 21.9 85.67 23.34 87.18 23.57 86.09 24.69 86.35 26.27 85 25.52 83.64 26.27 83.9 24.69 82.81 23.57 84.32 23.34 85 21.9" style="fill-rule:evenodd"/><path d="M86.35,26.52a.25.25,0,0,1-.12,0L85,25.81l-1.23.68a.25.25,0,0,1-.26,0,.25.25,0,0,1-.1-.24l.24-1.46-1-1a.25.25,0,0,1,.14-.42l1.38-.21.62-1.32a.26.26,0,0,1,.45,0l.62,1.32,1.38.21a.25.25,0,0,1,.14.42l-1,1,.24,1.46a.25.25,0,0,1-.25.29ZM85,25.27a.25.25,0,0,1,.12,0l.9.5-.17-1.07a.25.25,0,0,1,.07-.21l.75-.77-1-.16a.25.25,0,0,1-.19-.14l-.45-1-.45,1a.25.25,0,0,1-.19.14l-1,.16.75.77a.25.25,0,0,1,.07.21L84,25.8l.9-.5A.25.25,0,0,1,85,25.27Z"/></g><path id="pcn-moon" d="M28.36,15.36h.17a20.08,20.08,0,0,0-1.61,7.92A20.31,20.31,0,0,0,37,40.75a14.17,14.17,0,1,1-8.66-25.39m0-3A17.17,17.17,0,1,0,42.17,39.73a17.17,17.17,0,0,1-8.89-26.65,17,17,0,0,0-4.92-.72Z"/><path id="pcn-cloud" d="M97,54A20,20,0,0,1,64.62,69.69,27,27,0,0,1,33.7,68.52,17.49,17.49,0,1,1,21,39a16.84,16.84,0,0,1,3.12.29,27,27,0,0,1,49.69-5A19.71,19.71,0,0,1,77,34,20,20,0,0,1,97,54Z" style="fill-opacity:100;fill-rule:evenodd"/><path d="M77,76.5a22.2,22.2,0,0,1-12.51-3.81,29.49,29.49,0,0,1-30.56-1A20,20,0,1,1,21,36.5q.71,0,1.41.05a29.51,29.51,0,0,1,52.74-5c.62-.05,1.23-.08,1.85-.08a22.5,22.5,0,0,1,0,45ZM64.77,66.62l1.41,1.11A17.28,17.28,0,0,0,77,71.5a17.5,17.5,0,0,0,0-35,17.25,17.25,0,0,0-2.79.23L72.45,37l-.84-1.57A24.51,24.51,0,0,0,26.52,40l-.64,2.16-2.22-.42A14.35,14.35,0,0,0,21,41.5a15,15,0,0,0,0,30,14.79,14.79,0,0,0,10.88-4.69l1.54-1.64,1.79,1.36a24.47,24.47,0,0,0,28,1.06Z"/></g></svg></div>
		</div>
	</div>
</div>
              
            
!

CSS

              
                :root {
	--main-bg-color: #66C2FF;
}

@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@keyframes rock {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(-20deg);}
	100% {transform: rotate(0deg);}
}

@keyframes downfall-rain-sleet {
	0% {transform: translateY(0px);}
	100% {transform: translateY(32px);}
}

@keyframes downfall-snow {
	0% {transform: translateY(0px);}
	100% {transform: translateY(18px);}
}

@keyframes shake {
	0% {transform: translateX(0px);}
	25% {transform: translateX(2px);}
	50% {transform: translateX(0px);}
	75% {transform: translateX(-2px);}
	100% {transform: translateX(0px);}
}

@keyframes pass {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-100px);}
}

.format {
	background-color: var(--main-bg-color);
	height: 50vh;
	width: 20%;
}

.icon-position {
	background-color: none;
	width: 15vw;
	height: 15vw;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

svg {
	fill: #FFFFFF;
}

#r-cloud,
#s-cloud,
#c-cloud1,
#c-cloud2,
#pcd-cloud,
#pcn-cloud {
	fill: var(--main-bg-color);
}

#clear-day,
#pcd-rays {
	animation: rotate 10s infinite linear;
	transform-origin: 50% 50%;
	transform-box: fill-box;
}

#cn-moon,
#pcn-moon {
	animation: rock 5s infinite ease-in-out;
	transform-origin: 50% 50%;
}

#r-rain,
#sl-sleet {
	animation: downfall-rain-sleet 2s infinite linear;
}

#s-snow {
	animation: downfall-snow 2s infinite linear;
}

#w-wind1,
#w-wind2,
#w-wind3,
#w-wind4 {
	animation: shake 2s infinite linear;
}

#w-wind2,
#w-wind4 {
	animation-delay: .5s;
}

#f-fog1,
#f-fog2,
#f-fog3 {
	animation: shake 2s infinite linear;
}

#f-fog2 {
	animation-delay: 0.5s;
}

#f-fog3 {
	animation-delay: 1s;
}

#c-moving-clouds {
	animation: pass 7.5s infinite linear;
}
              
            
!

JS

              
                
              
            
!
999px

Console