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 id="wrapper">
  <svg version="1.1" id="clock-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g class="clock">
	<g>
		<g>
			<path fill="#7A7A7A" d="M99.7,120.9c-0.4,0-0.9-0.2-1.2-0.6c-2.7-3.3-4-7.5-3.5-11.8s2.5-8.1,5.8-10.8c2.9-2.3,6.5-3.6,10.1-3.6
				c4.9,0,9.4,2.2,12.5,5.9c0.5,0.6,0.4,1.6-0.2,2.1l-22.6,18.4C100.4,120.8,100,120.9,99.7,120.9z"/>
			<path fill="#231F20" d="M111,95.7c4.2,0,8.4,1.8,11.3,5.4l-22.6,18.4c-5.1-6.2-4.1-15.4,2.1-20.5C104.5,96.8,107.7,95.7,111,95.7
				 M111,92.7c-4,0-8,1.4-11.1,3.9c-7.5,6.1-8.6,17.2-2.5,24.7c0.5,0.6,1.2,1,2,1.1c0.1,0,0.2,0,0.3,0c0.7,0,1.4-0.2,1.9-0.7
				l22.6-18.4c1.3-1,1.5-2.9,0.4-4.2C121.2,95,116.3,92.7,111,92.7L111,92.7z"/>
		</g>
		<path opacity="0.2" fill="#FFFFFF" d="M99.1,103.3c5.8-4.7,14.1-4.2,19.3,0.9l3.9-3.2c-5.1-6.2-14.2-7.2-20.5-2.1
			c-2,1.6-3.4,3.7-4.3,5.9C98,104.3,98.5,103.8,99.1,103.3z"/>
		
			<path fill="#CCCCCC" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M119.5,114.6l-6.2,5c-0.4,0.3-1.1,0.3-1.4-0.1l-3.1-3.9c-0.3-0.4-0.3-1.1,0.1-1.4l6.2-5c0.4-0.3,1.1-0.3,1.4,0.1l3.1,3.9
			C120,113.6,120,114.2,119.5,114.6z"/>
	</g>
	<g>
		<g>
			<path fill="#7A7A7A" d="M200.3,120.9c-0.3,0-0.7-0.1-0.9-0.3l-22.6-18.4c-0.3-0.3-0.5-0.6-0.5-1s0.1-0.8,0.3-1.1
				c3.1-3.8,7.6-5.9,12.5-5.9c3.7,0,7.3,1.3,10.1,3.6c3.3,2.7,5.4,6.5,5.8,10.8c0.4,4.3-0.8,8.4-3.5,11.8
				C201.2,120.7,200.7,120.9,200.3,120.9z"/>
			<path fill="#231F20" d="M189,95.7c3.2,0,6.5,1.1,9.2,3.3c6.2,5.1,7.2,14.2,2.1,20.5L177.7,101C180.6,97.5,184.8,95.7,189,95.7
				 M189,92.7L189,92.7c-5.3,0-10.3,2.4-13.6,6.5c-1,1.3-0.9,3.2,0.4,4.2l22.6,18.4c0.5,0.4,1.2,0.7,1.9,0.7c0.1,0,0.2,0,0.3,0
				c0.8-0.1,1.5-0.5,2-1.1c6.1-7.5,5-18.6-2.5-24.7C197,94.1,193,92.7,189,92.7L189,92.7z"/>
		</g>
		<g opacity="0.2">
			<path fill="#FFFFFF" d="M198.2,99c-3.3-2.7-7.3-3.7-11.2-3.1c2.5,0.4,5,1.4,7.2,3.1c5.5,4.5,6.9,12.3,3.5,18.3l2.6,2.1
				C205.4,113.2,204.4,104,198.2,99z"/>
		</g>
		
			<path fill="#CCCCCC" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M185,109.1l6.1,5.1c0.4,0.4,0.5,1,0.1,1.4l-3.2,3.8c-0.4,0.4-1,0.5-1.4,0.1l-6.1-5.1c-0.4-0.4-0.5-1-0.1-1.4l3.2-3.8
			C183.9,108.8,184.5,108.8,185,109.1z"/>
	</g>
	
		<circle fill="#3793EF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="150" cy="156" r="53.3"/>
	<g>
		<path fill="#FFFFFF" d="M150,200.6c-24.6,0-44.6-20-44.6-44.6c0-24.6,20-44.6,44.6-44.6s44.6,20,44.6,44.6
			C194.6,180.6,174.6,200.6,150,200.6z"/>
		<path fill="#231F20" d="M150,113c23.8,0,43.1,19.3,43.1,43.1c0,23.8-19.3,43.1-43.1,43.1s-43.1-19.3-43.1-43.1
			C106.9,132.2,126.2,113,150,113 M150,110c-25.4,0-46.1,20.7-46.1,46.1s20.7,46.1,46.1,46.1s46.1-20.7,46.1-46.1S175.4,110,150,110
			L150,110z"/>
	</g>
	
		<polyline fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		150,132.8 150,156 163.3,156 	"/>
	
		<circle fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="150" cy="120.6" r="1.1"/>
	
		<circle fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="150" cy="191.5" r="1.1"/>
	
		<circle fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="114.5" cy="156" r="1.1"/>
	
		<line fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="115.7" y1="196.8" x2="106" y2="209.3"/>
	
		<line fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="184" y1="197.1" x2="194" y2="209.3"/>
	
		<line fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="150" y1="102.7" x2="150" y2="96.2"/>
	<path fill="#F4F4F4" d="M172,119c9.5,7.9,15.6,19.8,15.6,33.1c0,23.8-19.3,43.1-43.1,43.1c-8,0-15.5-2.2-22-6
		c7.5,6.2,17,9.9,27.5,9.9c23.8,0,43.1-19.3,43.1-43.1C193.1,140.3,184.6,126.5,172,119z"/>
	
		<circle fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="185.5" cy="156" r="1.1"/>
	
		<path fill="#3793EF" stroke="#231F20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M155,95.7h-10c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h10c0.6,0,1,0.4,1,1v4C156,95.2,155.5,95.7,155,95.7z"/>
</g>
</svg>


<svg version="1.1" id="mini-van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g id="cloud" opacity="1">
	<path class="cloud-2" fill="#FFFFFF" d="M-46,57.1C-46,57.1-46,57.1-46,57.1c0-3.8-3.9-6.9-8.6-6.9c0,0,0,0,0,0c0-0.1,0-0.1,0-0.2
		c0-4.4-5.3-8-11.8-8c-5.5,0-10.2,2.6-11.4,6c-2.6-1-5.7-1.6-9-1.6c-8.1,0-14.9,3.5-17.1,8.2c-1.3-0.4-2.7-0.6-4.2-0.6
		c-7,0-12.7,4.4-12.7,9.9c0,4.9,4.6,9,10.6,9.7c-0.4,1-0.6,2-0.6,3c0,6.2,6.8,11.1,15.3,11.1c5.2,0,9.8-1.9,12.6-4.8
		c3.1,2.9,9,4.8,15.9,4.8c7.3,0,13.6-2.2,16.5-5.5c0.7,0.1,1.4,0.1,2.2,0.1c8.5,0,15.4-5.8,15.4-12.9C-33,63.4-38.6,58.1-46,57.1z"
		/>
	<path class="cloud-1" fill="#FFFFFF" d="M-116.6,29.1C-116.6,29.1-116.6,29.1-116.6,29.1c0-2.8-3-5-6.7-5c-0.5,0-0.9,0-1.4,0.1
		c-1.6-2.3-5.5-3.9-10.1-3.9c-5.9,0-10.7,2.7-10.9,6c-4.3,1.2-7.3,3.8-7.3,6.7c0,4.1,5.7,7.4,12.8,7.4c1.3,0,2.5-0.1,3.6-0.3
		c1.8,1.2,4.5,1.9,7.5,1.9c5.2,0,9.5-2.2,9.8-5.1c0.6,0.2,1.2,0.3,1.8,0.3c2.9,0,5.2-1.9,5.2-4.1C-112.2,31.1-114.1,29.4-116.6,29.1
		z"/>
</g>
<g class="car-body">
	<g id="XMLID_1_">
		<g>
			<path fill="#F0C500" d="M249.8,143v30.4c0,5.7-4.6,10.3-10.3,10.3h-6.3c0-2.2-0.3-4.4-1-6.4c-2.8-9.1-11.2-15.7-21.2-15.7
				c-10,0-18.4,6.6-21.2,15.7c-0.6,2-1,4.2-1,6.4h-71.4c0-2.2-0.3-4.4-1-6.4c-2.8-9.1-11.2-15.7-21.2-15.7s-18.4,6.6-21.2,15.7
				c-0.6,2-1,4.2-1,6.4h-6.8c-5.7,0-10.3-4.6-10.3-10.3v-6.9v-15.6V143H249.8z"/>
			<path fill="#FFFFFF" d="M249.8,133.7v9.3H56v-9.3l13.7-29c0,0,3.3-5.6,10.1-5.6c3.9,0,141.7,0,150.6,0c9,0,11.5,5.7,11.5,5.7
				L249.8,133.7z M240,128.5l-3.9-14.8c0,0-1.8-5.2-7.7-5.2H212c-2.8,0-5.2,2.3-5.2,5.2v14.8c0,2.8,2.3,5.2,5.2,5.2h22.9
				C237.7,133.7,240,131.4,240,128.5z M197.6,128.5v-14.8c0-2.8-2.3-5.2-5.2-5.2h-21.6c-2.8,0-5.2,2.3-5.2,5.2v14.8
				c0,2.8,2.3,5.2,5.2,5.2h21.6C195.3,133.7,197.6,131.4,197.6,128.5z M153.9,128.5v-14.8c0-2.8-2.3-5.2-5.2-5.2h-22.9
				c-2.8,0-5.2,2.3-5.2,5.2v14.8c0,2.8,2.3,5.2,5.2,5.2h22.9C151.5,133.7,153.9,131.4,153.9,128.5z M109.8,128.5v-14.8
				c0-2.8-2.3-5.2-5.2-5.2H86.3c-2.8,0-8.1,0-10.3,5.2l-7.7,16.8c0,0-1.5,3.2,1.3,3.2h35C107.5,133.7,109.8,131.4,109.8,128.5z"/>
			<path fill="#F4F4F4" d="M236.1,113.7l3.9,14.8c0,2.8-2.3,5.2-5.2,5.2H212c-2.8,0-5.2-2.3-5.2-5.2v-14.8c0-2.8,2.3-5.2,5.2-5.2
				h16.4C234.3,108.5,236.1,113.7,236.1,113.7z"/>
			<path fill="#AFAFAF" d="M232.2,177.3h-42.4c2.8-9.1,11.2-15.7,21.2-15.7C221,161.6,229.4,168.2,232.2,177.3z"/>
			<path fill="#F4F4F4" d="M197.6,113.7v14.8c0,2.8-2.3,5.2-5.2,5.2h-21.6c-2.8,0-5.2-2.3-5.2-5.2v-14.8c0-2.8,2.3-5.2,5.2-5.2h21.6
				C195.3,108.5,197.6,110.9,197.6,113.7z"/>
			<path fill="#F4F4F4" d="M153.9,113.7v14.8c0,2.8-2.3,5.2-5.2,5.2h-22.9c-2.8,0-5.2-2.3-5.2-5.2v-14.8c0-2.8,2.3-5.2,5.2-5.2h22.9
				C151.5,108.5,153.9,110.9,153.9,113.7z"/>
			<path fill="#AFAFAF" d="M116.5,177.3H74.1c2.8-9.1,11.2-15.7,21.2-15.7S113.7,168.2,116.5,177.3z"/>
			<path fill="#F4F4F4" d="M109.8,113.7v14.8c0,2.8-2.3,5.2-5.2,5.2h-35c-2.8,0-1.3-3.2-1.3-3.2l7.7-16.8c2.3-5.2,7.5-5.2,10.3-5.2
				h18.3C107.5,108.5,109.8,110.9,109.8,113.7z"/>
			<path fill="#FFFFFF" d="M56,150.9v15.6h-4.5c-0.7,0-1.3-0.6-1.3-1.3v-13c0-0.7,0.6-1.3,1.3-1.3H56z"/>
		</g>
		<g>
			<path fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M56,166.5v6.9c0,5.7,4.6,10.3,10.3,10.3h6.8c0-2.2,0.3-4.4,1-6.4c2.8-9.1,11.2-15.7,21.2-15.7s18.4,6.6,21.2,15.7
				c0.6,2,1,4.2,1,6.4h71.4c0-2.2,0.3-4.4,1-6.4c2.8-9.1,11.2-15.7,21.2-15.7c10,0,18.4,6.6,21.2,15.7c0.6,2,1,4.2,1,6.4h6.3
				c5.7,0,10.3-4.6,10.3-10.3V143v-9.3l-7.7-28.9c0,0-2.5-5.7-11.5-5.7c-9,0-146.7,0-150.6,0c-6.9,0-10.1,5.6-10.1,5.6l-13.7,29v9.3
				v7.9"/>
			<path fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M69.6,133.7h35c2.8,0,5.2-2.3,5.2-5.2v-14.8c0-2.8-2.3-5.2-5.2-5.2H86.3c-2.8,0-8.1,0-10.3,5.2l-7.7,16.8
				C68.3,130.5,66.7,133.7,69.6,133.7z"/>
			<path fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M148.7,133.7h-22.9c-2.8,0-5.2-2.3-5.2-5.2v-14.8c0-2.8,2.3-5.2,5.2-5.2h22.9c2.8,0,5.2,2.3,5.2,5.2v14.8
				C153.9,131.4,151.5,133.7,148.7,133.7z"/>
			<path fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M192.4,133.7h-21.6c-2.8,0-5.2-2.3-5.2-5.2v-14.8c0-2.8,2.3-5.2,5.2-5.2h21.6c2.8,0,5.2,2.3,5.2,5.2v14.8
				C197.6,131.4,195.3,133.7,192.4,133.7z"/>
			<path fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M234.9,133.7H212c-2.8,0-5.2-2.3-5.2-5.2v-14.8c0-2.8,2.3-5.2,5.2-5.2h16.4c5.9,0,7.7,5.2,7.7,5.2l3.9,14.8
				C240,131.4,237.7,133.7,234.9,133.7z"/>
			
				<line fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="56" y1="143" x2="249.8" y2="143"/>
			
				<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="74.1" y1="177.3" x2="116.5" y2="177.3"/>
			
				<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="189.8" y1="177.3" x2="232.2" y2="177.3"/>
			<path fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M56,150.9h-4.5c-0.7,0-1.3,0.6-1.3,1.3v13c0,0.7,0.6,1.3,1.3,1.3H56V150.9z"/>
			
				<line fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="241.3" y1="150.9" x2="232.1" y2="150.9"/>
			
				<line fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="241.3" y1="154.5" x2="232.1" y2="154.5"/>
			
				<line fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="241.3" y1="158" x2="232.1" y2="158"/>
		</g>
	</g>
	<g opacity="0.2">
		<path fill="#333333" d="M59,180.7c1.9,1.9,4.5,3.1,7.4,3.1h6.8c0-1.1,0.1-2.1,0.2-3.2L59,180.7z"/>
		<path fill="#333333" d="M188.9,183.8c0-2.2,0.3-4.4,1-6.4c2.8-9.1,11.2-15.7,21.2-15.7c0,0-10.5-0.6-17.6,6c-7.1,6.7-10,8-11.7,11
			c-1.8,3.1-64.4,1.7-64.4,1.7h0c0.2,1.1,0.3,2.2,0.3,3.4H188.9z"/>
		<path fill="#333333" d="M230.5,99.1c-0.4,0-8.1,0-9,0c3.9,1.5,7.2,0.7,10.6,2.8s6.3,6.6,9.1,13.1c0.1,1.3,4,20,4,21.6
			c0,1.6,1.3,27.6,0,31.1c-1.3,3.4-0.9,4.5-4,5.9c-3.1,1.4-10.5,0.3-10.5,0.3l0,0c0.6,1.1,1,2.3,1.4,3.5c0.6,2,1,4.2,1,6.4h6.3
			c5.7,0,10.3-4.6,10.3-10.3V143v-9.3l-7.7-28.9C242,104.8,239.5,99.1,230.5,99.1z"/>
	</g>
</g>
<g class="wheel">
	
		<circle fill="#424242" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="95.3" cy="183.8" r="16.1"/>
	<path fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M102.5,193.5c-1.2,0.9-2.7,1.6-4.2,2c-0.9,0.2-1.9,0.4-3,0.4"/>
	<path fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M105.8,177.8c1,1.7,1.5,3.8,1.5,5.9c0,1.9-0.4,3.7-1.2,5.3"/>
	<path fill="none" stroke="#757575" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M83.2,183.8c0-1.3,0.2-2.6,0.6-3.8c0.9-2.7,2.7-4.9,5-6.4"/>
	<path fill="none" stroke="#757575" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M93,171.9c0.7-0.1,1.5-0.2,2.3-0.2"/>
	<circle fill="#EBEBEB" stroke="#333333" stroke-width="1.8" stroke-miterlimit="10" cx="95.3" cy="183.8" r="6.4"/>
</g>
<g class="wheel">
	
		<circle fill="#424242" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="211" cy="183.8" r="16.1"/>
	<path fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M218.2,193.5c-1.2,0.9-2.7,1.6-4.2,2c-0.9,0.2-1.9,0.4-3,0.4"/>
	<path fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M221.5,177.8c1,1.7,1.5,3.8,1.5,5.9c0,1.9-0.4,3.7-1.2,5.3"/>
	<path fill="none" stroke="#757575" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M198.9,183.8c0-1.3,0.2-2.6,0.6-3.8c0.9-2.7,2.7-4.9,5-6.4"/>
	<path fill="none" stroke="#757575" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M208.7,171.9c0.7-0.1,1.5-0.2,2.3-0.2"/>
	<circle fill="#EBEBEB" stroke="#333333" stroke-width="1.8" stroke-miterlimit="10" cx="211" cy="183.8" r="6.4"/>
</g>
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="32.3" y1="199.9" x2="267.7" y2="199.9"/>
</svg>

  <svg version="1.1" id="records-player" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
	<g class="body">
		
			<path fill="#5E616D" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M214.7,212.4H85.3c-4.4,0-8-3.6-8-8V95.6c0-4.4,3.6-8,8-8h129.3c4.4,0,8,3.6,8,8v108.7C222.7,208.8,219.1,212.4,214.7,212.4z"/>
		
			<circle fill="#B6BBCE" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="90.8" cy="199" r="5"/>
		
			<line fill="#333333" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="210.2" y1="199" x2="184.6" y2="199"/>
		<g>
			<path fill="#B6BBCE" d="M195.5,204.4c-1.7,0-3.1-1.4-3.1-3.1v-4.6c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1v4.6
				C198.7,203,197.3,204.4,195.5,204.4z"/>
			<g>
				<path fill="#333333" d="M195.5,194.5c1.2,0,2.2,1,2.2,2.2v4.6c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2v-4.6
					C193.3,195.4,194.3,194.5,195.5,194.5 M195.5,192.7c-2.2,0-4,1.8-4,4v4.6c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4v-4.6
					C199.6,194.4,197.8,192.7,195.5,192.7L195.5,192.7z"/>
			</g>
		</g>
		<circle opacity="0.2" cx="146.9" cy="153.4" r="50"/>
	</g>
	<g class="disc">
		<circle fill="#EBEBEB" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="143.2" cy="150.2" r="50"/>
		<g opacity="0.6">
			<path fill="#FFFFFF" d="M143.2,104.6c25.2,0,45.6,20.5,45.6,45.6s-20.5,45.6-45.6,45.6s-45.6-20.5-45.6-45.6
				S118,104.6,143.2,104.6 M143.2,101.6c-26.9,0-48.6,21.8-48.6,48.6s21.8,48.6,48.6,48.6s48.6-21.8,48.6-48.6
				S170,101.6,143.2,101.6L143.2,101.6z"/>
		</g>
		<circle fill="#FF6666" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="143.2" cy="150.2" r="16.7"/>
		<circle fill="#EBEBEB" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="143.2" cy="150.2" r="4.2"/>
		
			<path fill="#EBEBEB" stroke="#999999" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M169.7,182.4c-7.2,5.9-16.4,9.5-26.5,9.5c-10.1,0-19.3-3.6-26.5-9.5"/>
		
			<path fill="#EBEBEB" stroke="#999999" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M116.7,118.1c7.2-5.9,16.4-9.5,26.5-9.5c10.1,0,19.3,3.6,26.5,9.5"/>
		
			<path fill="#EBEBEB" stroke="#999999" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M164.4,175.9c-5.8,4.8-13.1,7.6-21.2,7.6c-8.1,0-15.4-2.9-21.2-7.6"/>
		
			<path fill="#EBEBEB" stroke="#999999" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M122,124.5c5.8-4.8,13.1-7.6,21.2-7.6c8.1,0,15.4,2.9,21.2,7.6"/>
		
			<path fill="#EBEBEB" stroke="#999999" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M159.1,169.5c-4.3,3.6-9.9,5.7-15.9,5.7c-6,0-11.6-2.1-15.9-5.7"/>
		
			<path fill="#EBEBEB" stroke="#999999" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M127.3,130.9c4.3-3.6,9.9-5.7,15.9-5.7c6,0,11.6,2.1,15.9,5.7"/>
	</g>
	<g class="tonearm">
		
			<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="207.2" y1="101.5" x2="207.2" y2="152.4"/>
		
			<path fill="#333333" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M209.2,163.4h-4c-0.6,0-1-0.4-1-1v-10c0-0.5,0.4-1,1-1h4c0.6,0,1,0.5,1,1v10C210.2,162.9,209.7,163.4,209.2,163.4z"/>
	</g>
	
		<circle fill="#B6BBCE" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="207.2" cy="101.5" r="4.8"/>
</g>
</svg>


<svg version="1.1" id="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g class="s-star">
	<circle fill="#F4F4F4" cx="53.1" cy="77.7" r="1"/>
	<circle fill="#F4F4F4" cx="192.6" cy="54.7" r="1"/>
	<circle fill="#F4F4F4" cx="181.5" cy="42.7" r="1"/>
	<circle fill="#F4F4F4" cx="235.1" cy="120.8" r="1"/>
	<circle fill="#F4F4F4" cx="77.7" cy="237" r="1"/>
	<circle fill="#F4F4F4" cx="253.1" cy="269" r="1"/>
	<circle fill="#F4F4F4" cx="76.7" cy="126.8" r="1"/>
	<circle fill="#F4F4F4" cx="113.9" cy="32.4" r="1"/>
	<circle fill="#F4F4F4" cx="275.4" cy="20" r="1"/>
	<circle fill="#F4F4F4" cx="262.1" cy="32.4" r="1"/>
	<circle fill="#F4F4F4" cx="28.7" cy="21" r="1"/>
	<circle fill="#F4F4F4" cx="137.4" cy="261.7" r="1"/>
</g>
<g class="x-star">
	<circle fill="#F4F4F4" cx="30.4" cy="12" r="1.5"/>
	<circle fill="#F4F4F4" cx="252.1" cy="-99.7" r="1.5"/>
	<circle fill="#F4F4F4" cx="263.1" cy="49.6" r="1.5"/>
	<circle fill="#F4F4F4" cx="52.1" cy="99.7" r="1.5"/>
	<circle fill="#F4F4F4" cx="105.8" cy="-92.3" r="1.5"/>
	<circle fill="#F4F4F4" cx="38.6" cy="-38.5" r="1.5"/>
</g>
<g class="tank">
	
		<path fill="#E85763" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M171.4,194.9V85.2c0-11.8-9.6-26.6-21.4-26.6s-21.4,14.8-21.4,26.6v109.6H171.4z"/>
	<path opacity="0.1" d="M150,58.7c-2.9,0-5.7,0.9-8.3,2.5c1-0.2,1.9-0.3,2.9-0.3c11.8,0,21.4,14.8,21.4,26.6v107.5h5.3V85.2
		C171.4,73.5,161.8,58.7,150,58.7z"/>
</g>
<g id="thruster">
	<g class="thruster-2">
		<g>
			<path fill="#FFFFFF" d="M181,212.8v-74c0-3.3,2.7-8.4,5-8.4s5,5.1,5,8.4v74H181z"/>
			<g>
				<path fill="#333333" d="M186,131.9c1,0,3.5,3.8,3.5,6.9v72.5h-7.1v-72.5C182.5,135.7,185.1,131.9,186,131.9 M186,128.9
					c-3.6,0-6.5,6.3-6.5,9.9v75.5h13.1v-75.5C192.6,135.2,189.7,128.9,186,128.9L186,128.9z"/>
			</g>
		</g>
		<polygon opacity="8.000000e-02" fill="#333333" points="179.5,214.2 179.5,214.3 192.6,214.3 192.6,166.2 179.5,141.4 		"/>
		<rect x="180.5" y="212.6" fill="#333333" width="11.2" height="9.9"/>
		
			<line opacity="0.2" fill="#F4F4F4" stroke="#333333" stroke-width="1.8" stroke-miterlimit="10" x1="179.5" y1="144.9" x2="192.6" y2="144.9"/>
		
			<line opacity="0.2" fill="#F4F4F4" stroke="#333333" stroke-width="1.8" stroke-miterlimit="10" x1="179.5" y1="173.9" x2="192.6" y2="173.9"/>
	</g>
	<g class="thruster-1">
		<g>
			<path fill="#FFFFFF" d="M108.8,212.8v-74c0-3.3,2.7-8.4,5-8.4s5,5.1,5,8.4v74H108.8z"/>
			<path fill="#333333" d="M113.9,131.9c1,0,3.5,3.8,3.5,6.9v72.5h-7.1v-72.5C110.3,135.7,112.9,131.9,113.9,131.9 M113.9,128.9
				c-3.6,0-6.5,6.3-6.5,9.9v75.5h13.1v-75.5C120.4,135.2,117.5,128.9,113.9,128.9L113.9,128.9z"/>
		</g>
		<rect x="108.3" y="212.6" fill="#333333" width="11.2" height="9.9"/>
		
			<line opacity="0.2" fill="#F4F4F4" stroke="#333333" stroke-width="1.8" stroke-miterlimit="10" x1="107.3" y1="144.9" x2="120.4" y2="144.9"/>
		
			<line opacity="0.2" fill="#F4F4F4" stroke="#333333" stroke-width="1.8" stroke-miterlimit="10" x1="107.3" y1="173.9" x2="120.4" y2="173.9"/>
	</g>
</g>
<g id="rocket-body">
	<g>
		<path fill="#F4F4F4" d="M102.1,214.1c-0.2,0-0.4,0-0.6-0.1c-1.6-0.7-2.4-2.9-2.8-4.2c-1-3.5-1-8.7,1.9-13.1c1-1.5,3-2.8,5.7-4.6
			c7.9-5.3,22.7-15.2,29.7-42.2c0.2-0.7,0.8-1.1,1.5-1.1c0.1,0,0.1,0,0.2,0c0.7,0.1,1.3,0.7,1.3,1.5v62.4c0,0.8-0.7,1.5-1.5,1.5
			H102.1z"/>
		<path fill="#333333" d="M137.4,150.2c0,15.4,0,62.4,0,62.4s-31.6,0-35.3,0c-2.1-1-4.3-9.1-0.3-15.1
			C105.2,192.3,128,186.2,137.4,150.2 M137.4,147.2c-1.3,0-2.6,0.9-2.9,2.2c-6.9,26.4-20.8,35.8-29.1,41.3c-2.9,1.9-5,3.3-6.1,5.1
			c-3.2,4.8-3.2,10.6-2.1,14.4c0.5,1.8,1.6,4.2,3.6,5.1c0.4,0.2,0.8,0.3,1.2,0.3h35.3c1.7,0,3-1.3,3-3v-62.4c0-1.5-1.1-2.8-2.6-3
			C137.6,147.2,137.5,147.2,137.4,147.2L137.4,147.2z"/>
	</g>
	<g>
		<path fill="#CCCCCC" d="M162.6,214.1c-0.8,0-1.5-0.7-1.5-1.5v-62.4c0-0.8,0.6-1.4,1.3-1.5c0.1,0,0.1,0,0.2,0
			c0.7,0,1.3,0.5,1.5,1.1c7,27,21.8,36.9,29.7,42.2c2.7,1.8,4.7,3.2,5.7,4.6c2.9,4.4,2.9,9.7,1.9,13.1c-0.4,1.2-1.2,3.4-2.8,4.2
			c-0.2,0.1-0.4,0.1-0.6,0.1H162.6z"/>
		<g>
			<path fill="#333333" d="M162.6,150.2c9.4,36.1,32.2,42.1,35.6,47.3c4,6,1.9,14.1-0.3,15.1c-3.7,0-35.3,0-35.3,0
				S162.6,165.6,162.6,150.2 M162.6,147.2c-0.1,0-0.3,0-0.4,0c-1.5,0.2-2.6,1.5-2.6,3v62.4c0,1.7,1.3,3,3,3h35.3
				c0.4,0,0.9-0.1,1.2-0.3c2-0.9,3.1-3.3,3.6-5.1c1.1-3.8,1.1-9.5-2.1-14.4c-1.1-1.7-3.2-3.1-6.1-5.1c-8.3-5.6-22.2-14.9-29.1-41.3
				C165.2,148.1,164,147.2,162.6,147.2L162.6,147.2z"/>
		</g>
	</g>
	<g>
		<path fill="#FFFFFF" d="M143.7,229.4c-0.7,0-1.2-0.4-1.4-1.1c-2.9-9.5-6.4-23-6.4-33.7v-75.7c0-4.7,7.4-22.6,14.1-22.6
			c6.8,0,14.1,18,14.1,22.6v75.7c0,10.7-3.5,24.3-6.4,33.7c-0.2,0.6-0.8,1.1-1.4,1.1H143.7z"/>
		<path fill="#333333" d="M150,97.8c5.5,0,12.6,16.7,12.6,21.1c0,4.4,0,59,0,75.7c0,10.8-3.7,24.8-6.3,33.3h-12.5
			c-2.6-8.5-6.3-22.5-6.3-33.3c0-16.7,0-71.3,0-75.7C137.4,114.5,144.5,97.8,150,97.8 M150,94.8c-8.4,0-15.6,19.6-15.6,24.1v75.7
			c0,10.9,3.5,24.6,6.5,34.2c0.4,1.3,1.6,2.1,2.9,2.1h12.5c1.3,0,2.5-0.9,2.9-2.1c3-9.6,6.5-23.3,6.5-34.2v-75.7
			C165.6,114.3,158.4,94.8,150,94.8L150,94.8z"/>
	</g>
	<g>
		<path fill="#EBEBEB" d="M150,97.8c-1,0-2,0.5-3,1.4c5.3,1.3,11.9,16.8,11.9,21c0,4.4,0,59,0,75.7c0,10.3-3.4,23.4-5.9,32h3.4
			c2.6-8.5,6.3-22.5,6.3-33.3c0-16.7,0-71.3,0-75.7S155.5,97.8,150,97.8z"/>
	</g>
	<g>
		<path fill="#333333" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M148.2,117.3
			c-3.3,0.6-5.9,3.3-7,6.9c1.7-2,4.2-3.4,7-3.7V117.3z"/>
		<path fill="#333333" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M151.5,117.2
			v3.3c2.9,0.2,5.6,1.6,7.4,3.7C157.7,120.5,154.9,117.7,151.5,117.2z"/>
	</g>
	<path fill="#EBEBEB" d="M150,198.1v29.8h6.3c0.9-2.9,1.9-6.5,2.9-10.4l-7.7-19.4H150z"/>
	
		<line fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="150" y1="241.3" x2="150" y2="198.1"/>
</g>
</svg>
<svg version="1.1" id="totem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g id="body">
	<rect x="125.8" y="209.9" fill="#44E293" stroke="#333333" stroke-width="3" stroke-miterlimit="10" width="48.5" height="8.6"/>
	<g class="wing-2">
		<g>
			<path fill="#44E293" d="M34.9,164.2c-7.3,0-9.2-8.2-9.2-12.5v-1.5h89.9v14H34.9z"/>
			<path fill="#333333" d="M114,151.7v11c0,0-71.4,0-79.1,0s-7.7-11-7.7-11H114 M117,148.7h-3H27.2h-3v3c0,4.9,2.2,14,10.7,14H114h3
				v-3v-11V148.7L117,148.7z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M38.2,151.7h-11c0,0,0,11,7.7,11c1.5,0,5.6,0,11,0C38.2,162.7,38.2,151.7,38.2,151.7z"/>
		</g>
		<g>
			<path fill="#44E293" d="M45.9,179.7c-7.3,0-9.2-8.2-9.2-12.5v-1.5h78.8v14H45.9z"/>
			<path fill="#333333" d="M114,167.1v11c0,0-60.4,0-68.1,0c-7.7,0-7.7-11-7.7-11H114 M117,164.1h-3H38.2h-3v3c0,4.9,2.2,14,10.7,14
				H114h3v-3v-11V164.1L117,164.1z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M49.2,167.1h-11c0,0,0,11,7.7,11c1.6,0,5.7,0,11,0C49.2,178.2,49.2,167.1,49.2,167.1z"/>
		</g>
		<g>
			<path fill="#44E293" d="M57,195.1c-7.3,0-9.2-8.2-9.2-12.5v-1.5h67.8v14H57z"/>
			<path fill="#333333" d="M114,182.6v11c0,0-49.3,0-57,0c-7.7,0-7.7-11-7.7-11H114 M117,179.6h-3H49.2h-3v3c0,4.9,2.2,14,10.7,14
				h57h3v-3v-11V179.6L117,179.6z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M59.7,182.6H49.2c0,0,0,11,7.7,11c1.7,0,5.6,0,10.5,0C59.7,193.6,59.7,182.6,59.7,182.6z"/>
		</g>
		<rect x="108.1" y="151.7" opacity="0.1" fill="#333333" width="5.9" height="42"/>
	</g>
	<g class="wing-1">
		<g>
			<path fill="#44E293" d="M184.5,164.2v-14h89.9v1.5c0,4.3-1.9,12.5-9.2,12.5H184.5z"/>
			<path fill="#333333" d="M272.8,151.7c0,0,0,11-7.7,11s-79.1,0-79.1,0v-11H272.8 M275.8,148.7h-3H186h-3v3v11v3h3h79.1
				c4.5,0,7.9-2.7,9.6-7.5c1.1-3.2,1.1-6.2,1.1-6.5V148.7L275.8,148.7z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M261.8,151.7h11c0,0,0,11-7.7,11c-1.5,0-5.6,0-11,0C261.8,162.7,261.8,151.7,261.8,151.7z"/>
		</g>
		<g>
			<path fill="#44E293" d="M184.5,179.7v-14h78.8v1.5c0,4.3-1.9,12.5-9.2,12.5H184.5z"/>
			<path fill="#333333" d="M261.8,167.1c0,0,0,11-7.7,11s-68.1,0-68.1,0v-11H261.8 M264.8,164.1h-3H186h-3v3v11v3h3h68.1
				c8.5,0,10.7-9.2,10.7-14V164.1L264.8,164.1z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M250.8,167.1h11c0,0,0,11-7.7,11c-1.6,0-5.7,0-11,0C250.8,178.2,250.8,167.1,250.8,167.1z"/>
		</g>
		<g>
			<path fill="#44E293" d="M184.5,195.1v-14h67.8v1.5c0,4.3-1.9,12.5-9.2,12.5H184.5z"/>
			<path fill="#333333" d="M250.8,182.6c0,0,0,11-7.7,11s-57,0-57,0v-11H250.8 M253.8,179.6h-3H186h-3v3v11v3h3h57
				c8.5,0,10.7-9.2,10.7-14V179.6L253.8,179.6z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M240.3,182.6h10.5c0,0,0,11-7.7,11c-1.7,0-5.6,0-10.5,0C240.3,193.6,240.3,182.6,240.3,182.6z"/>
		</g>
		<rect x="186" y="151.7" opacity="0.1" fill="#333333" width="5.9" height="42"/>
	</g>
	<g>
		<path fill="#E85763" stroke="#333333" stroke-width="3" stroke-miterlimit="10" d="M116.6,119.2h-5.1c-3.3,0-6-2.7-6-6v-7
			c0-3.3,2.7-6,6-6h5.1c3.3,0,6,2.7,6,6v7C122.6,116.5,119.9,119.2,116.6,119.2z"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="116.4" y1="109.6" x2="111" y2="109.6"/>
	</g>
	<g>
		<path fill="#E85763" stroke="#333333" stroke-width="3" stroke-miterlimit="10" d="M183.4,119.2h5.1c3.3,0,6-2.7,6-6v-7
			c0-3.3-2.7-6-6-6h-5.1c-3.3,0-6,2.7-6,6v7C177.4,116.5,180.1,119.2,183.4,119.2z"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="183.6" y1="109.6" x2="189" y2="109.6"/>
	</g>
	<g>
		<path fill="#44E293" d="M121.6,144.2c-1.9,0-3.5-1.6-3.5-3.5v-5.8c0-1.9,1.6-3.5,3.5-3.5h56.8c1.9,0,3.5,1.6,3.5,3.5v5.8
			c0,1.9-1.6,3.5-3.5,3.5H121.6z"/>
		<g>
			<path fill="#333333" d="M178.4,132.9c1.1,0,2,0.9,2,2v5.8c0,1.1-0.9,2-2,2h-56.8c-1.1,0-2-0.9-2-2v-5.8c0-1.1,0.9-2,2-2H178.4
				 M178.4,129.9h-56.8c-2.8,0-5,2.2-5,5v5.8c0,2.8,2.2,5,5,5h56.8c2.8,0,5-2.2,5-5v-5.8C183.4,132.2,181.1,129.9,178.4,129.9
				L178.4,129.9z"/>
		</g>
	</g>
	<g opacity="0.1">
		<path d="M178.1,132.9h-2.5c1.2,0,2.2,1,2.2,2.2v5.3c0,1.2-1,2.2-2.2,2.2h2.5c1.2,0,2.2-1,2.2-2.2v-5.3
			C180.4,134,179.4,132.9,178.1,132.9z"/>
	</g>
	<g>
		<path fill="#44E293" d="M120.4,131.1c-3,0-5.5-2.5-5.5-5.5V85.5c0-3,2.5-5.5,5.5-5.5h59.1c3,0,5.5,2.5,5.5,5.5v40.1
			c0,3-2.5,5.5-5.5,5.5H120.4z"/>
		<g>
			<path fill="#333333" d="M179.6,81.5c2.2,0,4,1.8,4,4v40.1c0,2.2-1.8,4-4,4h-59.1c-2.2,0-4-1.8-4-4V85.5c0-2.2,1.8-4,4-4H179.6
				 M179.6,78.5h-59.1c-3.9,0-7,3.1-7,7v40.1c0,3.9,3.1,7,7,7h59.1c3.9,0,7-3.1,7-7V85.5C186.6,81.6,183.4,78.5,179.6,78.5
				L179.6,78.5z"/>
		</g>
	</g>
	<g>
		<path fill="#44E293" d="M120.4,211.4c-3,0-5.5-2.5-5.5-5.5v-56.1c0-3,2.5-5.5,5.5-5.5h59.1c3,0,5.5,2.5,5.5,5.5v56.1
			c0,3-2.5,5.5-5.5,5.5H120.4z"/>
		<path fill="#333333" d="M179.6,145.8c2.2,0,4,1.8,4,4v56.1c0,2.2-1.8,4-4,4h-59.1c-2.2,0-4-1.8-4-4v-56.1c0-2.2,1.8-4,4-4H179.6
			 M179.6,142.8h-59.1c-3.9,0-7,3.1-7,7v56.1c0,3.9,3.1,7,7,7h59.1c3.9,0,7-3.1,7-7v-56.1C186.6,145.9,183.4,142.8,179.6,142.8
			L179.6,142.8z"/>
	</g>
	<g opacity="0.1">
		<path d="M179.1,145.8h-2.7c2.5,0,4.5,2,4.5,4.5v55.2c0,2.5-2,4.5-4.5,4.5h2.7c2.5,0,4.5-2,4.5-4.5v-55.2
			C183.6,147.8,181.5,145.8,179.1,145.8z"/>
	</g>
	
		<polyline fill="none" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		126.4,139.5 130,135.9 134.3,139.5 138.6,135.9 143.5,139.5 146.5,135.9 151.3,139.9 154.5,135.9 159.2,139.9 161.9,135.9 
		166.3,139.9 170.4,135.9 173.6,139.3 	"/>
	
		<line fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="116.4" y1="86.2" x2="183.6" y2="86.2"/>
	<g>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="121.5" y1="86.2" x2="121.5" y2="81.5"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="131" y1="86.2" x2="131" y2="81.5"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="140.5" y1="86.2" x2="140.5" y2="81.5"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="150" y1="86.2" x2="150" y2="81.5"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="159.5" y1="86.2" x2="159.5" y2="81.5"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="169" y1="86.2" x2="169" y2="81.5"/>
		
			<line fill="#FFFFFF" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="178.5" y1="86.2" x2="178.5" y2="81.5"/>
	</g>
	<g>
		<polygon fill="#E85763" points="143.8,145.6 156.2,145.6 150,156.4 		"/>
		<g>
			<path fill="#333333" d="M154.7,146.5l-4.7,8.1l-4.7-8.1H154.7 M157.8,144.7h-15.6l7.8,13.5L157.8,144.7L157.8,144.7z"/>
		</g>
	</g>
	<g opacity="0.1">
		<path d="M179.1,81.5h-2.7c2.5,0,4.5,2,4.5,4.5v39.1c0,2.5-2,4.5-4.5,4.5h2.7c2.5,0,4.5-2,4.5-4.5V86
			C183.6,83.5,181.5,81.5,179.1,81.5z"/>
	</g>
</g>
<g>
	<g>
		<circle fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="136.2" cy="105.5" r="7.8"/>
		<g class="pupil">
			<circle fill="#333333" cx="136.2" cy="106.6" r="2.5"/>
		</g>
		
			<path fill="#44E293" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M143.9,104.6c-0.5-3.8-3.7-6.8-7.7-6.8c-4,0-7.2,3-7.7,6.8H143.9z"/>
	</g>
	<g>
		<circle fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="163.4" cy="105.5" r="7.8"/>
		<g class="pupil">
			<circle fill="#333333" cx="163.4" cy="106.6" r="2.5"/>
		</g>
		
			<path fill="#44E293" stroke="#333333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M171.1,104.6c-0.5-3.8-3.7-6.8-7.7-6.8c-4,0-7.2,3-7.7,6.8H171.1z"/>
	</g>
</g>
<g>
	<circle fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="134.9" cy="169.8" r="10.4"/>
	<circle fill="#333333" cx="134.9" cy="169.8" r="3.4"/>
	<g class="eyelid">
		<circle fill="#44E293" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="134.9" cy="169.8" r="10.4"/>
		<line fill="#44E293" stroke="#333333" stroke-width="3" stroke-miterlimit="10" x1="124.9" y1="172.6" x2="144.9" y2="172.6"/>
	</g>
	<circle fill="#FFFFFF" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="165.1" cy="169.8" r="10.4"/>
	<circle fill="#333333" cx="165.1" cy="169.8" r="3.4"/>
	<g class="eyelid">
		<circle fill="#44E293" stroke="#3333
              
            
!

CSS

              
                #wrapper{
  width: 1000px;
  margin: auto;
}

svg{
  display: block;
  float:left;
  margin-right: 10px;
  margin-top: 10px;
}

/********** Records player *********/

#records-player{
  width: 320px;
  height: 320px;
  background-color: #f4f4f4;
}

.disc{
  transform-origin:50% 50%;  
}
  
#records-player:hover .disc{
  animation: rotateDisc 300ms 400ms infinite linear;
}

.tonearm{
    transform: rotate(0deg);
    transform-origin:50% 0%;
    transition: all 500ms ease-out;
}

#records-player:hover .tonearm{
  transform: rotate(38deg);
}

@keyframes rotateDisc{
 from {
    transform: rotate(0deg);
  }
  to {
     transform: rotate(359deg);
  }
}

/********** Minivan *********/

#mini-van{
  width:320px;
  height: 320px;
  background-color: #f4f4f4;
}

#mini-van:hover .car-body{
  animation: driving 600ms infinite alternate;
}

.wheel{
  transform-origin:50% 50%;
}

#mini-van:hover .wheel{
  animation: wheelTurning 300ms infinite linear;
}

#mini-van:hover .cloud-2{
 animation: cloudTranslation 10000ms infinite linear;
}

#mini-van:hover .cloud-1{
 animation: cloudTranslation 12000ms infinite linear;
}

@keyframes driving{
 from {
    transform: translateY(0);
  }
  to {
     transform: translateY(-4px);
  }
}

@keyframes wheelTurning{
 from {
    transform: rotate(0deg);
  }
  to {
     transform: rotate(359deg);
  }
}

@keyframes cloudTranslation{
 from {
    transform: translateX(0px);
  }
  to {
     transform: translateX(420px);
  }
}


/********** Clock *********/

#clock-icon{
  width: 320px;
  background-color: #f4f4f4;
}

.clock{
  transform-origin:50% 50%;
  transform: rotate(0deg);
}

.clock:hover{
  animation: vibrate 50ms infinite alternate;
}

@keyframes vibrate{
 from {
    transform: rotate(-5deg);
  }
  to {
     transform: rotate(5deg);
  }
}

/********** Spacecraft *********/

#rocket *{
    transition: all 1400ms ease-in;
}

#rocket{
  width: 320px;
  height: 320px;
  background-color: #f4f4f4;
  transition: background-color 200ms ease-in-out;
}

#rocket:hover{
  background-color: #2e3c42;
}

#rocket:hover .tank{
  transform:translate(100px, 500px) rotate(30deg);
}

.thruster-1, .thruster-2, .tank{
  transform: rotate(0deg);
}

#rocket:hover .thruster-1{
  transform:translate(-300px, 800px) rotate(-60deg);
}

#rocket:hover .thruster-2{
  transform:translate(400px, 800px) rotate(60deg);
}

#rocket:hover .s-star{
  animation: starTranslate 14s infinite linear;
}

#rocket:hover .x-star{
  animation: starTranslate 7s infinite linear;
}

@keyframes starTranslate{
  from{
    transform: translateY(-300px);
  }
  to{
    transform: translateY(300px);
  }
}


/******* totem **********/
#totem *{
  transition: all 100ms ease-in;
}

#totem{
  width: 320px;
  height: 320px;
  background-color: #f4f4f4;
}

#totem:hover .wing-1{
  transform: translateX(-30px);
}

#totem:hover .wing-2{
  transform: translateX(30px);
}

#totem:hover .eyelid{
  opacity:0;
  animation: winking 2400ms 1000ms infinite linear;
}

#totem:hover .pupil{
  transform: translateY(4px);
}

@keyframes winking{
  9%{
    opacity:0;
  }
  10%{
    opacity:1;
  }
  20%{
    opacity:1;
  }
  21%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

/****** radio ******/
#radio *{
  transition: all 100ms ease-out;
}

#radio{
  width: 320px;
  height: 320px;
  background-color: #f4f4f4;
}

.radio-color{
  fill:#3793ef;
}

.pupil{
  transform-origin: 50% 50%;
  fill:#999999;
}

.antenna{
  transform:translateY(2px);
}


#radio:hover .radio-color{
  fill:#afafaf;
}


#radio:hover .pupil{
  transform: scale(0.4);
  fill:#333333;
}

#radio:hover .ear-1{
  transform: translateX(-24px);
}

#radio:hover .ear-2{
  transform: translateX(24px);
}

#radio:hover .bar{
  opacity:0;
}

#radio:hover .eyes{
  transform: translateY(-8px);
}

#radio:hover .handle{
  transform: translateY(25px);
}

#radio:hover .antenna{
  transform: translateY(-40px);
}



              
            
!

JS

              
                
              
            
!
999px

Console