Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="container" id="content-wrapper"> 
  
  <div class="landing">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 1921" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

<g id="backgrounds">
	
		<rect x="-83.1" y="-141.6" fill="#27AAE1" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="1729.2" height="975"/>
	
		<rect x="-48.9" y="401.6" fill="#8B5E3C" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="1676.9" height="1575"/>
</g>
<g id="clouds">
	<path class="cloud" fill="#E6E7E8" stroke="#E6E7E8" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M53.7,372.4
		c-6,0-10.9-4.9-10.9-10.9c0-6,4.9-10.9,10.9-10.9c0.8,0,1.6,0.1,2.3,0.2c0-0.5-0.1-1.1-0.1-1.7c0-3.5,0.6-6.9,1.8-10
		c-5.8-5.2-9.4-12.8-9.4-21.2c0-5.3,1.4-10.2,3.9-14.4c-3.9-1.8-6.6-5.8-6.6-10.4c0-6.3,5.1-11.5,11.5-11.5c5.5,0,10.1,3.9,11.2,9
		c2.7-0.9,5.7-1.4,8.7-1.4c2.7,0,5.4,0.4,7.9,1.1c3.7-1.8,7.9-2.8,12.3-2.8c15.8,0,28.6,12.8,28.6,28.6c0,1.7-0.2,3.4-0.4,5
		c11.1,4,19,14.5,19,27c0,15.8-12.8,28.6-28.6,28.6c-2.8,0-5.5-0.4-8.1-1.2c-1.4,0.9-3.1,1.4-4.8,1.4c-2.3,0-4.3-0.8-5.9-2.2
		c-3.7,1.8-7.9,2.8-12.3,2.8c-8.8,0-16.6-3.9-21.9-10.2C60.8,370.5,57.5,372.4,53.7,372.4z"/>
	<path class="cloud" fill="#E6E7E8" stroke="#E6E7E8" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M1530.2,369.3
		c0,6-4.9,10.9-10.9,10.9s-10.9-4.9-10.9-10.9c0-0.8,0.1-1.6,0.2-2.3c-0.5,0-1.1,0.1-1.7,0.1c-3.5,0-6.9-0.6-10-1.8
		c-5.2,5.8-12.8,9.4-21.2,9.4c-5.3,0-10.2-1.4-14.4-3.9c-1.8,3.9-5.8,6.6-10.4,6.6c-6.3,0-11.5-5.1-11.5-11.5c0-5.5,3.9-10.1,9-11.2
		c-0.9-2.7-1.4-5.7-1.4-8.7c0-2.7,0.4-5.4,1.1-7.9c-1.8-3.7-2.8-7.9-2.8-12.3c0-15.8,12.8-28.6,28.6-28.6c1.7,0,3.4,0.2,5,0.4
		c4-11.1,14.5-19,27-19c15.8,0,28.6,12.8,28.6,28.6c0,2.8-0.4,5.5-1.2,8.1c0.9,1.4,1.4,3.1,1.4,4.8c0,2.3-0.8,4.3-2.2,5.9
		c1.8,3.7,2.8,7.9,2.8,12.3c0,8.8-3.9,16.6-10.2,21.9C1528.4,362.2,1530.2,365.5,1530.2,369.3z"/>
	<path class="cloud" fill="#E6E7E8" stroke="#E6E7E8" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M327.6,121.3
		c4.3-4.3,11.2-4.3,15.5,0c4.3,4.3,4.3,11.2,0,15.5c-0.6,0.6-1.2,1.1-1.8,1.5c0.4,0.4,0.8,0.7,1.2,1.1c2.5,2.5,4.4,5.3,5.8,8.3
		c7.8-0.4,15.7,2.4,21.6,8.4c3.7,3.7,6.2,8.2,7.4,12.9c4.1-1.5,8.8-0.6,12.1,2.7c4.5,4.5,4.5,11.8,0,16.2c-3.9,3.9-9.9,4.4-14.3,1.5
		c-1.3,2.6-3.1,5-5.2,7.1c-1.9,1.9-4.1,3.5-6.4,4.8c-1.4,3.9-3.6,7.6-6.8,10.7c-11.2,11.2-29.3,11.2-40.5,0
		c-1.2-1.2-2.3-2.5-3.3-3.9c-10.6,5-23.7,3.1-32.5-5.7c-11.2-11.2-11.2-29.3,0-40.5c2-2,4.2-3.6,6.5-4.9c0.4-1.6,1.2-3.1,2.5-4.4
		c1.6-1.6,3.6-2.5,5.7-2.7c1.4-3.9,3.6-7.6,6.7-10.7c6.2-6.2,14.5-9,22.7-8.3C324,127.7,325,124,327.6,121.3z"/>
	<path class="cloud" fill="#E6E7E8" stroke="#E6E7E8" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M1151.4,56.4
		c4.3-4.3,11.2-4.3,15.5,0s4.3,11.2,0,15.5c-0.6,0.6-1.2,1.1-1.8,1.5c0.4,0.4,0.8,0.7,1.2,1.1c2.5,2.5,4.4,5.3,5.8,8.3
		c7.8-0.4,15.7,2.4,21.6,8.4c3.7,3.7,6.2,8.2,7.4,12.9c4.1-1.5,8.8-0.6,12.1,2.7c4.5,4.5,4.5,11.8,0,16.2c-3.9,3.9-9.9,4.4-14.3,1.5
		c-1.3,2.6-3.1,5-5.2,7.1c-1.9,1.9-4.1,3.5-6.4,4.8c-1.4,3.9-3.6,7.6-6.8,10.7c-11.2,11.2-29.3,11.2-40.5,0
		c-1.2-1.2-2.3-2.5-3.3-3.9c-10.6,5-23.7,3.1-32.5-5.7c-11.2-11.2-11.2-29.3,0-40.5c2-2,4.2-3.6,6.5-4.9c0.4-1.6,1.2-3.1,2.5-4.4
		c1.6-1.6,3.6-2.5,5.7-2.7c1.4-3.9,3.6-7.6,6.7-10.7c6.2-6.2,14.5-9,22.7-8.3C1147.7,62.7,1148.8,59,1151.4,56.4z"/>
	<path class="cloud" fill="#E6E7E8" stroke="#E6E7E8" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M631.1,145.1
		c0,6-4.9,10.9-10.9,10.9c-6,0-10.9-4.9-10.9-10.9c0-0.8,0.1-1.6,0.2-2.3c-0.5,0-1.1,0.1-1.7,0.1c-3.5,0-6.9-0.6-10-1.8
		c-5.2,5.8-12.8,9.4-21.2,9.4c-5.3,0-10.2-1.4-14.4-3.9c-1.8,3.9-5.8,6.6-10.4,6.6c-6.3,0-11.5-5.1-11.5-11.5c0-5.5,3.9-10.1,9-11.2
		c-0.9-2.7-1.4-5.7-1.4-8.7c0-2.7,0.4-5.4,1.1-7.9c-1.8-3.7-2.8-7.9-2.8-12.3c0-15.8,12.8-28.6,28.6-28.6c1.7,0,3.4,0.2,5,0.4
		c4-11.1,14.5-19,27-19c15.8,0,28.6,12.8,28.6,28.6c0,2.8-0.4,5.5-1.2,8.1c0.9,1.4,1.4,3.1,1.4,4.8c0,2.3-0.8,4.3-2.2,5.9
		c1.8,3.7,2.8,7.9,2.8,12.3c0,8.8-3.9,16.6-10.2,21.9C629.2,138,631.1,141.3,631.1,145.1z"/>
	<path class="cloud" fill="#E6E7E8" stroke="#E6E7E8" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M984.3,367.6
		c0,6-4.9,10.9-10.9,10.9c-6,0-10.9-4.9-10.9-10.9c0-0.8,0.1-1.6,0.2-2.3c-0.5,0-1.1,0.1-1.7,0.1c-3.5,0-6.9-0.6-10-1.8
		c-5.2,5.8-12.8,9.4-21.2,9.4c-5.3,0-10.2-1.4-14.4-3.9c-1.8,3.9-5.8,6.6-10.4,6.6c-6.3,0-11.5-5.1-11.5-11.5c0-5.5,3.9-10.1,9-11.2
		c-0.9-2.7-1.4-5.7-1.4-8.7c0-2.7,0.4-5.4,1.1-7.9c-1.8-3.7-2.8-7.9-2.8-12.3c0-15.8,12.8-28.6,28.6-28.6c1.7,0,3.4,0.2,5,0.4
		c4-11.1,14.5-19,27-19c15.8,0,28.6,12.8,28.6,28.6c0,2.8-0.4,5.5-1.2,8.1c0.9,1.4,1.4,3.1,1.4,4.8c0,2.3-0.8,4.3-2.2,5.9
		c1.8,3.7,2.8,7.9,2.8,12.3c0,8.8-3.9,16.6-10.2,21.9C982.4,360.6,984.3,363.9,984.3,367.6z"/>
</g>
<g id="buildings">
	<g id="bigtop">
		<polygon fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" points="769.8,133.4 727.7,166.6 
			812.3,166.6 		"/>
		
			<rect x="727.3" y="166.6" fill="#414042" stroke="#414042" stroke-width="0.25" stroke-miterlimit="10" width="85.5" height="12.2"/>
		<polygon fill="none" stroke="#414042" stroke-miterlimit="10" points="776.4,249.8 763.2,249.8 763.3,140 769.8,133.4 776.5,140 
					"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M728,178.1c0,0-19.3,37.5-54.8,71.7"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M811.6,178c0,0,34.3,64.8,65.1,79.7"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M807,178.8c0,0,26,59,51.2,78.9"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M801.2,178.8c0,0,12.8,45.8,39.2,76"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M794.2,178.8c9.1,48.3,33.4,76.4,40.5,80.9"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M784.7,178.8c9.1,48.3,29.1,80.9,36.1,85.5"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M779.8,178.8c1.2,30.4,15.9,77.6,38.7,89.6
			"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M732.7,178.8c0,0-26,59-51.2,78.9"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M738.4,178.8c0,0-12.8,45.8-39.2,76"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M745.5,178.8c-9.1,48.3-33.4,76.4-40.5,80.9"/>
		<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M753.8,176.8c-9.1,48.3-28,83-35,87.5"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M759.8,178.8
			c-1.2,30.4-15.9,77.6-38.7,89.6"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M763.2,178.8c0,0-2.9,65.6-22.8,82.6"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M776.4,178.8c0,0-0.6,79.6,25.7,93.3"/>
		
			<rect x="765.1" y="135.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 324.7033 -503.2758)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="148.9" transform="matrix(0.7071 0.7071 -0.7071 0.7071 333.9864 -499.4306)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="162" transform="matrix(0.7071 0.7071 -0.7071 0.7071 343.2695 -495.5854)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="175" transform="matrix(0.7071 0.7071 -0.7071 0.7071 352.4348 -491.789)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="188.1" transform="matrix(0.7071 0.7071 -0.7071 0.7071 361.7179 -487.9438)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="201.1" transform="matrix(0.7071 0.7071 -0.7071 0.7071 370.8896 -484.1448)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="214.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 380.1727 -480.2996)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		
			<rect x="765.1" y="227.3" transform="matrix(0.7071 0.7071 -0.7071 0.7071 389.4558 -476.4544)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M734.3,169c-0.8-0.8,24-21.7,35.5-35.3"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M769.8,133.4c0,0-24.5,33.7-28.9,34.5"/>
		<line fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" x1="763.2" y1="145.7" x2="748" y2="167.7"/>
		
			<line fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" x1="763.2" y1="151.7" x2="753.8" y2="174.4"/>
		<line fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" x1="763.2" y1="160.7" x2="759.3" y2="170"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M805.3,169c0.8-0.8-24-21.7-35.5-35.3"/>
		<path fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" d="M769.8,133.4c0,0,24.5,33.7,28.9,34.5"/>
		
			<line fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" x1="776.4" y1="145.7" x2="791.5" y2="167.7"/>
		
			<line fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" x1="776.5" y1="151.9" x2="785.5" y2="174.4"/>
		<line fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" x1="776.4" y1="160.7" x2="780.3" y2="170"/>
		
			<rect x="765.1" y="240.4" transform="matrix(0.7071 0.7071 -0.7071 0.7071 398.739 -472.6092)" fill="none" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="9.4" height="9.1"/>
	</g>
	<g id="clocktower">
		<rect x="895.6" y="136.8" fill="#414042" width="36.3" height="131"/>
		<rect x="903.9" y="148.9" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-miterlimit="10" width="4.4" height="16"/>
		<rect x="911.6" y="148.9" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-miterlimit="10" width="4.4" height="16"/>
		<rect x="919.7" y="148.9" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-miterlimit="10" width="4.4" height="16"/>
		<polygon fill="#414042" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" points="895.6,136.8 913.8,118.6 
			931.9,136.8 		"/>
		<circle fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-miterlimit="10" cx="913.8" cy="182.1" r="11.4"/>
	</g>
	<g id="bridge">
		<path fill="#414042" stroke="#414042" stroke-miterlimit="10" d="M221.8,246.2V418h-39.6V246.2h0V226c0-4.9,8.9-8.9,19.8-8.9
			c10.9,0,19.8,4,19.8,8.9L221.8,246.2L221.8,246.2z"/>
		<path fill="#414042" stroke="#414042" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M461.9,246.2
			l0.1,102.7c0-39.5,41.3-90.8,91.2-90.8c49.8,0,89.3,51.4,89.3,90.8l1.2-102.7H461.9z M485.9,282.2l-17.3,17.7v-39.6
			c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7V282.2z M508.1,265.6l-17.3,12.8v-18.1c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V265.6
			z M615.1,278.4l-17.3-12.8v-5.3c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V278.4z M637.3,299.9L620,282.2v-21.8
			c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7V299.9z"/>
		<path fill="#414042" stroke="#414042" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1.5,246.2
			l0.2,102.7c0-39.5,39.4-90.8,89.3-90.8c49.8,0,91.1,51.4,91.1,90.8l0-102.7H1.5z M24,282.2L6.7,299.9v-39.6c0-4.8,3.9-8.7,8.7-8.7
			c4.8,0,8.7,3.9,8.7,8.7V282.2z M46.2,265.6l-17.3,12.8v-18.1c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V265.6z M153.3,278.4
			l-17.3-12.8v-5.3c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7V278.4z M175.4,299.9l-17.3-17.7v-21.8c0-4.8,3.9-8.7,8.7-8.7
			c4.8,0,8.7,3.9,8.7,8.7V299.9z"/>
		<line fill="none" stroke="#414042" stroke-miterlimit="10" x1="221.8" y1="270.2" x2="221.8" y2="246.2"/>
		<line fill="none" stroke="#414042" stroke-miterlimit="10" x1="182.1" y1="289.7" x2="182.1" y2="246.2"/>
		<path fill="#414042" stroke="#414042" stroke-miterlimit="10" d="M461.8,226v192h-39.6V226c0-4.9,8.9-8.9,19.8-8.9
			S461.8,221,461.8,226z"/>
		<path fill="#414042" stroke="#414042" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M422.2,246.2
			H221.8l-0.1,125.5c0-43.3,46.9-99.7,101.6-99.7c54.7,0,99.1,56.4,99.1,99.7L422.2,246.2z M245.9,303.2l-17.3,19v-61.9
			c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V303.2z M267.9,283.9l-17.3,14.3v-37.9c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7V283.9
			z M289.7,272.3l-17.3,9.7v-21.6c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V272.3z M311.1,266l-17.3,6v-11.7c0-4.8,3.9-8.7,8.7-8.7
			s8.7,3.9,8.7,8.7V266z M351.2,272.1l-17.3-6v-5.7c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V272.1z M372.7,282l-17.3-9.7v-11.9
			c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V282z M394.4,298.2l-17.3-14.3v-23.6c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7V298.2z
			 M416.4,322.2l-17.3-19v-42.9c0-4.8,3.9-8.7,8.7-8.7s8.7,3.9,8.7,8.7V322.2z"/>
	</g>
	
		<rect x="1236.2" y="112.5" fill="#414042" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="10" height="103.3"/>
	<polygon fill="#414042" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" points="1605,245.9 
		1605,421.1 641.8,421.1 641.8,245.9 1156.2,245.9 1156.2,215.8 1212.8,215.8 1212.8,112.5 1222.8,112.5 1222.8,215.8 1263.9,215.8 
		1263.9,201.4 1302.3,201.4 1302.3,215.8 1330.6,215.8 1330.6,245.9 	"/>
	<g id="building">
		<polygon fill="#414042" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" points="
			1106.3,273.2 973.1,273.2 973.1,146.8 979.4,146.8 979.4,140.2 986.9,140.2 986.9,132.3 1106.3,132.3 		"/>
		
			<rect x="1003.9" y="121.3" fill="#414042" stroke="#414042" stroke-linejoin="round" stroke-miterlimit="10" width="89.2" height="14.3"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="993.6" y1="137.1" x2="1100.8" y2="137.1"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="987.2" y1="144.3" x2="1100.7" y2="144.3"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="151.1" x2="1100.8" y2="151.1"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="157.2" x2="1100.8" y2="157.2"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="163.3" x2="1100.8" y2="163.3"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="169.4" x2="1100.8" y2="169.4"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="175.5" x2="1100.8" y2="175.5"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="181.6" x2="1100.8" y2="181.6"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="187.6" x2="1100.8" y2="187.6"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="193.7" x2="1100.8" y2="193.7"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="199.8" x2="1100.8" y2="199.8"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="205.9" x2="1100.8" y2="205.9"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="212" x2="1100.8" y2="212"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="218.1" x2="1100.8" y2="218.1"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="224.2" x2="1100.8" y2="224.2"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="230.3" x2="1100.8" y2="230.3"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="236.4" x2="1100.8" y2="236.4"/>
		
			<line fill="none" stroke="#E6E7E8" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="980.4" y1="242.4" x2="1100.8" y2="242.4"/>
	</g>
	<g id="building1">
		
			<rect x="1391.3" y="170.1" fill="#414042" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="128.8" height="97.4"/>
		
			<rect x="1397.2" y="175.9" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="175.9" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="184" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="184" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="192.1" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="192.1" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="200.1" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="200.1" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="208.2" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="208.2" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="216.3" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="216.3" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="224.3" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="224.3" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1397.2" y="232.8" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
		
			<rect x="1460.6" y="232.8" fill="#E6E7E8" stroke="#414042" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" width="52.8" height="3.5"/>
	</g>
</g>
<g id="me">
	<path fill="#C49A6C" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M775.9,1708
		l68.3-30.5c-4.4-0.1,36.9-29.4,15.9-33.9c-21-4.5-43.5-46.5-43.5-46.5s-78.1-4.7-78.7-0.8c-1.3,8.7-9.8,26.4-22.6,39.7L775.9,1708z
		"/>
	<path fill="#C49A6C" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M720.3,1519.7
		c0,0-3.5-13.4-13-10c-9.5,3.3-4.5,32.2,2,33.5c6.5,1.3,8.5-6.7,8.5-6.7L720.3,1519.7z"/>
	
		<ellipse fill="#C49A6C" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" cx="779" cy="1537" rx="64" ry="82"/>
	<g>
		<path fill="#171617" d="M789,1519.6c0,0,0.2-0.6,0.8-1.5c0.3-0.4,0.6-1,1-1.6c0.4-0.6,0.9-1.3,1.5-1.9c0.6-0.7,1.3-1.4,2.1-2.1
			c0.4-0.4,0.8-0.7,1.3-1c0.4-0.3,0.9-0.6,1.5-0.9c1-0.6,2.2-1.1,3.4-1.5c0.6-0.2,1.3-0.3,1.9-0.5c0.7-0.1,1.4-0.1,2-0.2l1,0.1
			c0.3,0,0.5,0,0.9,0.1c0.7,0.1,1.5,0.3,2.1,0.5c1.2,0.4,2.4,0.9,3.4,1.5c0.5,0.3,1,0.6,1.5,0.9c0.5,0.3,0.9,0.7,1.3,1
			c0.8,0.7,1.5,1.4,2.1,2.1c0.6,0.7,1.1,1.3,1.5,1.9c0.4,0.6,0.8,1.1,1,1.6c0.5,0.9,0.8,1.5,0.8,1.5l-0.8,0.6c0,0-0.5-0.3-1.2-0.9
			c-0.4-0.3-0.9-0.6-1.4-1c-0.3-0.2-0.6-0.4-0.9-0.6c-0.3-0.2-0.6-0.4-1-0.7c-0.3-0.2-0.7-0.5-1.1-0.7c-0.4-0.2-0.8-0.5-1.2-0.7
			c-0.4-0.2-0.8-0.4-1.2-0.6c-0.4-0.2-0.8-0.4-1.3-0.6c-0.9-0.4-1.8-0.7-2.7-0.9c-0.5-0.1-0.8-0.1-1.2-0.2c-0.2,0-0.5,0-0.8-0.1
			l-0.4,0l-0.2,0l-0.1,0l-0.1,0l0,0l0,0c0.1,0-0.2,0,0.1,0c-0.5,0-0.9,0-1.4,0.1c-0.5,0.1-0.9,0.1-1.4,0.3c-0.9,0.2-1.8,0.5-2.7,0.9
			c-0.4,0.2-0.9,0.4-1.3,0.6c-0.4,0.2-0.8,0.4-1.2,0.6c-0.4,0.2-0.8,0.4-1.2,0.7c-0.4,0.2-0.7,0.4-1.1,0.7c-0.3,0.2-0.7,0.4-1,0.7
			c-0.3,0.2-0.6,0.4-0.9,0.6c-0.6,0.4-1,0.8-1.4,1c-0.8,0.6-1.3,0.9-1.3,0.9L789,1519.6z"/>
	</g>
	<g>
		<path fill="#171617" d="M731.9,1519.6c0,0,0.2-0.6,0.8-1.5c0.3-0.4,0.6-1,1-1.6c0.4-0.6,0.9-1.3,1.5-1.9c0.6-0.7,1.3-1.4,2.1-2.1
			c0.4-0.4,0.8-0.7,1.3-1c0.4-0.3,0.9-0.6,1.5-0.9c1-0.6,2.2-1.1,3.4-1.5c0.6-0.2,1.3-0.3,1.9-0.5c0.7-0.1,1.4-0.1,2-0.2l1,0.1
			c0.3,0,0.5,0,0.9,0.1c0.7,0.1,1.5,0.3,2.1,0.5c1.2,0.4,2.4,0.9,3.4,1.5c0.5,0.3,1,0.6,1.5,0.9c0.5,0.3,0.9,0.7,1.3,1
			c0.8,0.7,1.5,1.4,2.1,2.1c0.6,0.7,1.1,1.3,1.5,1.9c0.4,0.6,0.8,1.1,1,1.6c0.5,0.9,0.8,1.5,0.8,1.5l-0.8,0.6c0,0-0.5-0.3-1.2-0.9
			c-0.4-0.3-0.9-0.6-1.4-1c-0.3-0.2-0.6-0.4-0.9-0.6c-0.3-0.2-0.6-0.4-1-0.7c-0.3-0.2-0.7-0.5-1.1-0.7c-0.4-0.2-0.8-0.5-1.2-0.7
			c-0.4-0.2-0.8-0.4-1.2-0.6c-0.4-0.2-0.8-0.4-1.3-0.6c-0.9-0.4-1.8-0.7-2.7-0.9c-0.5-0.1-0.8-0.1-1.2-0.2c-0.2,0-0.5,0-0.8-0.1
			l-0.4,0l-0.2,0l-0.1,0l-0.1,0l0,0l0,0c0.1,0-0.2,0,0.1,0c-0.5,0-0.9,0-1.4,0.1c-0.5,0.1-0.9,0.1-1.4,0.3c-0.9,0.2-1.8,0.5-2.7,0.9
			c-0.4,0.2-0.9,0.4-1.3,0.6c-0.4,0.2-0.8,0.4-1.2,0.6c-0.4,0.2-0.8,0.4-1.2,0.7c-0.4,0.2-0.7,0.4-1.1,0.7c-0.3,0.2-0.7,0.4-1,0.7
			c-0.3,0.2-0.6,0.4-0.9,0.6c-0.6,0.4-1,0.8-1.4,1c-0.8,0.6-1.3,0.9-1.3,0.9L731.9,1519.6z"/>
	</g>
	<g>
		<path fill="#603913" d="M789.7,1502.8c0,0,0.1-0.1,0.2-0.3c0.2-0.2,0.4-0.5,0.7-0.8c0.3-0.3,0.7-0.7,1.2-1.1
			c0.5-0.4,1-0.8,1.7-1.3c0.6-0.4,1.4-0.9,2.2-1.3c0.8-0.4,1.7-0.8,2.6-1.1c0.9-0.3,1.9-0.6,3-0.7c0.5-0.1,1-0.1,1.6-0.2l1.6-0.1
			l0.1,0l0.1,0l0.1,0l0.2,0l0.4,0l0.7,0c0.5,0,1.1,0.1,1.6,0.2c1.1,0.2,2,0.4,3,0.7c1.9,0.6,3.5,1.5,4.8,2.3
			c0.6,0.4,1.2,0.9,1.7,1.3c0.5,0.4,0.9,0.8,1.2,1.1c0.3,0.3,0.5,0.6,0.7,0.8c0.1,0.2,0.2,0.3,0.2,0.3l-0.6,0.8c0,0-0.4-0.2-1.2-0.4
			c-0.8-0.3-1.9-0.7-3.2-1c-1.3-0.4-2.9-0.8-4.5-1c-0.8-0.1-1.7-0.2-2.5-0.3c-0.4,0-0.8-0.1-1.2-0.1l-0.7,0l-0.4,0l-0.2,0l0,0
			c-0.1,0,0.1,0,0.1,0l0,0l0,0l-0.1,0l-1.3,0c-0.4,0-0.9,0.1-1.3,0.1c-0.4,0.1-0.9,0.1-1.3,0.1c-0.4,0.1-0.8,0.1-1.2,0.2
			c-0.4,0.1-0.8,0.2-1.2,0.2c-0.4,0.1-0.8,0.2-1.2,0.3c-0.8,0.2-1.5,0.4-2.1,0.6c-0.7,0.2-1.3,0.4-1.8,0.5c-0.6,0.2-1,0.3-1.4,0.5
			c-0.8,0.3-1.3,0.4-1.3,0.4L789.7,1502.8z"/>
	</g>
	<g>
		<path fill="#603913" d="M731.7,1502.8c0,0,0.1-0.1,0.2-0.3c0.2-0.2,0.4-0.5,0.7-0.8c0.3-0.3,0.7-0.7,1.2-1.1
			c0.5-0.4,1-0.8,1.7-1.3c0.6-0.4,1.4-0.9,2.2-1.3c0.8-0.4,1.7-0.8,2.6-1.1c0.9-0.3,1.9-0.6,3-0.7c0.5-0.1,1-0.1,1.6-0.2l1.6-0.1
			l0.1,0l0.1,0l0.1,0l0.2,0l0.4,0l0.7,0c0.5,0,1.1,0.1,1.6,0.2c1.1,0.2,2,0.4,3,0.7c1.9,0.6,3.5,1.5,4.8,2.3
			c0.6,0.4,1.2,0.9,1.7,1.3c0.5,0.4,0.9,0.8,1.2,1.1c0.3,0.3,0.5,0.6,0.7,0.8c0.1,0.2,0.2,0.3,0.2,0.3l-0.6,0.8c0,0-0.4-0.2-1.2-0.4
			c-0.8-0.3-1.9-0.7-3.2-1c-1.3-0.4-2.9-0.8-4.5-1c-0.8-0.1-1.7-0.2-2.5-0.3c-0.4,0-0.8-0.1-1.2-0.1l-0.7,0l-0.4,0l-0.2,0l0,0
			c-0.1,0,0.1,0,0.1,0l0,0l0,0l-0.1,0l-1.3,0c-0.4,0-0.9,0.1-1.3,0.1c-0.4,0.1-0.9,0.1-1.3,0.1c-0.4,0.1-0.8,0.1-1.2,0.2
			c-0.4,0.1-0.8,0.2-1.2,0.2c-0.4,0.1-0.8,0.2-1.2,0.3c-0.8,0.2-1.5,0.4-2.1,0.6c-0.7,0.2-1.3,0.4-1.8,0.5c-0.6,0.2-1,0.3-1.4,0.5
			c-0.8,0.3-1.3,0.4-1.3,0.4L731.7,1502.8z"/>
	</g>
	<path fill="none" stroke="#846448" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M778,1503.6
		c0,0-3.7,27.8,10.2,45.3l-17.2,3.5"/>
	<path fill="#C49A6C" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M838,1519.7
		c0,0,3.5-13.4,13-10c9.5,3.3,4.5,32.2-2,33.5c-6.5,1.3-8.5-6.7-8.5-6.7L838,1519.7z"/>
	<path fill="#82644A" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M717.5,1513.5
		l2.6,3.3c0,0,6.8-36.7,23.9-35.3s19.9,1.5,32.1,1.5s33.9,0.3,38.8-5.5s22.9,36.8,22.9,36.8l2.8-0.8c0,0-2.5-16-9-25.3
		s-20.5-34.5-55.6-34.1c-16.7,0.2-34.3,12.1-44.4,26.1C720.4,1495.7,717.5,1513.5,717.5,1513.5z"/>
	<path fill="#7A441C" stroke="#7A441C" stroke-miterlimit="10" d="M827,1592.8c-23.8,23.8-26.8,84.3-26.8,84.3
		c-56.9-15.4-69.7-84.7-69.7-84.7s-1.6-24.3,7-33.7c7.3-8,23.2-1.5,40.8-1.2c16.2,0.2,31-9.4,38.6-2.2
		C827.2,1565.1,827,1592.8,827,1592.8z"/>
	<path fill="#E6E7E8" stroke="#C2996B" stroke-width="1.5" stroke-miterlimit="10" d="M810.7,1564c0,5.3-14.3,24.7-32.8,24.7
		c-18.3,0-33.2-21.6-31.3-26.1c2-4.7,20.7,6.1,31.3,7.3C789.8,1571.2,810.7,1558.6,810.7,1564z"/>
	<path fill="#1C75BC" stroke="#2A3E98" stroke-linejoin="round" stroke-miterlimit="10" d="M904,1922.5c0,0-16.7-93-8.3-142
		c2.8-16.7,66.6,3.6,66.7-10.4c0.2-18.8,8.1-75.4-13.5-108c-18.2-27.5-24.8-27.9-69.7-23.2c-7.2,0.8-42.6-11.6-40.8-9.8
		c5.8,5.8-35.3,24.5-35.3,24.5l-26,34.2l-17-28.7c0,0-49.6-17.6-43.8-23.3c1.8-1.8-25.1,9.4-32.3,8.7c-44.9-4.7-51.6-4.3-69.7,23.2
		c-21.6,32.6-13.7,89.2-13.5,108c0.1,14,63.9-6.3,66.7,10.4c8.3,49-8.3,142-8.3,142L904,1922.5z"/>
	<path fill="#C49A6C" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M962.3,1777.5
		c0,0-0.9,33.1-2.3,37.7s-118.7,144.7-118.7,144.7l-49.7-49.7c0,0,108.6-87.2,111-92.7c1-2.4-2.9-9.1-4.9-17.1
		c-2.6-10.6-3.4-22.6-3.4-22.6s5.3,10.3,35.6,10.7S962.3,1777.5,962.3,1777.5z"/>
	<path fill="#1C75BC" stroke="#2A3E98" stroke-linejoin="round" stroke-miterlimit="10" d="M962.4,1770.1c0,0,8.6,17.4-32.4,18.4
		s-38-18-38-18l8-58"/> 
	<path fill="#1C75BC" stroke="#2A3E98" stroke-linejoin="round" stroke-miterlimit="10" d="M803,1653.5l24.5,26
		c0,0,24.3-44.5,8.2-54.3l-15.5-22.2c9.7,2.1,14.8,10.5,11.5,24C828.2,1640.6,811.7,1651.8,803,1653.5c-2.1,0.4-33.5,19-34,80.5"/>
	<path fill="#C49A6C" stroke="#C49A6C" stroke-width="0.25" stroke-linejoin="round" stroke-miterlimit="10" d="M600.7,1783
		c0,0,0.9,33.1,2.3,37.7s118.7,144.7,118.7,144.7l49.7-49.7c0,0-108.6-87.2-111-92.7c-1-2.4,2.9-9.1,4.9-17.1
		c2.6-10.6,3.4-22.6,3.4-22.6s-5.3,10.3-35.6,10.7S600.7,1783,600.7,1783z"/> 
	<path fill="#1C75BC" stroke="#2A3E98" stroke-linejoin="round" stroke-miterlimit="10" d="M600.6,1775.6c0,0-8.6,17.4,32.4,18.4
		s38-18,38-18l-8-58"/>
	<path fill="#1C75BC" stroke="#2A3E98" stroke-linejoin="round" stroke-miterlimit="10" d="M760,1659l-24.5,26
		c0,0-31.7-45.1-15.6-54.8l15.5-22.2c-9.7,2.1-14.8,10.5-11.5,24S751.3,1657.3,760,1659c2.1,0.4,14.1,13.4,17.5,32.5"/>
</g>
</svg>
  </div>
  
</div><!-- End of Container -->
              
            
!

CSS

              
                /* Chrome fix */
svg {
  display: block;
  height: 1%;
}
.container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.cloud {
	position:absolute;
}

              
            
!

JS

              
                
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


function draw() {
  var cloud = $('.cloud');
  var window_height = window.innerHeight;
  var window_width = window.innerWidth;
  
  $(cloud).each(function(){
	  var this_position = $(this).position();
	  	  
	  TweenLite.to(this, 2, {x:"+=20"});
	  
    if (this_position.left > window_width){
		 TweenLite.to(this, 0, {x:'-=1750'});
	  }
  });
  requestAnimFrame(draw);
}


//Run the function on load
$(window).load(function() {

draw(); 

});  // End Load Function





              
            
!
999px

Console