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

Pen Settings

CSS Base

Vendor Prefixing

Add External 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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">	

<body>
	
	<!-- Navbar -->
	<nav class="navbar-container">
		<ul class="nav navbar">
			<li class="nav-item active"><a href="#intro">INTRO</a></li>
			<li class="nav-item"><a href="#buttons">BUTTONS</a></li>
			<li class="nav-item"><a href="#pulse">PULSE</a></li>
			<li class="nav-item"><a href="#fill">DRAW&FILL</a></li>
			<li class="nav-item"><a href="#chart">CHART</a></li>
			<li class="nav-item"><a href="#apple">SUN RISE/SET</a></li>
		</ul>
	</nav>

	<!-- Intro Page -->
	<section class="page-container" id="intro">
	  	<section class="section-container">
		  	<!-- Svg Logo -->
			<svg id="Svg-html-logo" width="481px" height="143px" viewBox="0 0 481 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <defs>
			        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
			            <stop stop-color="#85D8CE" offset="0%"></stop>
			            <stop stop-color="#4B8EB3" offset="100%"></stop>
			        </linearGradient>
			    </defs>
			    <g id="Daily-UI-003" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-weight="normal" font-family="Lato-Regular, Lato" letter-spacing="3" font-size="120">
			        <g id="Svg.html-Shape" stroke="url(#linearGradient-1)" stroke-width="2" fill="#FFFFFF">
			            <text id="Svg.html">
			                <tspan x="3.77" y="118">Svg.html</tspan>
			            </text>
			        </g>
			    </g>
			</svg>
			
			<p class="intro-des">A collection of HTML5 svg animations. Designed to demonstrate the uses of svg paths and animations, Svg.html is created to provide a concise and flowing user experience. You can download the source code on <a href="https://github.com/kevinfan23/svg.html">Github</a></p>
			<br>
			<p class="intro-des"><span>Svg.html is released under the MIT license</span></p>
	  	</section>
	</section>
	
	<!-- Buttons -->
	<section class="page-container" id="buttons">
	  	<section class="section-container">
	    	<h4>Buttons</h4>
	    	<p class="reference">*Inspired by <a href="https://codepen.io/seanmccaffery/" target="_blank">Sean McCaffery</a></p>
	    
		    <!-- Outline Drawing -->
		    <div class="button-container button-outline">
		        <div class="button">
			        <svg class="svg-button-outline" height="45" width="200" viewBox="0 0 200 45" xmlns="http://www.w3.org/2000/svg">
						<rect class="button-outline" height="45" width="200" fill="white" stroke="rgba(85, 172, 238, 1)" stroke-width="3"/>
					</svg>
		            <div class="button-icon">
		              	<i class="fa fa-twitter"></i>
		            </div>
		        </div>
		    </div>
		    
		    <div class="button-container button-corner">
		        <div class="button">
			        <svg class="svg-button-corner" height="45" width="200" viewBox="0 0 200 45" xmlns="http://www.w3.org/2000/svg">
						<rect height="45" width="200" fill="white" stroke="#3b5998" stroke-width="3"/>
					</svg>
		            <div class="button-icon">
		              	<i class="fa fa-facebook"></i>
		            </div>
		        </div>
		    </div>
		    
		    <div class="button-container button-edge">
		        <div class="button">
			        <svg class="svg-button-edge" height="45" width="200" viewBox="0 0 200 45" xmlns="http://www.w3.org/2000/svg">
						<rect class="button" height="45" width="200" fill="white" stroke="#9b6954" stroke-width="3"/>
					</svg>
		            <div class="button-icon">
		              	<i class="fa fa-instagram"></i>
		            </div>
		        </div>
		    </div>
		    
	  </section>
	</section>
	
	
	<!-- Pulse -->
	<section class="page-container" id="pulse">
	  	<section class="section-container">
	    	<h4><span style="color:#2ecc71">P</span><span style="color:#3498db">u</span><span style="color:#F8E71C">l</span><span style="color:#e74c3c">s</span><span>e</span></h4>
			<svg width="231px" height="160px" viewBox="0 0 231 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <g id="Daily-UI-004" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
			        <g id="Pulse" transform="translate(-20.000000, -24.000000)" linejoin="round" stroke="#2c3e50" stroke-width="2">
			            <path d="M21.5,105.5 C21.5,105.5 22.5455689,103.530357 23.9888474,101.15688 C23.9888474,101.15688 39.5,67.4999981 57.5,111.499998 C68.3575884,138.04077 74.93352,25.0849777 79.5,25 C86.6027214,24.8678253 91.2248308,181.01147 98.9999995,182.500006 C106.065842,183.852743 110.587426,44.8078077 117.999999,44 C123.635992,43.3858007 131.25839,156.943669 136.999999,157.500006 C144.770551,158.252938 147.875146,73.8331716 155.499999,72.4999981 C161.319583,71.4824685 168.29548,129.696583 173.999999,129.999998 C180.825342,130.363029 185.655955,87.9866833 191.999999,86.9999981 C197.832624,86.0928538 204.187383,113.306403 209.499999,113.999998 C218.40696,115.162857 223.125336,88.6127912 229.499999,86.9999981 C239.960034,84.353604 249.5,105.5 249.5,105.5" id="Line"></path>
			        </g>
			    </g>
			</svg>	
		</section>
	</section>
	    

	<!-- Draw and Fill -->
	<section class="page-container" id="fill">
		<section class="section-container">
			<h4>Draw and Fill</h4>
			<p class="reference">*Drawings by <a href="https://dribbble.com/anand_krish" target="_blank">Anantha Krishnan</a></p>
			
			<svg class="draw-fill-container" width="817px" height="518px" viewBox="0 0 817 518" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			        <g id="Line_Illustration" transform="translate(2.000000, 3.000000)">
			            <g id="Group">
			                <g class="draw"id="pencil" transform="translate(16.000000, 291.000000)">
			                    <path d="M98.2,0.5 C99.5,0.5 100.6,1.8 100.6,3.3 L100.6,19 C100.6,20.5 99.5,21.8 98.2,21.8 L86.4,21.8 C85.1,21.8 84,20.5 84,19 L84,3.3 C84,1.8 85.1,0.5 86.4,0.5 L98.2,0.5 L98.2,0.5 Z" id="Shape" fill="#D9A128"></path>
			                    <polygon id="Shape" stroke="#D9A128" stroke-width="3" fill="#FCF5EA" points="64.3 20.2 13.8 20.2 2.8 11.1 14 1.9 64.3 2 87.2 2 87.2 20.3"></polygon>
			                    <polygon id="Shape" stroke="#D9A128" stroke-width="2" fill="#ECCA8D" points="14.3 20.2 12.8 20.2 1.8 11.1 13 1.9 14.2 1.9 13 7.7 14.2 7.5 12.9 13.3 14.3 13.3"></polygon>
			                    <g id="Group" transform="translate(0.000000, 8.000000)" fill="#D9A128">
			                        <polygon id="Shape" points="5.4 6.1 5.4 0.1 0.8 3.1"></polygon>
			                        <polygon id="Shape" points="5.4 2 0.8 3.1 5.4 0.1"></polygon>
			                    </g>
			                </g>
			                <g id="watch" transform="translate(597.000000, 166.000000)">
			                    <path d="M35.9,71.6 C35.9,75.3 32.9,78.2 29.3,78.2 L15.2,78.2 C11.5,78.2 8.6,75.2 8.6,71.6 L8.6,7.3 C8.6,3.6 11.6,0.7 15.2,0.7 L29.3,0.7 C33,0.7 35.9,3.7 35.9,7.3 L35.9,71.6 L35.9,71.6 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <path d="M36.3,143.2 C36.3,146.9 33.3,149.8 29.7,149.8 L15.6,149.8 C11.9,149.8 9,146.8 9,143.2 L9,78.9 C9,75.2 12,72.3 15.6,72.3 L29.7,72.3 C33.4,72.3 36.3,75.3 36.3,78.9 L36.3,143.2 L36.3,143.2 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="2" fill="#D9A128" x="45.2" y="71.1" width="5" height="4.3"></rect>
			                    <path d="M0.1,73.3 C0.1,85.6 10.1,95.5 22.3,95.5 C34.6,95.5 44.5,85.5 44.5,73.3 C44.5,61 34.5,51.1 22.3,51.1 C10,51.1 0.1,61 0.1,73.3 L0.1,73.3 Z" id="Shape" stroke="#D9A128" stroke-width="5" fill="#FFFFFF"></path>
			                    <circle id="Oval" fill="#D9A128" cx="22.4" cy="73.9" r="2.8"></circle>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="1.99999298" transform="translate(26.853135, 71.414425) rotate(-32.188192) translate(-26.853135, -71.414425) " x="23.4031471" y="71.2144257" width="6.89997578" height="0.399998596"></rect>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="2" x="22.1" y="63" width="0.5" height="9.4"></rect>
			                    <g id="Group" transform="translate(22.000000, 100.000000)" fill="#D9A128">
			                        <rect id="Rectangle-path" x="0.2" y="0.5" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.2" y="5.8" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.2" y="11.1" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.2" y="16.4" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.2" y="21.7" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.2" y="27" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.2" y="32.3" width="0.8" height="4.2"></rect>
			                    </g>
			                    <g id="Group" transform="translate(21.000000, 10.000000)" fill="#D9A128">
			                        <rect id="Rectangle-path" x="0.8" y="0.4" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.8" y="5.7" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.8" y="11" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.8" y="16.3" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.8" y="21.6" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.8" y="26.9" width="0.8" height="4.2"></rect>
			                        <rect id="Rectangle-path" x="0.8" y="32.2" width="0.8" height="4.2"></rect>
			                    </g>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="2" fill="#D9A128" x="8.5" y="11" width="26.6" height="4.8"></rect>
			                </g>
			                <g id="row2" transform="translate(158.000000, 314.000000)">
			                    <g id="ipad">
			                        <path d="M133.2,170.6 C133.2,172.8 131.4,174.6 129.2,174.6 L4.7,174.6 C2.5,174.6 0.7,172.8 0.7,170.6 L0.7,4.3 C0.7,2.1 2.5,0.3 4.7,0.3 L129.3,0.3 C131.5,0.3 133.3,2.1 133.3,4.3 L133.3,170.6 L133.2,170.6 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#FFFFFF"></path>
			                        <g id="Group" transform="translate(4.000000, 8.000000)">
			                            <g id="XMLID_1_-link" transform="translate(10.000000, 8.000000)" fill="#ECCA8D">
			                                <rect id="XMLID_1_" x="0.3" y="0.2" width="105.4" height="142.5"></rect>
			                            </g>
			                            <polygon id="Shape" fill="#FCF5EA" opacity="0.4" points="0.3 5.5 0.3 155.5 51.3 155.5 92.3 7.5 94.3 0.5"></polygon>
			                            <g id="XMLID_1_-link" transform="translate(10.000000, 8.000000)" stroke="#D9A128" stroke-width="2">
			                                <rect id="XMLID_1_" x="0.3" y="0.2" width="105.4" height="142.5"></rect>
			                            </g>
			                        </g>
			                        <rect id="Rectangle-path" fill="#D9A128" x="64.8" y="7.1" width="2.5" height="2.5"></rect>
			                        <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#FFFFFF" cx="67" cy="166.2" r="3.8"></circle>
			                    </g>
			                    <g id="mobile_1_" transform="translate(163.000000, 41.000000)">
			                        <path d="M68.7,132.1 C68.7,134.4 66.9,136.2 64.6,136.2 L4.8,136.2 C2.5,136.2 0.7,134.3 0.7,132.1 L0.7,5 C0.7,2.7 2.5,0.9 4.8,0.9 L64.6,0.9 C66.9,0.9 68.7,2.8 68.7,5 L68.7,132.1 L68.7,132.1 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#FFFFFF"></path>
			                        <g id="Group" transform="translate(4.000000, 17.000000)">
			                            <g id="XMLID_2_-link" transform="translate(3.000000, 2.000000)" fill="#ECCA8D">
			                                <rect id="XMLID_2_" x="0.4" y="0" width="54.7" height="100.3"></rect>
			                            </g>
			                            <polygon id="Shape" fill="#FCF5EA" opacity="0.4" points="0.6 103.2 0.6 0 40.9 0 18.3 103.7"></polygon>
			                            <g id="XMLID_2_-link" transform="translate(3.000000, 2.000000)" stroke="#D9A128" stroke-width="2">
			                                <rect id="XMLID_2_" x="0.4" y="0" width="54.7" height="100.3"></rect>
			                            </g>
			                        </g>
			                        <g id="Group" transform="translate(29.000000, 6.000000)" fill="#D9A128">
			                            <rect id="Rectangle-path" x="0.5" y="5.4" width="10.4" height="1.8"></rect>
			                            <rect id="Rectangle-path" x="4.5" y="0.5" width="2" height="2"></rect>
			                        </g>
			                        <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#FFFFFF" cx="34.7" cy="127.6" r="3.2"></circle>
			                    </g>
			                    <g id="wacom" transform="translate(463.000000, 55.000000)">
			                        <path d="M185.7,123.3 L3.7,123.3 C2,123.3 0.7,122 0.7,120.3 L0.7,3 C0.7,1.3 2,0 3.7,0 L185.7,0 C187.3,0 188.7,1.3 188.7,3 L188.7,120.3 C188.7,122 187.3,123.3 185.7,123.3 L185.7,123.3 Z" id="BG_2_" stroke="#D9A128" stroke-width="3" fill="#FCF5EA"></path>
			                        <rect id="screen" stroke="#D9A128" stroke-width="3" fill="#ECCA8D" x="50.2" y="16.1" width="127" height="74"></rect>
			                        <rect id="Rectangle-path" fill="#FFFFFF" x="86.3" y="104.9" width="18.5" height="4.3"></rect>
			                        <g id="Group" transform="translate(8.000000, 14.000000)">
			                            <rect id="Rectangle-path" stroke="#D9A128" fill="#ECCA8D" x="0.6" y="1.1" width="21.5" height="37.4"></rect>
			                            <g transform="translate(3.000000, 3.000000)" stroke="#D9A128" id="Rectangle-path" fill="#FFFFFF">
			                                <rect x="0.4" y="28.5" width="16" height="4.8"></rect>
			                                <rect x="0.4" y="0.4" width="7" height="26.5"></rect>
			                                <rect x="9.4" y="0.4" width="7" height="12.4"></rect>
			                                <rect x="9.4" y="14.4" width="7" height="12.4"></rect>
			                            </g>
			                            <rect id="Rectangle-path" fill="#D9A228" x="26.2" y="0.7" width="7.5" height="38.2"></rect>
			                        </g>
			                        <rect id="Rectangle-path" fill="#D9A128" x="109.8" y="8.1" width="7.6" height="2.8"></rect>
			                    </g>
			                    <g id="pen" transform="translate(433.000000, 155.000000)">
			                        <path d="M152.3,13.5 L140.5,13.5 C138.8,13.5 137.5,12.1 137.5,10.5 L137.5,3.1 C137.5,1.4 138.8,0.1 140.5,0.1 L152.3,0.1 C153.9,0.1 155.3,1.4 155.3,3.1 L155.3,10.5 C155.3,12.2 154,13.5 152.3,13.5 L152.3,13.5 Z" id="Shape" stroke="#D9A128" stroke-width="2" fill="#FCF5EA"></path>
			                        <polygon id="Shape" stroke="#D9A128" stroke-width="2" fill="#FCF5EA" points="0.1 5.1 3.6 5.1 13.7 0.1 145.9 0.1 146.5 0.1 146.5 13.5 13.2 13.5 3.5 8.6 0.1 8.3"></polygon>
			                        <rect id="Rectangle-path" fill="#ECCA8D" x="14.9" y="1.1" width="123.7" height="11.3"></rect>
			                        <rect id="Rectangle-path" fill="#D9A128" x="14.7" y="0.4" width="69.1" height="12.3"></rect>
			                        <polygon id="Shape" fill="#ECCA8D" points="14.9 0.1 3.9 5.1 0.1 5.1 0.1 8.3 3.8 8.6 14.9 13.5"></polygon>
			                        <rect id="Rectangle-path" stroke="#D9A128" fill="#FFFFFF" x="20.3" y="4.4" width="30.5" height="5.1"></rect>
			                        <rect id="Rectangle-path" stroke="#D9A128" fill="#ECCA8D" x="23.1" y="6" width="11" height="1.9"></rect>
			                        <rect id="Rectangle-path" fill="#D9A128" x="138.5" y="1" width="7.2" height="12"></rect>
			                    </g>
			                    <g id="apple_tv" transform="translate(262.000000, 75.000000)">
			                        <path d="M100.8,92 C100.8,95.7 97.8,98.6 94.2,98.6 L7.2,98.6 C3.5,98.6 0.6,95.6 0.6,92 L0.6,7.2 C0.6,3.5 3.6,0.6 7.2,0.6 L94.2,0.6 C97.9,0.6 100.8,3.6 100.8,7.2 L100.8,92 L100.8,92 Z" id="Shape" stroke="#D9A128" stroke-width="2" fill="#ECCA8D"></path>
			                        <g id="Group" transform="translate(28.000000, 33.000000)" fill="#D9A128">
			                            <g id="apple_logo_3_" transform="translate(0.000000, 3.000000)">
			                                <path d="M17,7.6 C17,7.6 11.8,11.5 17.6,15.8 C17.6,15.8 15.7,21.2 13,21.4 C13,21.4 11.3,21 10.5,20.7 C10.5,20.7 8.8,20.2 7,21.5 C7,21.5 4.9,21.6 4.5,20.9 C4.5,20.9 1.7,18.6 0.8,14.2 C0.8,14.2 -0.8,8.4 4.2,6.1 C4.2,6.1 5.8,5.2 8.5,6.6 C8.5,6.6 9.8,6.8 11.6,6 C11.7,5.8 14.3,4.6 17,7.6 L17,7.6 Z" id="Shape"></path>
			                                <path d="M8.5,5.3 C8.5,5.3 8.1,0.9 13,0 C13,0 14,4.6 8.5,5.3 L8.5,5.3 Z" id="Shape"></path>
			                            </g>
			                            <text id="tv" font-family="Helvetica" font-size="23" font-weight="normal">
			                                <tspan x="23.0619" y="23.0958">tv</tspan>
			                            </text>
			                        </g>
			                    </g>
			                    <g id="Remote" transform="translate(379.000000, 53.000000)">
			                        <path d="M32.9,116.8 C32.9,120.5 29.9,123.4 26.3,123.4 L7.3,123.4 C3.6,123.4 0.7,120.4 0.7,116.8 L0.7,6.8 C0.7,3.1 3.7,0.2 7.3,0.2 L26.3,0.2 C30,0.2 32.9,3.2 32.9,6.8 L32.9,116.8 L32.9,116.8 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                        <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#FFFFFF" cx="16.8" cy="26" r="11.3"></circle>
			                        <circle id="Oval" fill="#D9A128" cx="16.8" cy="26.4" r="5.3"></circle>
			                        <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#FFFFFF" cx="9.4" cy="44.9" r="5"></circle>
			                        <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#FFFFFF" cx="24.1" cy="44.9" r="5"></circle>
			                    </g>
			                </g>
			                <g id="Dairy" transform="translate(15.000000, 326.000000)">
			                    <path d="M0.5,0.7 L0.5,164 L105.2,164 C113.3,164 118,152.9 118,146.2 L118,109.2 L118,39.4 C118,34.2 118.2,29.1 118.2,23.9 C118.2,19.8 118.7,15.3 116.9,11.6 C114.2,6.2 109.2,0.6 102.8,0.6 C102.7,0.7 0.5,0.7 0.5,0.7 L0.5,0.7 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <path d="M15.8,1.3 L15.8,163.7" id="Shape" stroke="#D9A128" stroke-width="3"></path>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="2" fill="#FCF5EA" x="88.5" y="0.7" width="14.2" height="163"></rect>
			                    <polygon id="Shape" fill="#D9A128" points="23.5 163.7 23.5 188.7 36 180.7 36 162.7"></polygon>
			                </g>
			                <g id="camera" transform="translate(671.000000, 165.000000)">
			                    <path d="M79.4,0.7 C79.4,0.7 83.1,0.6 84.6,7.1 C84.6,7.1 90.4,7.2 92.2,11.3 L92.2,61.9 C92.2,61.9 92.5,70.4 86.7,74.5 L86.7,78.5 L17.9,78.5 L17.9,75.5 C17.9,75.5 13.9,70.8 12.2,64.3 L12.2,10.8 C12.2,10.8 15.2,6 20.4,7.1 C20.4,7.1 21.8,1.2 25.9,0.7" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <path d="M18.2,78.5 L86.2,78.5 C86.2,78.5 88.9,79.1 89.9,82.9 L14.1,82.9 C14.1,82.8 14.6,79.4 18.2,78.5 L18.2,78.5 Z" id="Shape" fill="#D9A128"></path>
			                    <path d="M14.1,82.7 L14.1,87.3 L7.2,87.3 C7.2,87.3 4.5,88.2 4.7,90.1 L4.7,97.7 C4.7,97.7 1.4,101.5 0.9,104.8 L0.9,130.2 C0.9,132.7 1.2,134.7 2.6,136.9 C3.6,138.5 5,139.9 6.5,141 C9.7,143.3 13,143.3 16.8,143.3 C16.8,143.3 18.6,148.3 21,148.6 L30.2,148.6 C30.2,148.6 31.8,152 34.3,152.8 L70,152.8 C70,152.8 73,151.9 73.7,148.9 L92.7,148.9 C92.7,148.9 96.7,146.5 95.5,143.3 L120.9,143.3 C125,143.3 129.3,143.5 133.1,141.9 C137.1,140.2 142.3,136.2 142.5,131.8 L140.5,102.2 C140.5,102.2 137,75.6 124.6,70.2 C122.4,69.3 120.1,68.7 117.7,68.8 C111.9,69.1 107.7,74.4 107,79.9 C106.5,84.2 105.1,90.2 100.6,92 C100.2,92.2 99.7,92.3 99.2,92.4 L89.7,92.4 L89.7,82.2 L14.1,82.7 L14.1,82.7 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <rect id="Rectangle-path" fill="#D9A128" x="17.8" y="76.8" width="68.9" height="3.2"></rect>
			                    <path d="M33.8,82.2 L30.4,144.2 C30.4,144.2 31.4,147.3 33.8,147.9 L70.9,147.9 C70.9,147.9 73.9,146.7 73.6,144.2 L69.9,82.2 C69.9,82.2 67.7,75.5 63.5,75.1 L41.7,75.1 C41.6,75.1 35.7,75.8 33.8,82.2 L33.8,82.2 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <path d="M71.4,92.2 L95.9,92.2 C99.5,92.2 101.9,92.4 104.5,89.5 C108.9,84.4 107.2,76.6 112.2,71.7 C117.1,66.9 125.8,68.9 130.3,73.3 C132.7,75.6 134.5,78.7 136,81.7 C140.2,90 141.6,99.2 141.6,108.4 L141.6,123.1 L141.6,130.3 C141.6,131.8 141.9,133.4 141.2,134.7 C138.9,139.3 132.4,140.4 127.9,140.1 L73.9,140.1 C73.8,140.1 71.4,92.2 71.4,92.2 L71.4,92.2 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <path d="M32.2,92.9 L30.3,140.1 C26.9,140.2 23.4,140.3 20,140.5 C17.7,140.6 15.5,140.7 13.2,140.7 C6.7,140.9 1.7,134.9 0.6,128.7 C0.6,123.5 0.5,118.3 0.5,113.2 C0.5,109.9 0.1,106.3 1,103.1 C1.9,100.4 3.4,97.8 5.6,95.9 C9.9,92.2 15.8,92.9 21,92.9 C24.8,92.9 28.5,92.9 32.2,92.9 L32.2,92.9 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#ECCA8D"></path>
			                    <path d="M64.5,136.5 C64.5,138.8 62.6,140.7 60.3,140.7 L43.7,140.7 C41.4,140.7 39.5,138.8 39.5,136.5 L39.5,129.5 C39.5,127.2 41.4,125.3 43.7,125.3 L60.3,125.3 C62.6,125.3 64.5,127.2 64.5,129.5 L64.5,136.5 L64.5,136.5 Z" id="Shape" stroke="#D9A128" stroke-width="2" fill="#FCF5EA"></path>
			                    <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#FFFFFF" cx="119.8" cy="84" r="5.7"></circle>
			                    <path d="M124.7,131.6 C124.7,134.2 122.8,136.3 120.5,136.3 L87.3,136.3 C85,136.3 83.1,134.2 83.1,131.6 L83.1,124.1 C83.1,121.5 85,119.4 87.3,119.4 L120.5,119.4 C122.8,119.4 124.7,121.5 124.7,124.1 L124.7,131.6 L124.7,131.6 Z" id="Shape" stroke="#D9A128" stroke-width="2" fill="#FFFFFF"></path>
			                    <circle id="Oval" stroke="#D9A128" fill="#FFFFFF" cx="111.7" cy="94.3" r="3.7"></circle>
			                    <circle id="Oval" stroke="#D9A128" fill="#FCF5EA" cx="128.7" cy="94.3" r="3.7"></circle>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="3" fill="#FCF5EA" x="12.2" y="12.7" width="80" height="36"></rect>
			                    <g id="Group" transform="translate(15.000000, 20.000000)" fill="#D9A128">
			                        <rect id="Rectangle-path" x="0.7" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="4.1" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="7.5" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="10.9" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="14.3" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="17.7" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="21.1" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="24.5" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="27.9" y="0" width="1.9" height="19.1"></rect>
			                    </g>
			                    <g id="Group" transform="translate(46.000000, 20.000000)" fill="#D9A128">
			                        <rect id="Rectangle-path" x="0.3" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="3.7" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="7.1" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="10.5" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="13.9" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="17.3" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="20.7" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="24.1" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="27.5" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="30.9" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="34.3" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="37.7" y="0" width="1.9" height="19.1"></rect>
			                        <rect id="Rectangle-path" x="41.1" y="0" width="1.9" height="19.1"></rect>
			                    </g>
			                    <g id="Group" transform="translate(1.000000, 109.000000)">
			                        <path d="M0.3,1.5 C5.5,1.5 9.6,5.7 9.6,10.8 C9.6,16 5.4,20.1 0.3,20.1" id="Shape" fill="#D9A128"></path>
			                        <rect id="Rectangle-path" stroke="#D9A128" fill="#FFFFFF" x="1.9" y="0.4" width="2.5" height="21.4"></rect>
			                    </g>
			                    <rect id="Rectangle-path" fill="#D9A128" x="12.2" y="11" width="80" height="2.2"></rect>
			                    <g id="Group" transform="translate(130.000000, 109.000000)">
			                        <path d="M10.2,1.5 C5,1.5 0.9,5.7 0.9,10.8 C0.9,16 5.1,20.1 10.2,20.1" id="Shape" fill="#D9A128"></path>
			                        <rect id="Rectangle-path" stroke="#D9A128" fill="#FFFFFF" x="5.3" y="0.4" width="3.1" height="21.4"></rect>
			                    </g>
			                    <path d="M26.7,0.3 L80,0.3" id="Shape" stroke="#D9A128" stroke-width="3" fill="#D9A128"></path>
			                </g>
			                <g id="coffee" transform="translate(426.000000, 155.000000)">
			                    <path d="M91.8,66.6 C89.8,68.4 87.4,69.8 84.8,70.9 C71.9,76.1 57.2,69.9 52,57 C46.8,44.1 53,29.4 65.9,24.2 C78.8,19 93.5,25.2 98.7,38.1 C100.6,42.9 101,47.9 100,52.6" id="Shape" stroke="#D9A128"></path>
			                    <path d="M3,36.2 L15.2,36.2 C16.6,36.2 17.8,35 17.8,33.6 L17.8,25.6 C17.8,24.2 16.6,23 15.2,23 L3,23 C1.6,23 0.4,24.2 0.4,25.6 L0.4,33.6 C0.4,35 1.6,36.2 3,36.2 L3,36.2 Z" id="Handle" stroke="#D9A128" stroke-width="2" fill="#FFFFFF"></path>
			                    <circle id="Oval" fill="#D9A128" cx="99.7" cy="57.8" r="2.2"></circle>
			                    <circle id="Oval" fill="#D9A128" cx="99.4" cy="64.4" r="1.4"></circle>
			                    <circle id="Oval" stroke="#D9A128" stroke-width="3" fill="#FFFFFF" cx="50.5" cy="35.1" r="34.8"></circle>
			                    <circle id="Oval" stroke="#D9A128" stroke-width="2" fill="#ECCA8D" cx="50.5" cy="35.1" r="27.8"></circle>
			                    <path d="M39.5,10.4 C37.7,10.9 36.1,11.8 34.7,12.9 C29,17 24.1,22.9 22.7,30 C21.9,34.1 22.5,38.4 23.9,42.2 C24.6,44.2 25.5,46.1 26.6,47.9 C27.1,48.8 27.7,49.6 28.3,50.4 C29.7,52.3 32.6,49.3 33.8,48.4 C34.9,47.6 36.1,46.8 37.1,45.8 C40,43 41.2,40.6 40.5,36.6 C40,33.3 36.2,30.1 38.2,26.7 C39.8,23.7 43.6,22.6 46.6,21.6 C48,21.2 49.4,20.5 49.8,18.9 C50.4,15.9 48,12.2 45.5,10.8 C43.6,10 41.5,9.9 39.5,10.4 L39.5,10.4 Z" id="Shape" stroke="#D9A128" stroke-width="2" fill="#FCF5EA"></path>
			                </g>
			                <g id="notes_1_" transform="translate(397.000000, 30.000000)">
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="3" fill="#FCF5EA" x="0.6" y="2.7" width="57" height="84.8"></rect>
			                    <g id="lines" transform="translate(1.000000, 19.000000)" stroke="#D9A128">
			                        <path d="M0.8,8.3 L56.6,8.3" id="Shape"></path>
			                        <path d="M0.8,16.3 L56.6,16.3" id="Shape"></path>
			                        <path d="M0.8,24.3 L56.6,24.3" id="Shape"></path>
			                        <path d="M0.8,32.3 L56.6,32.3" id="Shape"></path>
			                        <path d="M0.8,40.3 L56.6,40.3" id="Shape"></path>
			                        <path d="M0.8,48.3 L56.6,48.3" id="Shape"></path>
			                        <path d="M0.8,56.3 L56.6,56.3" id="Shape"></path>
			                    </g>
			                    <g id="Group" transform="translate(6.000000, 8.000000)" fill="#D9A128">
			                        <rect id="Rectangle-path" x="0.1" y="0" width="4.8" height="4.1"></rect>
			                        <rect id="Rectangle-path" x="9.9" y="0" width="4.8" height="4.1"></rect>
			                        <rect id="Rectangle-path" x="20.3" y="0" width="4.8" height="4.1"></rect>
			                        <rect id="Rectangle-path" x="30.1" y="0" width="4.8" height="4.1"></rect>
			                        <rect id="Rectangle-path" x="40.2" y="0" width="4.8" height="4.1"></rect>
			                    </g>
			                    <g id="Group" transform="translate(4.000000, 0.000000)" stroke="#D9A128" stroke-width="2">
			                        <path d="M6,11 C3.2,11 0.9,8.7 0.9,5.9 C0.9,3.1 3.2,0.8 6,0.8" id="Shape"></path>
			                        <path d="M15.8,11 C13,11 10.7,8.7 10.7,5.9 C10.7,3.1 13,0.8 15.8,0.8" id="Shape"></path>
			                        <path d="M26.2,11 C23.4,11 21.1,8.7 21.1,5.9 C21.1,3.1 23.4,0.8 26.2,0.8" id="Shape"></path>
			                        <path d="M36,11 C33.2,11 30.9,8.7 30.9,5.9 C30.9,3.1 33.2,0.8 36,0.8" id="Shape"></path>
			                        <path d="M46.3,11 C43.5,11 41.2,8.7 41.2,5.9 C41.2,3.1 43.5,0.8 46.3,0.8" id="Shape"></path>
			                    </g>
			                </g>
			                <g id="pendrive" transform="translate(406.000000, 281.000000)">
			                    <polygon id="Shape" stroke="#D9A128" stroke-width="2" fill="#ECCA8D" points="24.6 0.9 94.9 0.9 94.9 34.4 25.1 34.4 19.8 30.5 19.8 5.7"></polygon>
			                    <path d="M144.3,17.6 C144.3,26.2 137.2,33.2 128.4,33.2 L73.4,33.2 C64.6,33.2 57.5,26.2 57.5,17.6 L57.5,17.6 C57.5,9 64.6,2 73.4,2 L128.4,2 C137.2,2 144.3,9 144.3,17.6 L144.3,17.6 L144.3,17.6 Z" id="Shape" stroke="#D9A128" stroke-width="3" fill="#FCF5EA"></path>
			                    <polyline id="Shape" stroke="#D9A128" stroke-width="3" fill="#FCF5EA" points="93.9 2.1 159.2 2.1 159.2 33.2 93.9 33.2"></polyline>
			                    <circle id="Oval" fill="#D9A128" cx="74.7" cy="17.3" r="11.7"></circle>
			                    <rect id="Rectangle-path" stroke="#D9A128" stroke-width="2" fill="#FCF5EA" x="0.8" y="8.6" width="19" height="19"></rect>
			                    <rect id="Rectangle-path" stroke="#D9A128" fill="#FFFFFF" x="8.3" y="11.9" width="3.8" height="4"></rect>
			                    <rect id="Rectangle-path" stroke="#D9A128" fill="#FFFFFF" x="8.3" y="20.5" width="3.8" height="4"></rect>
			                </g>
			                <g id="mac" transform="translate(0.000000, 71.000000)">
			                    <g id="Group">
			                        <path d="M281.3,162.5 C281.3,164.7 279.5,166.5 277.3,166.5 L4.3,166.5 C2.1,166.5 0.3,164.7 0.3,162.5 L0.3,4.8 C0.3,2.6 2.1,0.8 4.3,0.8 L277.3,0.8 C279.5,0.8 281.3,2.6 281.3,4.8 L281.3,162.5 L281.3,162.5 Z" id="Shape" fill="#ECCA8D"></path>
			                        <path d="M281.3,162.5 C281.3,164.7 279.5,166.5 277.3,166.5 L4.3,166.5 C2.1,166.5 0.3,164.7 0.3,162.5 L0.3,4.8 C0.3,2.6 2.1,0.8 4.3,0.8 L277.3,0.8 C279.5,0.8 281.3,2.6 281.3,4.8 L281.3,162.5 L281.3,162.5 Z" id="Shape" stroke="#D9A128" stroke-width="3"></path>
			                    </g>
			                    <g id="apple_logo_1_" transform="translate(129.000000, 69.000000)" fill="#D9A128">
			                        <path d="M22.4,10.5 C22.4,10.5 15.4,15.7 23.2,21.5 C23.2,21.5 20.7,28.7 17,28.9 C17,28.9 14.8,28.4 13.7,27.9 C13.7,27.9 11.4,27.3 9,28.9 C9,28.9 6.2,29 5.7,28 C5.7,28 2,24.9 0.8,19 C0.8,19 -1.4,11.2 5.4,8.1 C5.4,8.1 7.5,7 11.2,8.8 C11.2,8.8 12.9,9.1 15.4,8 C15.3,8.1 18.9,6.4 22.4,10.5 L22.4,10.5 Z" id="Shape"></path>
			                        <path d="M11.1,7.4 C11.1,7.4 10.6,1.6 17.2,0.3 C17.1,0.3 18.4,6.4 11.1,7.4 L11.1,7.4 Z" id="Shape"></path>
			                    </g>
			                </g>
			                <g id="mouse" transform="translate(311.000000, 145.000000)">
			                    <g id="Group">
			                        <path d="M42.7,67.5 C42.7,79.1 33.3,88.4 21.8,88.4 L21.8,88.4 C10.2,88.4 0.9,79 0.9,67.5 L0.9,21.5 C0.9,9.9 10.3,0.6 21.8,0.6 L21.8,0.6 L22.8,0.6 C33.9,1.1 42.7,10.3 42.7,21.5 L42.7,67.5 L42.7,67.5 Z" id="Shape" fill="#FCF5EA"></path>
			                        <path d="M42.7,67.5 C42.7,79.1 33.3,88.4 21.8,88.4 L21.8,88.4 C10.2,88.4 0.9,79 0.9,67.5 L0.9,21.5 C0.9,9.9 10.3,0.6 21.8,0.6 L21.8,0.6 L22.8,0.6 C33.9,1.1 42.7,10.3 42.7,21.5 L42.7,67.5 L42.7,67.5 Z" id="Shape" stroke="#D9A128" stroke-width="3"></path>
			                    </g>
			                    <g id="apple_logo_2_" transform="translate(15.000000, 55.000000)" fill="#D9A128">
			                        <path d="M12.6,6.5 C12.6,6.5 8.7,9.4 13.1,12.6 C13.1,12.6 11.7,16.6 9.7,16.7 C9.7,16.7 8.5,16.4 7.8,16.2 C7.8,16.2 6.5,15.9 5.2,16.8 C5.2,16.8 3.6,16.9 3.4,16.3 C3.4,16.3 1.3,14.6 0.6,11.3 C0.6,11.3 -0.6,7 3.1,5.3 C3.1,5.3 4.3,4.7 6.3,5.6 C6.3,5.6 7.2,5.8 8.6,5.2 C8.6,5.2 10.6,4.3 12.6,6.5 L12.6,6.5 Z" id="Shape"></path>
			                        <path d="M6.3,4.8 C6.3,4.8 6,1.6 9.6,0.8 C9.6,0.9 10.3,4.3 6.3,4.8 L6.3,4.8 Z" id="Shape"></path>
			                    </g>
			                </g>
			            </g>
			        </g>
			    </g>
			</svg>
	  	</section>
	</section>
		
	<!-- Chart -->
	<section class="page-container" id="chart">
	  	<section class="section-container">
		  	<h4>Chart</h4>
			<svg width="750px" height="400px" viewBox="0 400 750 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <g id="Daily-UI-004" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			        <g id="Chart">
			            <text id="+-106.11-(20.43%)-PA" font-family=".HelveticaNeueDeskInterface-Regular, SFNS Display" font-size="28" font-weight="normal">
			                <tspan x="184" y="326" fill="#21CE99" id="chart-index">+ 106.11 (0%)</tspan>
			                <tspan x="420" y="326" font-family=".HelveticaNeueDeskInterface-UltraLightP2, SFNS Display" font-weight="200" fill="#59737C">PAST MONTH</tspan>
			            </text>
			            <path class="chart-trend" d="M11.3287035,716.379576 C12.1571307,716.379576 12.8287035,715.708003 12.8287035,714.879576 C12.8287035,714.051149 12.1571307,713.379576 11.3287035,713.379576 C10.5002764,713.379576 9.82870353,714.051149 9.82870353,714.879576 C9.82870353,715.708003 10.5002764,716.379576 11.3287035,716.379576 Z M21.3287035,716.379576 C22.1571307,716.379576 22.8287035,715.708003 22.8287035,714.879576 C22.8287035,714.051149 22.1571307,713.379576 21.3287035,713.379576 C20.5002764,713.379576 19.8287035,714.051149 19.8287035,714.879576 C19.8287035,715.708003 20.5002764,716.379576 21.3287035,716.379576 Z M31.3287035,716.379576 C32.1571307,716.379576 32.8287035,715.708003 32.8287035,714.879576 C32.8287035,714.051149 32.1571307,713.379576 31.3287035,713.379576 C30.5002764,713.379576 29.8287035,714.051149 29.8287035,714.879576 C29.8287035,715.708003 30.5002764,716.379576 31.3287035,716.379576 Z M41.3287035,716.379576 C42.1571307,716.379576 42.8287035,715.708003 42.8287035,714.879576 C42.8287035,714.051149 42.1571307,713.379576 41.3287035,713.379576 C40.5002764,713.379576 39.8287035,714.051149 39.8287035,714.879576 C39.8287035,715.708003 40.5002764,716.379576 41.3287035,716.379576 Z M51.3287035,716.379576 C52.1571307,716.379576 52.8287035,715.708003 52.8287035,714.879576 C52.8287035,714.051149 52.1571307,713.379576 51.3287035,713.379576 C50.5002764,713.379576 49.8287035,714.051149 49.8287035,714.879576 C49.8287035,715.708003 50.5002764,716.379576 51.3287035,716.379576 Z M61.3287035,716.379576 C62.1571307,716.379576 62.8287035,715.708003 62.8287035,714.879576 C62.8287035,714.051149 62.1571307,713.379576 61.3287035,713.379576 C60.5002764,713.379576 59.8287035,714.051149 59.8287035,714.879576 C59.8287035,715.708003 60.5002764,716.379576 61.3287035,716.379576 Z M71.3287035,716.379576 C72.1571307,716.379576 72.8287035,715.708003 72.8287035,714.879576 C72.8287035,714.051149 72.1571307,713.379576 71.3287035,713.379576 C70.5002764,713.379576 69.8287035,714.051149 69.8287035,714.879576 C69.8287035,715.708003 70.5002764,716.379576 71.3287035,716.379576 Z M81.3287035,716.379576 C82.1571307,716.379576 82.8287035,715.708003 82.8287035,714.879576 C82.8287035,714.051149 82.1571307,713.379576 81.3287035,713.379576 C80.5002764,713.379576 79.8287035,714.051149 79.8287035,714.879576 C79.8287035,715.708003 80.5002764,716.379576 81.3287035,716.379576 Z M91.3287035,716.379576 C92.1571307,716.379576 92.8287035,715.708003 92.8287035,714.879576 C92.8287035,714.051149 92.1571307,713.379576 91.3287035,713.379576 C90.5002764,713.379576 89.8287035,714.051149 89.8287035,714.879576 C89.8287035,715.708003 90.5002764,716.379576 91.3287035,716.379576 Z M101.328704,716.379576 C102.157131,716.379576 102.828704,715.708003 102.828704,714.879576 C102.828704,714.051149 102.157131,713.379576 101.328704,713.379576 C100.500276,713.379576 99.8287035,714.051149 99.8287035,714.879576 C99.8287035,715.708003 100.500276,716.379576 101.328704,716.379576 Z M111.328704,716.379576 C112.157131,716.379576 112.828704,715.708003 112.828704,714.879576 C112.828704,714.051149 112.157131,713.379576 111.328704,713.379576 C110.500276,713.379576 109.828704,714.051149 109.828704,714.879576 C109.828704,715.708003 110.500276,716.379576 111.328704,716.379576 Z M121.328704,716.379576 C122.157131,716.379576 122.828704,715.708003 122.828704,714.879576 C122.828704,714.051149 122.157131,713.379576 121.328704,713.379576 C120.500276,713.379576 119.828704,714.051149 119.828704,714.879576 C119.828704,715.708003 120.500276,716.379576 121.328704,716.379576 Z M131.328704,716.379576 C132.157131,716.379576 132.828704,715.708003 132.828704,714.879576 C132.828704,714.051149 132.157131,713.379576 131.328704,713.379576 C130.500276,713.379576 129.828704,714.051149 129.828704,714.879576 C129.828704,715.708003 130.500276,716.379576 131.328704,716.379576 Z M141.328704,716.379576 C142.157131,716.379576 142.828704,715.708003 142.828704,714.879576 C142.828704,714.051149 142.157131,713.379576 141.328704,713.379576 C140.500276,713.379576 139.828704,714.051149 139.828704,714.879576 C139.828704,715.708003 140.500276,716.379576 141.328704,716.379576 Z M151.328704,716.379576 C152.157131,716.379576 152.828704,715.708003 152.828704,714.879576 C152.828704,714.051149 152.157131,713.379576 151.328704,713.379576 C150.500276,713.379576 149.828704,714.051149 149.828704,714.879576 C149.828704,715.708003 150.500276,716.379576 151.328704,716.379576 Z M161.328704,716.379576 C162.157131,716.379576 162.828704,715.708003 162.828704,714.879576 C162.828704,714.051149 162.157131,713.379576 161.328704,713.379576 C160.500276,713.379576 159.828704,714.051149 159.828704,714.879576 C159.828704,715.708003 160.500276,716.379576 161.328704,716.379576 Z M171.328704,716.379576 C172.157131,716.379576 172.828704,715.708003 172.828704,714.879576 C172.828704,714.051149 172.157131,713.379576 171.328704,713.379576 C170.500276,713.379576 169.828704,714.051149 169.828704,714.879576 C169.828704,715.708003 170.500276,716.379576 171.328704,716.379576 Z M181.328704,716.379576 C182.157131,716.379576 182.828704,715.708003 182.828704,714.879576 C182.828704,714.051149 182.157131,713.379576 181.328704,713.379576 C180.500276,713.379576 179.828704,714.051149 179.828704,714.879576 C179.828704,715.708003 180.500276,716.379576 181.328704,716.379576 Z M191.328704,716.379576 C192.157131,716.379576 192.828704,715.708003 192.828704,714.879576 C192.828704,714.051149 192.157131,713.379576 191.328704,713.379576 C190.500276,713.379576 189.828704,714.051149 189.828704,714.879576 C189.828704,715.708003 190.500276,716.379576 191.328704,716.379576 Z M201.328704,716.379576 C202.157131,716.379576 202.828704,715.708003 202.828704,714.879576 C202.828704,714.051149 202.157131,713.379576 201.328704,713.379576 C200.500276,713.379576 199.828704,714.051149 199.828704,714.879576 C199.828704,715.708003 200.500276,716.379576 201.328704,716.379576 Z M211.328704,716.379576 C212.157131,716.379576 212.828704,715.708003 212.828704,714.879576 C212.828704,714.051149 212.157131,713.379576 211.328704,713.379576 C210.500276,713.379576 209.828704,714.051149 209.828704,714.879576 C209.828704,715.708003 210.500276,716.379576 211.328704,716.379576 Z M221.328704,716.379576 C222.157131,716.379576 222.828704,715.708003 222.828704,714.879576 C222.828704,714.051149 222.157131,713.379576 221.328704,713.379576 C220.500276,713.379576 219.828704,714.051149 219.828704,714.879576 C219.828704,715.708003 220.500276,716.379576 221.328704,716.379576 Z M231.328704,716.379576 C232.157131,716.379576 232.828704,715.708003 232.828704,714.879576 C232.828704,714.051149 232.157131,713.379576 231.328704,713.379576 C230.500276,713.379576 229.828704,714.051149 229.828704,714.879576 C229.828704,715.708003 230.500276,716.379576 231.328704,716.379576 Z M241.328704,716.379576 C242.157131,716.379576 242.828704,715.708003 242.828704,714.879576 C242.828704,714.051149 242.157131,713.379576 241.328704,713.379576 C240.500276,713.379576 239.828704,714.051149 239.828704,714.879576 C239.828704,715.708003 240.500276,716.379576 241.328704,716.379576 Z M251.328704,716.379576 C252.157131,716.379576 252.828704,715.708003 252.828704,714.879576 C252.828704,714.051149 252.157131,713.379576 251.328704,713.379576 C250.500276,713.379576 249.828704,714.051149 249.828704,714.879576 C249.828704,715.708003 250.500276,716.379576 251.328704,716.379576 Z M261.328704,716.379576 C262.157131,716.379576 262.828704,715.708003 262.828704,714.879576 C262.828704,714.051149 262.157131,713.379576 261.328704,713.379576 C260.500276,713.379576 259.828704,714.051149 259.828704,714.879576 C259.828704,715.708003 260.500276,716.379576 261.328704,716.379576 Z M271.328704,716.379576 C272.157131,716.379576 272.828704,715.708003 272.828704,714.879576 C272.828704,714.051149 272.157131,713.379576 271.328704,713.379576 C270.500276,713.379576 269.828704,714.051149 269.828704,714.879576 C269.828704,715.708003 270.500276,716.379576 271.328704,716.379576 Z M281.328704,716.379576 C282.157131,716.379576 282.828704,715.708003 282.828704,714.879576 C282.828704,714.051149 282.157131,713.379576 281.328704,713.379576 C280.500276,713.379576 279.828704,714.051149 279.828704,714.879576 C279.828704,715.708003 280.500276,716.379576 281.328704,716.379576 Z M291.328704,716.379576 C292.157131,716.379576 292.828704,715.708003 292.828704,714.879576 C292.828704,714.051149 292.157131,713.379576 291.328704,713.379576 C290.500276,713.379576 289.828704,714.051149 289.828704,714.879576 C289.828704,715.708003 290.500276,716.379576 291.328704,716.379576 Z M300.328704,716.379576 C301.157131,716.379576 301.828704,715.708003 301.828704,714.879576 C301.828704,714.051149 301.157131,713.379576 300.328704,713.379576 C299.500276,713.379576 298.828704,714.051149 298.828704,714.879576 C298.828704,715.708003 299.500276,716.379576 300.328704,716.379576 Z M310.328704,716.379576 C311.157131,716.379576 311.828704,715.708003 311.828704,714.879576 C311.828704,714.051149 311.157131,713.379576 310.328704,713.379576 C309.500276,713.379576 308.828704,714.051149 308.828704,714.879576 C308.828704,715.708003 309.500276,716.379576 310.328704,716.379576 Z M320.328704,716.379576 C321.157131,716.379576 321.828704,715.708003 321.828704,714.879576 C321.828704,714.051149 321.157131,713.379576 320.328704,713.379576 C319.500276,713.379576 318.828704,714.051149 318.828704,714.879576 C318.828704,715.708003 319.500276,716.379576 320.328704,716.379576 Z M330.328704,716.379576 C331.157131,716.379576 331.828704,715.708003 331.828704,714.879576 C331.828704,714.051149 331.157131,713.379576 330.328704,713.379576 C329.500276,713.379576 328.828704,714.051149 328.828704,714.879576 C328.828704,715.708003 329.500276,716.379576 330.328704,716.379576 Z M340.328704,716.379576 C341.157131,716.379576 341.828704,715.708003 341.828704,714.879576 C341.828704,714.051149 341.157131,713.379576 340.328704,713.379576 C339.500276,713.379576 338.828704,714.051149 338.828704,714.879576 C338.828704,715.708003 339.500276,716.379576 340.328704,716.379576 Z M350.328704,716.379576 C351.157131,716.379576 351.828704,715.708003 351.828704,714.879576 C351.828704,714.051149 351.157131,713.379576 350.328704,713.379576 C349.500276,713.379576 348.828704,714.051149 348.828704,714.879576 C348.828704,715.708003 349.500276,716.379576 350.328704,716.379576 Z M360.328704,716.379576 C361.157131,716.379576 361.828704,715.708003 361.828704,714.879576 C361.828704,714.051149 361.157131,713.379576 360.328704,713.379576 C359.500276,713.379576 358.828704,714.051149 358.828704,714.879576 C358.828704,715.708003 359.500276,716.379576 360.328704,716.379576 Z M370.328704,716.379576 C371.157131,716.379576 371.828704,715.708003 371.828704,714.879576 C371.828704,714.051149 371.157131,713.379576 370.328704,713.379576 C369.500276,713.379576 368.828704,714.051149 368.828704,714.879576 C368.828704,715.708003 369.500276,716.379576 370.328704,716.379576 Z M380.328704,716.379576 C381.157131,716.379576 381.828704,715.708003 381.828704,714.879576 C381.828704,714.051149 381.157131,713.379576 380.328704,713.379576 C379.500276,713.379576 378.828704,714.051149 378.828704,714.879576 C378.828704,715.708003 379.500276,716.379576 380.328704,716.379576 Z M390.328704,716.379576 C391.157131,716.379576 391.828704,715.708003 391.828704,714.879576 C391.828704,714.051149 391.157131,713.379576 390.328704,713.379576 C389.500276,713.379576 388.828704,714.051149 388.828704,714.879576 C388.828704,715.708003 389.500276,716.379576 390.328704,716.379576 Z M400.328704,716.379576 C401.157131,716.379576 401.828704,715.708003 401.828704,714.879576 C401.828704,714.051149 401.157131,713.379576 400.328704,713.379576 C399.500276,713.379576 398.828704,714.051149 398.828704,714.879576 C398.828704,715.708003 399.500276,716.379576 400.328704,716.379576 Z M410.328704,716.379576 C411.157131,716.379576 411.828704,715.708003 411.828704,714.879576 C411.828704,714.051149 411.157131,713.379576 410.328704,713.379576 C409.500276,713.379576 408.828704,714.051149 408.828704,714.879576 C408.828704,715.708003 409.500276,716.379576 410.328704,716.379576 Z M420.328704,716.379576 C421.157131,716.379576 421.828704,715.708003 421.828704,714.879576 C421.828704,714.051149 421.157131,713.379576 420.328704,713.379576 C419.500276,713.379576 418.828704,714.051149 418.828704,714.879576 C418.828704,715.708003 419.500276,716.379576 420.328704,716.379576 Z M430.328704,716.379576 C431.157131,716.379576 431.828704,715.708003 431.828704,714.879576 C431.828704,714.051149 431.157131,713.379576 430.328704,713.379576 C429.500276,713.379576 428.828704,714.051149 428.828704,714.879576 C428.828704,715.708003 429.500276,716.379576 430.328704,716.379576 Z M440.328704,716.379576 C441.157131,716.379576 441.828704,715.708003 441.828704,714.879576 C441.828704,714.051149 441.157131,713.379576 440.328704,713.379576 C439.500276,713.379576 438.828704,714.051149 438.828704,714.879576 C438.828704,715.708003 439.500276,716.379576 440.328704,716.379576 Z M450.328704,716.379576 C451.157131,716.379576 451.828704,715.708003 451.828704,714.879576 C451.828704,714.051149 451.157131,713.379576 450.328704,713.379576 C449.500276,713.379576 448.828704,714.051149 448.828704,714.879576 C448.828704,715.708003 449.500276,716.379576 450.328704,716.379576 Z M460.328704,716.379576 C461.157131,716.379576 461.828704,715.708003 461.828704,714.879576 C461.828704,714.051149 461.157131,713.379576 460.328704,713.379576 C459.500276,713.379576 458.828704,714.051149 458.828704,714.879576 C458.828704,715.708003 459.500276,716.379576 460.328704,716.379576 Z M470.328704,716.379576 C471.157131,716.379576 471.828704,715.708003 471.828704,714.879576 C471.828704,714.051149 471.157131,713.379576 470.328704,713.379576 C469.500276,713.379576 468.828704,714.051149 468.828704,714.879576 C468.828704,715.708003 469.500276,716.379576 470.328704,716.379576 Z M480.328704,716.379576 C481.157131,716.379576 481.828704,715.708003 481.828704,714.879576 C481.828704,714.051149 481.157131,713.379576 480.328704,713.379576 C479.500276,713.379576 478.828704,714.051149 478.828704,714.879576 C478.828704,715.708003 479.500276,716.379576 480.328704,716.379576 Z M489.328704,716.379576 C490.157131,716.379576 490.828704,715.708003 490.828704,714.879576 C490.828704,714.051149 490.157131,713.379576 489.328704,713.379576 C488.500276,713.379576 487.828704,714.051149 487.828704,714.879576 C487.828704,715.708003 488.500276,716.379576 489.328704,716.379576 Z M500.328704,716.379576 C501.157131,716.379576 501.828704,715.708003 501.828704,714.879576 C501.828704,714.051149 501.157131,713.379576 500.328704,713.379576 C499.500276,713.379576 498.828704,714.051149 498.828704,714.879576 C498.828704,715.708003 499.500276,716.379576 500.328704,716.379576 Z M510.328704,716.379576 C511.157131,716.379576 511.828704,715.708003 511.828704,714.879576 C511.828704,714.051149 511.157131,713.379576 510.328704,713.379576 C509.500276,713.379576 508.828704,714.051149 508.828704,714.879576 C508.828704,715.708003 509.500276,716.379576 510.328704,716.379576 Z M520.328704,716.379576 C521.157131,716.379576 521.828704,715.708003 521.828704,714.879576 C521.828704,714.051149 521.157131,713.379576 520.328704,713.379576 C519.500276,713.379576 518.828704,714.051149 518.828704,714.879576 C518.828704,715.708003 519.500276,716.379576 520.328704,716.379576 Z M530.328704,716.379576 C531.157131,716.379576 531.828704,715.708003 531.828704,714.879576 C531.828704,714.051149 531.157131,713.379576 530.328704,713.379576 C529.500276,713.379576 528.828704,714.051149 528.828704,714.879576 C528.828704,715.708003 529.500276,716.379576 530.328704,716.379576 Z M540.328704,716.379576 C541.157131,716.379576 541.828704,715.708003 541.828704,714.879576 C541.828704,714.051149 541.157131,713.379576 540.328704,713.379576 C539.500276,713.379576 538.828704,714.051149 538.828704,714.879576 C538.828704,715.708003 539.500276,716.379576 540.328704,716.379576 Z M549.328704,716.379576 C550.157131,716.379576 550.828704,715.708003 550.828704,714.879576 C550.828704,714.051149 550.157131,713.379576 549.328704,713.379576 C548.500276,713.379576 547.828704,714.051149 547.828704,714.879576 C547.828704,715.708003 548.500276,716.379576 549.328704,716.379576 Z M559.328704,716.379576 C560.157131,716.379576 560.828704,715.708003 560.828704,714.879576 C560.828704,714.051149 560.157131,713.379576 559.328704,713.379576 C558.500276,713.379576 557.828704,714.051149 557.828704,714.879576 C557.828704,715.708003 558.500276,716.379576 559.328704,716.379576 Z M569.328704,716.379576 C570.157131,716.379576 570.828704,715.708003 570.828704,714.879576 C570.828704,714.051149 570.157131,713.379576 569.328704,713.379576 C568.500276,713.379576 567.828704,714.051149 567.828704,714.879576 C567.828704,715.708003 568.500276,716.379576 569.328704,716.379576 Z M579.328704,716.379576 C580.157131,716.379576 580.828704,715.708003 580.828704,714.879576 C580.828704,714.051149 580.157131,713.379576 579.328704,713.379576 C578.500276,713.379576 577.828704,714.051149 577.828704,714.879576 C577.828704,715.708003 578.500276,716.379576 579.328704,716.379576 Z M589.328704,716.379576 C590.157131,716.379576 590.828704,715.708003 590.828704,714.879576 C590.828704,714.051149 590.157131,713.379576 589.328704,713.379576 C588.500276,713.379576 587.828704,714.051149 587.828704,714.879576 C587.828704,715.708003 588.500276,716.379576 589.328704,716.379576 Z M599.328704,716.379576 C600.157131,716.379576 600.828704,715.708003 600.828704,714.879576 C600.828704,714.051149 600.157131,713.379576 599.328704,713.379576 C598.500276,713.379576 597.828704,714.051149 597.828704,714.879576 C597.828704,715.708003 598.500276,716.379576 599.328704,716.379576 Z M609.328704,716.379576 C610.157131,716.379576 610.828704,715.708003 610.828704,714.879576 C610.828704,714.051149 610.157131,713.379576 609.328704,713.379576 C608.500276,713.379576 607.828704,714.051149 607.828704,714.879576 C607.828704,715.708003 608.500276,716.379576 609.328704,716.379576 Z M619.328704,716.379576 C620.157131,716.379576 620.828704,715.708003 620.828704,714.879576 C620.828704,714.051149 620.157131,713.379576 619.328704,713.379576 C618.500276,713.379576 617.828704,714.051149 617.828704,714.879576 C617.828704,715.708003 618.500276,716.379576 619.328704,716.379576 Z M629.328704,716.379576 C630.157131,716.379576 630.828704,715.708003 630.828704,714.879576 C630.828704,714.051149 630.157131,713.379576 629.328704,713.379576 C628.500276,713.379576 627.828704,714.051149 627.828704,714.879576 C627.828704,715.708003 628.500276,716.379576 629.328704,716.379576 Z M639.328704,716.379576 C640.157131,716.379576 640.828704,715.708003 640.828704,714.879576 C640.828704,714.051149 640.157131,713.379576 639.328704,713.379576 C638.500276,713.379576 637.828704,714.051149 637.828704,714.879576 C637.828704,715.708003 638.500276,716.379576 639.328704,716.379576 Z M649.328704,716.379576 C650.157131,716.379576 650.828704,715.708003 650.828704,714.879576 C650.828704,714.051149 650.157131,713.379576 649.328704,713.379576 C648.500276,713.379576 647.828704,714.051149 647.828704,714.879576 C647.828704,715.708003 648.500276,716.379576 649.328704,716.379576 Z M659.328704,716.379576 C660.157131,716.379576 660.828704,715.708003 660.828704,714.879576 C660.828704,714.051149 660.157131,713.379576 659.328704,713.379576 C658.500276,713.379576 657.828704,714.051149 657.828704,714.879576 C657.828704,715.708003 658.500276,716.379576 659.328704,716.379576 Z M669.328704,716.379576 C670.157131,716.379576 670.828704,715.708003 670.828704,714.879576 C670.828704,714.051149 670.157131,713.379576 669.328704,713.379576 C668.500276,713.379576 667.828704,714.051149 667.828704,714.879576 C667.828704,715.708003 668.500276,716.379576 669.328704,716.379576 Z M680.328704,716.379576 C681.157131,716.379576 681.828704,715.708003 681.828704,714.879576 C681.828704,714.051149 681.157131,713.379576 680.328704,713.379576 C679.500276,713.379576 678.828704,714.051149 678.828704,714.879576 C678.828704,715.708003 679.500276,716.379576 680.328704,716.379576 Z M690.328704,716.379576 C691.157131,716.379576 691.828704,715.708003 691.828704,714.879576 C691.828704,714.051149 691.157131,713.379576 690.328704,713.379576 C689.500276,713.379576 688.828704,714.051149 688.828704,714.879576 C688.828704,715.708003 689.500276,716.379576 690.328704,716.379576 Z M700.328704,716.379576 C701.157131,716.379576 701.828704,715.708003 701.828704,714.879576 C701.828704,714.051149 701.157131,713.379576 700.328704,713.379576 C699.500276,713.379576 698.828704,714.051149 698.828704,714.879576 C698.828704,715.708003 699.500276,716.379576 700.328704,716.379576 Z M710.328704,716.379576 C711.157131,716.379576 711.828704,715.708003 711.828704,714.879576 C711.828704,714.051149 711.157131,713.379576 710.328704,713.379576 C709.500276,713.379576 708.828704,714.051149 708.828704,714.879576 C708.828704,715.708003 709.500276,716.379576 710.328704,716.379576 Z M720.328704,716.379576 C721.157131,716.379576 721.828704,715.708003 721.828704,714.879576 C721.828704,714.051149 721.157131,713.379576 720.328704,713.379576 C719.500276,713.379576 718.828704,714.051149 718.828704,714.879576 C718.828704,715.708003 719.500276,716.379576 720.328704,716.379576 Z M730.328704,716.379576 C731.157131,716.379576 731.828704,715.708003 731.828704,714.879576 C731.828704,714.051149 731.157131,713.379576 730.328704,713.379576 C729.500276,713.379576 728.828704,714.051149 728.828704,714.879576 C728.828704,715.708003 729.500276,716.379576 730.328704,716.379576 Z M740.328704,716.379576 C741.157131,716.379576 741.828704,715.708003 741.828704,714.879576 C741.828704,714.051149 741.157131,713.379576 740.328704,713.379576 C739.500276,713.379576 738.828704,714.051149 738.828704,714.879576 C738.828704,715.708003 739.500276,716.379576 740.328704,716.379576 Z M750.328704,716.379576 C751.157131,716.379576 751.828704,715.708003 751.828704,714.879576 C751.828704,714.051149 751.157131,713.379576 750.328704,713.379576 C749.500276,713.379576 748.828704,714.051149 748.828704,714.879576 C748.828704,715.708003 749.500276,716.379576 750.328704,716.379576 Z M1.19109278,716.076618 C2.0195199,716.076618 2.69109278,715.405045 2.69109278,714.576618 C2.69109278,713.748191 2.0195199,713.076618 1.19109278,713.076618 C0.362665654,713.076618 -0.308907222,713.748191 -0.308907222,714.576618 C-0.308907222,715.405045 0.362665654,716.076618 1.19109278,716.076618 Z" id="Oval-233-Copy" fill="#C2C2C2"></path>				                <g id="selector" transform="translate(70.000000, 837.144245)">
			                <text id="ALL" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#59737C">
			                    <tspan x="568" y="24">ALL</tspan>
			                </text>
			                <text id="1M" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#59737C">
			                    <tspan x="114" y="24">1M</tspan>
			                </text>
			                <text id="1D" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                    <tspan x="0" y="24">1D</tspan>
			                </text>
			                <path d="M82.5,40 L174.5,40" stroke="#21CE99" stroke-width="2" stroke-linecap="square"></path>
			                <text id="3M" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                    <tspan x="225" y="24">3M</tspan>
			                </text>
			                <text id="6M" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                    <tspan x="341" y="24">6M</tspan>
			                </text>
			                <text id="1Y" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                    <tspan x="463" y="24">1Y</tspan>
			                </text>
			            </g>
			            <path d="M14,780 C0.505089168,784.750759 20.5000026,764.499995 49.4999996,764.499995 C78.4999965,764.499995 71.0000024,793.999995 94.0000024,779.999995 C117.000002,765.999995 92.5000024,740.499995 151.500002,713.499995 C210.500002,686.499995 215.000004,721.999995 234.500004,721.999995 C254.000004,721.999995 265.000004,746.999987 306.500004,651.999995 C348.000004,557.000002 342.152371,476.5 357,459.5 C371.847629,442.5 383.500004,461.499997 403.500004,474.499999 C423.500004,487.500001 453.500004,474.499999 479.500004,487.000001 C505.500004,499.500003 479.500004,556.999997 517.000004,566.499997 C554.500004,575.999997 568.339786,558.617969 589,557 C609.660214,555.382031 609.605052,559.753257 631.5,557 C653.394948,554.246743 642.893616,546.5 672.5,546.5 C702.106384,546.5 734,532 734,532" id="Line" stroke="#4ECFDA" stroke-width="4" stroke-linecap="square"></path>
			            <path d="M680,399 L680,799" id="Line-Copy-20" stroke="#BEBBBB" stroke-linecap="square"></path>
			            <path d="M477,399 L477,799" id="Line-Copy-19" stroke="#BEBBBB" stroke-linecap="square"></path>
			            <path d="M274,399 L274,799" id="Line-Copy-18" stroke="#BEBBBB" stroke-linecap="square"></path>
			            <path d="M71,399 L71,799" id="Line-Copy-17" stroke="#BEBBBB" stroke-linecap="square"></path>
			            <text id="0" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                <tspan x="64" y="375">0</tspan>
			            </text>
			            <text id="10" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                <tspan x="258" y="375">10</tspan>
			            </text>
			            <text id="20" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                <tspan x="463" y="375">20</tspan>
			            </text>
			            <text id="30" font-family=".HelveticaNeueDeskInterface-Thin, SFNS Display" font-size="25" font-style="condensed" font-weight="300" fill="#21CE99">
			                <tspan x="665" y="375">30</tspan>
			            </text>
			        </g>
			    </g>
			</svg>
		</section>
	</section>
		
	<section class="page-container" id="apple">
	  	<section class="section-container">
		  	<h4>Sun Rise/Set</h4>
		  	<p class="reference">*Device mock-up by <a href="https://designcode.io" target="_blank">MengTo</a></p>
		  	<img id="apple-watch" src="https://s33.postimg.org/si18yh4mn/watch.png"/>
			<svg id="solar" width="148px" height="120px" viewBox="0 0 148 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <!-- Generator: Sketch 3.8.2 (29753) - http://www.bohemiancoding.com/sketch -->
			    <title>Solar</title>
			    <desc>Created with Sketch.</desc>
			    <defs>
			        <radialGradient cx="40.159908%" cy="40.7269022%" fx="40.159908%" fy="40.7269022%" r="50.16832%" id="radialGradient-1">
			            <stop stop-color="#FFFFFF" offset="0%"></stop>
			            <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
			        </radialGradient>
			        <ellipse id="path-2" cx="68.1785714" cy="68.3428571" rx="68.1785714" ry="68.3428571"></ellipse>
			        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
			            <stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
			            <stop stop-color="#6F8186" offset="100%"></stop>
			        </linearGradient>
			        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-5">
			            <stop stop-color="#FFFFFF" offset="0%"></stop>
			            <stop stop-color="#77858D" stop-opacity="0" offset="100%"></stop>
			        </radialGradient>
			        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-6">
			            <stop stop-color="#A3BDC6" offset="0%"></stop>
			            <stop stop-color="#8C9499" stop-opacity="0" offset="100%"></stop>
			        </radialGradient>
			        <ellipse id="path-7" cx="72.0164835" cy="44.0285714" rx="5.01648352" ry="5.02857143"></ellipse>
			        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
			            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
			            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
			            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
			            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
			            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
			        </filter>
			    </defs>
			    <g id="Daily-UI-004" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			        <g id="Sun-Rise/Set" transform="translate(-28.000000, -94.000000)">
			            <g id="Watch-Black" transform="translate(3.000000, 0.000000)">
			                <g id="solar-object" transform="translate(26.000000, 94.000000)">
			                    <ellipse id="Oval-139" fill="url(#radialGradient-5)" opacity="0.783990205" style="mix-blend-mode: hard-light;" cx="71.6401099" cy="42.7428571" rx="42.6401099" ry="42.7428571"></ellipse>
			                    <ellipse id="Oval-139" fill="url(#radialGradient-6)" opacity="0.3" style="mix-blend-mode: screen;" cx="71.6401099" cy="42.7428571" rx="42.6401099" ry="42.7428571"></ellipse>
			                    <g id="sun">
			                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
			                        <use id="sun-fill" fill="#FFFFFF" fill-rule="evenodd" style="mix-blend-mode: screen;" xlink:href="#path-7"></use>
			                        <use stroke="#FFFFFF" stroke-width="2" xlink:href="#path-7"></use>
			                    </g>
			                </g>
			            </g>
			        </g>
			    </g>
			</svg>
<svg class="solar-path"width="150px" height="77px" viewBox="-10 0 150 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Daily-UI-004" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="Artboard-10" transform="translate(0.000000, -2.000000)" stroke="#979797" stroke-width="2">
            <path d="M2.14939178e-13,65 C12.5,52 44.2242392,3 67.5,3 C90.7757608,3 115,41.0597015 115,41.0597015 C115,41.0597015 144.087101,78 170.5,78 C196.912899,78 221,41.0597015 221,41.0597015 C221,41.0597015 247.015334,3 272.5,3 C297.984666,3 323,41.0597015 323,41.0597015 C323,41.0597015 349.039825,78 372,78 C394.960175,78 415.1539,41.0597015 415.1539,41.0597015" id="Line"></path>
        </g>
    </g>
</svg>
		</section>
	</section>

            
          
!
            
              /*** Import Fonts ***/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

/*** Variables ***/
$Lato:	'Lato', sans-serif;
$Open-sans:	'Open Sans', sans-serif;
$dark-gray: #3c3c3c;
$light-gray: #a6a6a6;
$UIblue: #3CBBF7;
$UIred: #E74C3C;
$UIyellow: #F8E71C;
$UIgreen: #13bf11;
$dark-brown: #542900;

/* -------------------------------- 
Small Window Size and Mobile Style
-------------------------------- */

@media screen and (max-width: 875px) {
  .button-container {
    margin: 10px 10px !important;
  }
}

@media screen and (max-width: 550px) {
	
	svg#Svg-html-logo {
	  width: 400px;
	  height: auto !important;
	}
	
	.nav, .navbar {
		width: 90% !important;
		
		.nav-item {
			font-size: 10px !important;
		}
	}
	
	#chart svg {
		height: 300px !important;
	}
}

@media screen and (max-width: 450px) {
	
	svg#Svg-html-logo {
	  	width: 275px !important;
	}
	
	p.intro-des {
		margin-top: 30px !important;
	}
	
	.navbar-container {
		height: 120px !important;

	}
	.nav, .navbar {
		flex-wrap: wrap !important;
		
		.nav-item {
			margin: 5px 5px !important;
		}
	}	
}

/* -------------------------------- 
		General Style
-------------------------------- */

html, body {
	font-family: $Lato;
	font-weight: 300;
}

p.reference {
	margin-top: -20px;
	margin-bottom: 30px;
	font-size: 12px;
	
	a {
		color: $dark-gray;
	}
}

/*** svg Logo ***/

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: logo-outline 3s forwards;
  -moz-animation: logo-outline 3s forwards;
  -o-animation: logo-outline 3s forwards;
  -ms-animation: logo-outline 3s forwards;
  animation: logo-outline 3s forwards;
}

@-webkit-keyframes logo-outline {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes logo-outline {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes logo-outline {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes logo-outline {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes logo-outline {
  100% {
    stroke-dashoffset: 0;
  }
}

p.intro-des {
	position: relative;
	font-size: 20px;
	line-height: 35px;
	margin-top: 45px;
	
	a {
		color: $dark-gray;
	}
	
	span {
		font-size: 15px;
	}
}

.button-row-container {
	width: 200px;
	height: 50px;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}

/*** Navbar ***/

.navbar-container {
	position: fixed;
	top: 0;
	left: 50%;
	margin-right: 50%;
	transform: translateX(-50%);
	z-index: 10;
	width: 100%;
	height: 70px;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 
}

.nav, .navbar {
	width: 500px;
	margin: auto;
	margin-top: 20px;
	font-family: $Lato;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1px;
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap: nowrap;

	a {
		color: $dark-gray;
		text-decoration: none;
	}
	
	.nav-item {
		padding: 5px 0;
		
		&:after {
			content: '\00a0';
			display: block;
			height: 1px;
			width: 100%;
			position: relative;
			top: 3px;
			background: transparent;
			transition: top .3s ease-out;
			-webkit-transition: top .3s ease-out;
		}
		
		&:hover:after {
			top: 7px;
			background: #3c3c3c;
		}
	}
}

.active {
	&:after {
		height: 2px !important;
		background: #85D8CE !important;
	}
}


section.page-container {
	margin: auto;
	width: 90%;
	max-width: 800px;
	height: 100vh;
	position: relative;
	text-align: center;
}

#intro {
	max-width: 800px;
	
	.section-container {
		margin-top: 0px;
	}
}

.section-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  text-align: center;
  
  h4 {
    font-size: 50px;
    font-weight: 300;
    color: #3c3c3c;
    margin-bottom: 30px;
  }
}

/* -------------------------------- 
			Buttons
-------------------------------- */

/*** General Button Styles ***/

.button-container {
  display: inline-block;
  margin: 10px 10px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 2px;
  height: 45px;
  width: 200px;
  -webkit-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000; 
  
  .button {
    height: 45px;
    width: 200px;
    border-radius: 3px;
	position: absolute;
	top: 0;
	left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    i.fa {
      font-size: 20px;
      padding: 11px 10px;
      text-shadow: .5px 1px 1px #3c3c3c;
    }
  }
}

.button-icon {
	position: absolute;
	height: 45px;
    width: 45px !important;
    top: 50%;
    left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%);
}

/*** Button Outline ***/

.button-outline {
	
	i.fa-twitter {
		border-bottom: 4px solid rgba(85, 172, 238, 1);
		color: #bdc3c7;
	}
	
	.svg-button-outline rect {
		opacity: 0;
	}
	
	&:hover .fa-twitter {
		border: none;
		color: rgba(85, 172, 238, 1);
	}
	
	&:hover .svg-button-outline rect {
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
		-webkit-animation: .6s button-outline linear forwards;
		animation: .6s button-outline linear forwards;
	}
}

@-moz-keyframes button-outline {
  0% {
    stroke-dasharray: 45 1000;
    stroke-dashoffset: -300;
    stroke-width: 8px;
    opacity: 1;

  }
  100% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    stroke-width: 3px;
    opacity: 1;
  }
}

@-webkit-keyframes button-outline {
  0% {
    stroke-dasharray: 45 1000;
    stroke-dashoffset: -300;
    stroke-width: 8px;
    opacity: 1;

  }
  100% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    stroke-width: 3px;
    opacity: 1;
  }
}

@keyframes button-outline {
  0% {
    stroke-dasharray: 45 1000;
    stroke-dashoffset: -300;
    stroke-width: 8px;
    opacity: 1;

  }
  100% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    stroke-width: 3px;
    opacity: 1;
  }
}

/*** Button Corner ***/

.button-corner {
	
	i.fa-facebook {
		color: #bdc3c7;
	}
	
	&:hover .fa-facebook {
		color: #3b5998;
	}

	rect {
		stroke-dasharray: 40 205;
		stroke-dashoffset: 510;
		-webkit-transition: .5s;
		transition: .5s;
	}
	
	&:hover .svg-button-corner rect {
		stroke-dasharray: 40 80;
	    stroke-dashoffset: -105;
	}
}

/*** Button Edge ***/

.button-edge {
	
	i.fa-instagram {
		color: #bdc3c7;
	}
	
	&:hover .fa-instagram {
		color: #9b6954;
	}

	rect {
		stroke-dasharray: 48 1000;
		stroke-dashoffset: 604;
		-webkit-transition: .5s;
		transition: .5s;
	}
	
	&:hover .svg-button-edge rect {
		stroke-dasharray: 40 0;
	    stroke-dashoffset: 0;
	}
}

/* -------------------------------- 
			Pulse
-------------------------------- */

#pulse svg g {
	stroke-dasharray: 120 1000;
	-moz-animation: 3s Pulse ease-in-out infinite;
	-webkit-animation: 3s Pulse ease-in-out infinite;
	animation: 3s Pulse ease-in-out infinite;
}

@-moz-keyframes Pulse {
  0% {
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}

@-webkit-keyframes Pulse {
  0% {
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}

@keyframes Pulse {
  0% {
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}

/* -------------------------------- 
			Draw and Fill
-------------------------------- */

svg.draw-fill-container {
	width: 70vw;
	max-width: 600px;
	height: auto;
	max-height: 380px;
	
	g {		
		fill-opacity: 1;
		stroke-dasharray: 1000;
		stroke-dashoffset: 0;
	}
	
	g .drawing {
		-moz-animation: 3s draw-fill ease-in-out;
		-webkit-animation: 3s draw-fill ease-in-out;
		animation: 3s draw-fill ease-in-out;
	}
}

@-moz-keyframes draw-fill {
	0% {
		stroke-dashoffset: 1000;
		fill-opacity: 0;
  	}
  	75% {
		stroke-dashoffset: 0;
		fill-opacity: 0;

  	}
  	100% {
		stroke-dashoffset: 0;
		fill-opacity: 1;
  	}
}

@-webkit-keyframes draw-fill {
	0% {
		stroke-dashoffset: 1000;
		fill-opacity: 0;
  	}
  	75% {
		stroke-dashoffset: 0;
		fill-opacity: 0;

  	}
  	100% {
		stroke-dashoffset: 0;
		fill-opacity: 1;
  	}
}

@keyframes draw-fill {
	0% {
		stroke-dashoffset: 1000;
		fill-opacity: 0;
  	}
  	75% {
		stroke-dashoffset: 0;
		fill-opacity: 0;

  	}
  	100% {
		stroke-dashoffset: 0;
		fill-opacity: 1;
  	}
}

/* -------------------------------- 
			Chart
-------------------------------- */

#chart svg {
	width: 70vw;
	max-width: 500px;
	
	g {
		stroke-dasharray: 2000;
		stroke-dashoffset: 2000;
	}
	
	g .drawing {
		-webkit-animation: logo-outline 2s forwards;
		-moz-animation: logo-outline 2s forwards;
		-o-animation: logo-outline 2s forwards;
		-ms-animation: logo-outline 2s forwards;
		animation: logo-outline 2s forwards;	
  	}
}

/* -------------------------------- 
			Sun Rise/Set
-------------------------------- */

#apple-watch {
	width: 200px;
	height: auto;
}

#solar {
	position: absolute;
	left: 50%;
	margin-right: 50%;
	transform: translateX(-50%);
	margin-top: 93px;
	overflow: none;
	height: 150px;
	z-index: 999;
}

#solar-object #sun use {
	opacity: 1;
	-moz-animation: 4s Sun-Move ease-in-out infinite;
	-webkit-animation: 4s Sun-Move ease-in-out infinite;
	animation: 4s Sun-Move ease-in-out infinite;
	z-index: 999;
}

#solar-object ellipse {
	opacity: 1;
	-moz-animation: 4s Sun-Gradient ease-in-out infinite;
	-webkit-animation: 4s Sun-Gradient ease-in-out infinite;
	animation: 4s Sun-Gradient ease-in-out infinite;
}

.solar-path {
	position: absolute;
	z-index: 0;
	margin-left: -180px;
	margin-top: 150px;
	
	path {
		-moz-animation:  moveTheWave 4s linear infinite;
		-webkit-animation:  moveTheWave 4s linear infinite;
		animation: moveTheWave 4s linear infinite;
		stroke-dasharray: 1000;
	}
}

@-moz-keyframes moveTheWave {
  0% {
    stroke-dashoffset: 700;
    -moz-transform: translate3d(-20, 0, 0);
  }

  100% {
    stroke-dashoffset: 100;
    transform: translate3d(-200px, 0, 0);
  }
}

@-webkit-keyframes moveTheWave {
  0% {
    stroke-dashoffset: 700;
    transform: translate3d(-20, 0, 0);
  }

  100% {
    stroke-dashoffset: 100;
    transform: translate3d(-200px, 0, 0);
  }
}

@keyframes moveTheWave {
  0% {
    stroke-dashoffset: 700;
    transform: translate3d(-20, 0, 0);
  }

  100% {
    stroke-dashoffset: 100;
    transform: translate3d(-200px, 0, 0);
  }
}

@-moz-keyframes Sun-Move {
	0%{
		-moz-transform: translateY(0);
	}
	50%{
		fill: transparent;
		-moz-transform: translateY(75px);
	}
	75% {
		fill: white;
	}
	100%{
		-moz-transform: translateY(0);
	}
}

@-webkit-keyframes Sun-Move {
	0%{
		transform: translateY(0);
	}
	50%{
		fill: transparent;
		transform: translateY(75px);
	}
	75% {
		fill: white;
	}
	100%{
		transform: translateY(0);
	}
}

@keyframes Sun-Move {
	0%{
		transform: translateY(0);
	}
	50%{
		fill: transparent;
		transform: translateY(75px);
	}
	75% {
		fill: white;
	}
	100%{
		transform: translateY(0);
	}
}

@-moz-keyframes Sun-Gradient {
	0%{
		opacity: 1;
		transform: translateY(0);
	}
	50%{
		opacity: 0;
		transform: translateY(75px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes Sun-Gradient {
	0%{
		opacity: 1;
		transform: translateY(0);
	}
	50%{
		opacity: 0;
		transform: translateY(75px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes Sun-Gradient {
	0%{
		opacity: 1;
		transform: translateY(0);
	}
	50%{
		opacity: 0;
		transform: translateY(75px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

/* -------------------------------- 
			Footer
-------------------------------- */

/*** SocialBar ***/

.socialbar-container {
	position: absolute;
	top: 100px;
	right: 50px;
	z-index: 10;
}

.footer {
	position:relative;
	bottom:20px;
	margin-top: -50px;
	height:20px;
	width:230px;
	left: 50%;
	margin-right: -50%;
	transform: translateX(-50%);
}

.socialbar {
	width: 230px;
	
	.social-item a {
		font-size: 20px;
	}

	.fa-desktop:hover {
			color: #5530cc;
	}
	
	.fa-linkedin:hover {
			color: #007bb5;
	}
	
	.fa-github:hover {
			color: #ded1c1;
	}
	
	.fa-codepen:hover {
			color: #9a9595;
	}

	.fa-dribbble:hover {
			color: #ea4c89;
	}
}



            
          
!
            
              	var isUpdated = false;

$(document).ready(function() {
	smoothScroll();
	
	// Animate menu using animate.css
	$('.navbar').addClass('animated bounceInDown');

	// Scroll event listen
	$(window).on('scroll', function(){
		updateNavigation();
	});
	
	$('.button-container, .switch-container').bind('touchstart mousedown', function(e){
	});
	
	// Update nav selected when click
	$('a').on('click', function() {
		$('.nav-item').removeClass('active');
		$(this).parent().addClass('active');
	});
		
	$(window).scroll(function(){
    	drawFillAnimation();
	});
	
});

// Smooth the scroll action
function smoothScroll() {
	
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
}

// Update nav selected
function updateNavigation() {
	var lastId,
    topMenu = $(".navbar"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });
    
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
}

// Check if element is in viewpoint
function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the radial progress animation.
function drawFillAnimation() {
	
    var $elem1 = $('#apple_tv');
    var $elem2 = $('#1D');

    // If the animation has already been started
    //if ($elem1.hasClass('fill-one')) return;
    //if ($elem2.hasClass('fill-two')) return;
    if (isElementInViewport($elem1)) {
        // Start the animation
        $('.draw-fill-container g').attr('class', 'drawing');
       // $('.draw-fill-container g').attr('class', 'filling');
    }
    if (isElementInViewport($elem2)) {
        // Start the animation
        if (isUpdated == false) {
	        updateNumber();
        }
        isUpdated = true;
        $('#chart g').attr('class', 'drawing');
    }
}

function updateNumber() {
	var index = 0;
	var clr = null;
	(loop = function() {
    clearTimeout(clr);
    (inloop = function() {
		if (index == 24) {
      		return;
     	}
      $('#chart-index').html("106.11 (" + index + "%)");
      index += 1
      clr = setTimeout(inloop, 60);
    })();
    })();
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console