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="seconds">
  <svg version="1.2" baseProfile="tiny" id="secs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="249px" height="249px" viewBox="0 0 249 249" xml:space="preserve">
<path d="M124.9,77.5c1.4,0,2.8,0.1,4.1,0.2C137.7-25.6,127.1-26.1,124.9,77.5z"/>
<path d="M129.8,77.8c1.4,0.2,2.8,0.4,4.1,0.6C153.3-23.4,142.8-25,129.8,77.8z"/>
<path d="M134.6,78.6c1.4,0.3,2.7,0.6,4,1.1C168.6-19.6,158.3-22.3,134.6,78.6z"/>
<path d="M139.4,79.9c1.3,0.4,2.6,0.9,3.9,1.5C183.4-14.2,173.5-18,139.4,79.9z"/>
<path d="M144,81.7c1.3,0.6,2.5,1.2,3.7,1.9C197.6-7.2,188.1-12.1,144,81.7z"/>
<path d="M148.3,84c1.2,0.7,2.4,1.5,3.5,2.3C210.9,1.1,202.1-4.7,148.3,84z"/>
<path d="M152.4,86.7c1.1,0.8,2.2,1.7,3.2,2.6C223.4,10.8,215.1,4.2,152.4,86.7z"/>
<path d="M159.2,92.8c75.5-71,68-78.5-2.9-2.9C157.2,90.8,158.2,91.7,159.2,92.8z"/>
<path d="M159.7,93.3c0.9,1,1.8,2.1,2.6,3.2C244.8,33.9,238.2,25.6,159.7,93.3z"/>
<path d="M162.7,97.2c0.8,1.1,1.6,2.3,2.3,3.5C253.6,46.9,247.9,38.1,162.7,97.2z"/>
<path d="M165.4,101.3c0.7,1.2,1.3,2.4,1.9,3.7C261,60.9,256.2,51.4,165.4,101.3z"/>
<path d="M167.6,105.7c0.6,1.3,1,2.6,1.5,3.9C266.9,75.5,263.1,65.6,167.6,105.7z"/>
<path d="M169.3,110.3c0.4,1.3,0.8,2.7,1.1,4C271.3,90.6,268.6,80.4,169.3,110.3z"/>
<path d="M170.6,115.1c0.3,1.3,0.5,2.7,0.6,4.1C274,106.2,272.4,95.7,170.6,115.1z"/>
<path d="M171.3,120c0.1,1.4,0.2,2.7,0.2,4.1C275.1,121.9,274.6,111.3,171.3,120z"/>
<path d="M171.5,124.9c0,1.4-0.1,2.8-0.2,4.1C274.6,137.7,275.1,127.1,171.5,124.9z"/>
<path d="M171.2,129.8c-0.2,1.4-0.4,2.8-0.6,4.1C272.4,153.3,274,142.8,171.2,129.8z"/>
<path d="M170.4,134.6c-0.3,1.4-0.6,2.7-1.1,4C268.6,168.6,271.3,158.3,170.4,134.6z"/>
<path d="M169.1,139.4c-0.4,1.3-0.9,2.6-1.5,3.9C263.1,183.4,266.9,173.5,169.1,139.4z"/>
<path d="M167.3,144c-0.6,1.3-1.2,2.5-1.9,3.7C256.2,197.6,261,188.1,167.3,144z"/>
<path d="M165,148.3c-0.7,1.2-1.5,2.4-2.3,3.5C247.9,210.9,253.6,202.1,165,148.3z"/>
<path d="M162.3,152.4c-0.8,1.1-1.7,2.2-2.6,3.2C238.2,223.4,244.8,215.1,162.3,152.4z"/>
<path d="M156.2,159.2c71,75.5,78.5,68,2.9-2.9C158.2,157.2,157.2,158.2,156.2,159.2z"/>
<path d="M155.6,159.7c-1,0.9-2.1,1.8-3.2,2.6C215.1,244.8,223.4,238.2,155.6,159.7z"/>
<path d="M151.8,162.7c-1.1,0.8-2.3,1.6-3.5,2.3C202.1,253.6,210.9,247.9,151.8,162.7z"/>
<path d="M147.7,165.4c-1.2,0.7-2.4,1.3-3.7,1.9C188.1,261,197.6,256.2,147.7,165.4z"/>
<path d="M143.3,167.6c-1.3,0.5-2.6,1-3.9,1.5C173.5,266.9,183.4,263.1,143.3,167.6z"/>
<path d="M138.7,169.3c-1.3,0.4-2.7,0.8-4,1.1C158.3,271.3,168.6,268.6,138.7,169.3z"/>
<path d="M133.9,170.6c-1.3,0.3-2.7,0.5-4.1,0.6C142.8,274,153.3,272.4,133.9,170.6z"/>
<path d="M129,171.3c-1.4,0.1-2.7,0.2-4.1,0.2C127.1,275.1,137.7,274.6,129,171.3z"/>
<path d="M124.1,171.5c-1.4,0-2.8-0.1-4.1-0.2C111.3,274.6,121.9,275.1,124.1,171.5z"/>
<path d="M119.2,171.2c-1.4-0.2-2.8-0.4-4.1-0.6C95.7,272.4,106.2,274,119.2,171.2z"/>
<path d="M114.3,170.4c-1.4-0.3-2.7-0.6-4-1.1C80.4,268.6,90.6,271.3,114.3,170.4z"/>
<path d="M109.6,169.1c-1.3-0.4-2.6-0.9-3.9-1.5C65.6,263.1,75.5,266.9,109.6,169.1z"/>
<path d="M105,167.3c-1.3-0.6-2.5-1.2-3.7-1.9C51.4,256.2,60.9,261,105,167.3z"/>
<path d="M100.7,165c-1.2-0.7-2.4-1.5-3.5-2.3C38.1,247.9,46.9,253.6,100.7,165z"/>
<path d="M96.6,162.3c-1.1-0.8-2.2-1.7-3.2-2.6C25.6,238.2,33.9,244.8,96.6,162.3z"/>
<path d="M89.8,156.2c-75.5,71-68,78.5,2.9,2.9C91.7,158.2,90.8,157.2,89.8,156.2z"/>
<path d="M89.3,155.6c-0.9-1-1.8-2.1-2.6-3.2C4.2,215.1,10.8,223.4,89.3,155.6z"/>
<path d="M86.3,151.8c-0.8-1.1-1.6-2.3-2.3-3.5C-4.7,202.1,1.1,210.9,86.3,151.8z"/>
<path d="M83.6,147.7c-0.7-1.2-1.3-2.4-1.9-3.7C-12.1,188.1-7.2,197.6,83.6,147.7z"/>
<path d="M81.4,143.3c-0.6-1.3-1-2.6-1.5-3.9C-18,173.5-14.2,183.4,81.4,143.3z"/>
<path d="M79.7,138.7c-0.4-1.3-0.8-2.7-1.1-4C-22.3,158.3-19.6,168.6,79.7,138.7z"/>
<path d="M78.4,133.9c-0.3-1.3-0.5-2.7-0.6-4.1C-25,142.8-23.4,153.3,78.4,133.9z"/>
<path d="M77.7,129c-0.1-1.4-0.2-2.7-0.2-4.1C-26.1,127.1-25.6,137.7,77.7,129z"/>
<path d="M77.5,124.1c0-1.4,0.1-2.8,0.2-4.1C-25.6,111.3-26.1,121.9,77.5,124.1z"/>
<path d="M77.8,119.2c0.2-1.4,0.4-2.8,0.6-4.1C-23.4,95.7-25,106.2,77.8,119.2z"/>
<path d="M78.6,114.3c0.3-1.4,0.6-2.7,1.1-4C-19.6,80.4-22.3,90.6,78.6,114.3z"/>
<path d="M79.9,109.6c0.4-1.3,0.9-2.6,1.5-3.9C-14.2,65.6-18,75.5,79.9,109.6z"/>
<path d="M81.7,105c0.6-1.3,1.2-2.5,1.9-3.7C-7.2,51.4-12.1,60.9,81.7,105z"/>
<path d="M84,100.7c0.7-1.2,1.5-2.4,2.3-3.5C1.1,38.1-4.7,46.9,84,100.7z"/>
<path d="M86.7,96.6c0.8-1.1,1.7-2.2,2.6-3.2C10.8,25.6,4.2,33.9,86.7,96.6z"/>
<path d="M92.8,89.8c-71-75.5-78.5-68-2.9,2.9C90.8,91.7,91.7,90.8,92.8,89.8z"/>
<path d="M93.3,89.3c1-0.9,2.1-1.8,3.2-2.6C33.9,4.2,25.6,10.8,93.3,89.3z"/>
<path d="M97.2,86.3c1.1-0.8,2.3-1.6,3.5-2.3C46.9-4.7,38.1,1.1,97.2,86.3z"/>
<path d="M101.3,83.6c1.2-0.7,2.4-1.3,3.7-1.9C60.9-12.1,51.4-7.2,101.3,83.6z"/>
<path d="M105.7,81.4c1.3-0.6,2.6-1,3.9-1.5C75.5-18,65.6-14.2,105.7,81.4z"/>
<path d="M110.3,79.7c1.3-0.4,2.7-0.8,4-1.1C90.6-22.3,80.4-19.6,110.3,79.7z"/>
<path d="M115.1,78.4c1.3-0.3,2.7-0.5,4.1-0.6C106.2-25,95.7-23.4,115.1,78.4z"/>
<path d="M120,77.7c1.4-0.1,2.7-0.2,4.1-0.2C121.9-26.1,111.3-25.6,120,77.7z"/>
</svg>
</div>

<div id="second">
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="249px" height="249px" viewBox="0 0 249 249" xml:space="preserve">
<g>
	<path class="path" fill="none" stroke="#000" stroke-width="1" d="M124.5,115.9c0.3-154.4,17-153.5,0.9,0c16.1-153.5,33-150.9,0.9,0.1
		c32.1-151,48.6-146.6,0.9,0.2c47.7-146.8,63.6-140.7,0.8,0.3c62.8-141,78-133.3,0.8,0.4c77.2-133.7,91.5-124.4,0.8,0.5
		c90.7-124.9,104-114.2,0.7,0.6c103.3-114.7,115.3-102.7,0.6,0.6c114.7-103.3,125.4-90,0.6,0.7c124.9-90.7,134.2-76.4,0.5,0.8
		c133.7-77.2,141.4-62,0.4,0.8c141-62.8,147.1-46.9,0.3,0.8c146.8-47.7,151.2-31.2,0.2,0.9c151-32.1,153.6-15.3,0.1,0.9
		c153.5-16.1,154.4,0.9,0,0.9c154.4,0,153.5,17,0,0.9c153.5,16.1,150.8,33-0.1,0.9c151,32.1,146.6,48.6-0.2,0.9
		c146.8,47.7,140.7,63.6-0.3,0.8c141,62.8,133.3,78-0.4,0.8c133.7,77.2,124.4,91.5-0.5,0.8c124.9,90.7,114.1,104-0.6,0.7
		c114.7,103.3,102.6,115.3-0.6,0.6c103.3,114.7,90,125.4-0.7,0.6c90.7,124.9,76.4,134.2-0.8,0.5c77.2,133.7,62,141.4-0.8,0.4
		c62.8,141,46.9,147.1-0.8,0.3c47.7,146.8,31.2,151.2-0.9,0.2c32.1,151,15.2,153.6-0.9,0.1c16.1,153.5-0.9,154.4-0.9,0
		c0,154.4-17,153.5-0.9,0c-16.1,153.5-33,150.8-0.9-0.1c-32.1,151-48.6,146.6-0.9-0.2c-47.7,146.8-63.6,140.7-0.8-0.3
		c-62.8,141-78,133.3-0.8-0.4c-77.2,133.7-91.5,124.4-0.8-0.5c-90.7,124.9-104,114.1-0.7-0.6c-103.3,114.7-115.3,102.6-0.6-0.6
		c-114.7,103.3-125.4,90-0.6-0.7c-124.9,90.7-134.2,76.4-0.5-0.8c-133.7,77.2-141.4,62-0.4-0.8c-141,62.8-147.1,46.9-0.3-0.8
		c-146.8,47.7-151.2,31.2-0.2-0.9c-151,32.1-153.6,15.2-0.1-0.9c-153.5,16.1-154.4-0.9,0-0.9c-154.4,0-153.5-17,0-0.9
		c-153.5-16.1-150.8-33,0.1-0.9c-151-32.1-146.6-48.6,0.2-0.9c-146.8-47.7-140.7-63.6,0.3-0.8c-141-62.8-133.3-78,0.4-0.8
		C-16.6,43-7.3,28.7,117.6,119.5c-124.9-90.7-114.1-104,0.6-0.7C3.4,15.5,15.5,3.4,118.8,118.1c-103.3-114.7-90-125.4,0.7-0.6
		C28.7-7.3,43-16.6,120.2,117.1C43-16.6,58.2-24.4,121,116.7c-62.8-141-46.9-147.1,0.8-0.3c-47.7-146.8-31.2-151.2,0.9-0.2
		c-32.1-151-15.2-153.7,0.9-0.1C107.5-37.5,124.2-38.4,124.5,115.9"/>
</g>
</svg>
</div>


<div id="hours">
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="193.8px" height="193.8px" viewBox="0 0 193.8 193.8" xml:space="preserve" stroke="#000" stroke-width="1">
<path d="M147,28.8L145.4,13l-14.5,6.5c-5.9-2.5-12.1,0.5-13.8,6.7l-14.9,55.5c-0.8,3.1-0.7,5,0.3,5.5
	c0.9,0.5,2.7-0.2,4.9-2.5l25.6-25.6c4.5-4.5,11.6-11.6,15.8-15.8C153,39.2,152.2,32.7,147,28.8z"/>
<path d="M180.9,48.5l-15.8-1.7c-3.9-5.1-10.8-5.6-15.4-1l-26.5,26.5c-4.5,4.5-11.4,11.4-15.3,15.3
	c-1.9,1.9-2.4,3.2-1.8,4c0.7,0.8,2.7,0.9,6,0l55.6-14.9c6.2-1.7,9.2-7.8,6.7-13.7L180.9,48.5z"/>
<path d="M180.9,87.6c-0.8-6.4-6.4-10.2-12.7-8.6l-55.5,14.9c-3.1,0.8-4.7,1.9-4.7,3c0,1.1,1.6,2.2,4.7,3l55.5,14.9
	c6.2,1.7,12-2.2,12.8-8.6l12.8-9.3L180.9,87.6z"/>
<path d="M174.4,130.9c2.5-5.9-0.5-12.1-6.7-13.8l-55.5-14.9c-3.1-0.8-5-0.7-5.5,0.3s0.2,2.7,2.5,4.9l22.8,22.8
	l17.9,17.9c4.5,4.5,11.4,4.1,15.3-1.1l15.8-1.7L174.4,130.9z"/>
<path d="M148.1,149.7l-5-5c-4.5-4.5-12-12-16.5-16.5l-19.1-19.1c-2.3-2.3-4-3.1-4.9-2.5c-1,0.5-1.1,2.4-0.3,5.5
	l14.9,55.5c1.7,6.2,7.8,9.2,13.7,6.7l14.6,6.5l1.7-15.8C152.2,161.2,152.6,154.3,148.1,149.7z"/>
<path d="M114.8,168.3l-14.9-55.6c-0.8-3.1-1.9-4.7-3-4.7c-1.1,0-2.2,1.6-3,4.7L79,168.3c-1.7,6.2,2.2,12,8.6,12.8
	l9.3,12.8l9.3-12.9C112.6,180.2,116.5,174.5,114.8,168.3z"/>
<path d="M91.4,106.6c-0.9-0.5-2.7,0.2-4.9,2.5l-40.7,40.7c-4.5,4.5-4.1,11.4,1.1,15.3l1.7,15.8l14.5-6.5
	c5.9,2.5,12.1-0.5,13.8-6.7l0.5-1.9c1.7-6.2,4.4-16.4,6-22.6l8.3-31.1C92.5,109,92.3,107.1,91.4,106.6z"/>
<path d="M87.3,102.5c-0.5-0.9-2.4-1.1-5.5-0.3l-55.5,14.9c-6.2,1.7-9.2,7.8-6.7,13.7L13,145.4l15.8,1.7
	c3.9,5.1,10.8,5.6,15.4,1l40.7-40.7C87,105.2,87.8,103.4,87.3,102.5z"/>
<path d="M81.1,93.9L25.6,79c-6.2-1.7-12,2.2-12.8,8.6L0,96.9l12.9,9.3c0.8,6.4,6.4,10.2,12.7,8.6l55.5-14.9
	c3.1-0.8,4.7-1.9,4.7-3C85.8,95.8,84.2,94.7,81.1,93.9z"/>
<path d="M84.8,86.4L44.1,45.8c-4.5-4.5-11.4-4.1-15.3,1.1L13,48.5L19.5,63c-2.5,5.9-0.9,11.7,3.6,12.9
	c4.5,1.2,13.2,3.5,19.4,5.2l39.3,10.5c3.1,0.8,5,0.7,5.5-0.3C87.8,90.4,87,88.7,84.8,86.4z"/>
<path d="M91.6,81.7L76.8,26.2C75.1,20,68.9,17,63,19.5L48.5,13l-1.7,15.8c-5.1,3.9-5.6,10.8-1,15.4l40.7,40.7
	c2.3,2.3,4,3.1,4.9,2.5C92.3,86.7,92.5,84.8,91.6,81.7z"/>
<path d="M106.3,12.8L96.9,0l-9.3,12.9c-6.4,0.8-10.2,6.4-8.6,12.7l14.9,55.6c0.8,3.1,1.9,4.7,3,4.7
	c1.1,0,2.2-1.6,3-4.7l14.9-55.5C116.5,19.4,112.6,13.6,106.3,12.8z"/>
</svg>
</div>

<div id="minutes">
  <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="143.3px" height="143.3px" viewBox="0 0 143.3 143.3" xml:space="preserve" stroke="#000" stroke-width="0">
<path d="M82.6,0.1c-5.4-0.8-9.9,3.1-9.9,8.6v49.3c0,5.5,2.2,6.1,5,1.3l24.6-42.7c2.8-4.8,0.8-10.4-4.2-12.5L82.6,0.1
	z"/>
<path d="M126.5,38.9c4.3-2.5,5.1-8.1,1.7-12.4l-11.3-11.3c-4.3-3.4-10.1-2.3-12.9,2.5L79.4,60.3
	c-2.8,4.8-1.1,6.4,3.7,3.7L110,48.4C114.7,45.7,122.2,41.4,126.5,38.9z"/>
<path d="M134.7,70.7c5.5,0,9.4-4.5,8.6-9.9l-4-15.5c-2.1-5.1-7.7-7-12.5-4.2L98.9,57.1c-4.8,2.8-12,6.9-16.1,9.3
	s-2.9,4.3,2.6,4.3H134.7z"/>
<path d="M126.7,102.3c4.8,2.8,10.4,0.8,12.5-4.2l4-15.5c0.8-5.4-3.1-9.9-8.6-9.9H85.4c-5.5,0-6.1,2.2-1.3,5
	L126.7,102.3z"/>
<path d="M128.2,116.9c3.4-4.3,2.3-10.1-2.5-12.9L83.1,79.4c-4.8-2.8-6.4-1.1-3.7,3.7L93.2,107
	c2.8,4.8,7.2,12.6,10,17.3l0.8,1.4c2.8,4.8,8.5,5.9,12.9,2.5L128.2,116.9z"/>
<path d="M72.7,134.7c0,5.5,4.5,9.4,9.9,8.6l15.5-4c5.1-2.1,7-7.7,4.2-12.5l-3-5.3c-2.8-4.8-7.2-12.6-10-17.3
	L77.7,84.1c-2.8-4.8-5-4.2-5,1.3V134.7z"/>
<path d="M60.8,143.2c5.4,0.8,9.9-3.1,9.9-8.6V85.4c0-5.5-2.2-6.1-5-1.3L41,126.7c-2.8,4.8-0.8,10.4,4.2,12.5
	L60.8,143.2z"/>
<path d="M17.6,104c-4.8,2.8-5.9,8.5-2.5,12.9l11.3,11.3c4.3,3.4,10.1,2.3,12.9-2.5l0.8-1.4c2.8-4.8,7.2-12.6,10-17.3
	l13.8-23.9c2.8-4.8,1.1-6.4-3.7-3.7L17.6,104z"/>
<path d="M8.7,72.7c-5.5,0-9.4,4.5-8.6,9.9l4,15.5c2.1,5.1,7.7,7,12.5,4.2l42.7-24.6c4.8-2.8,4.2-5-1.3-5H8.7z"/>
<path d="M0.1,60.8c-0.8,5.4,3.1,9.9,8.6,9.9h49.3c5.5,0,6.1-2.2,1.3-5L16.6,41c-4.8-2.8-10.4-0.8-12.5,4.2L0.1,60.8z
	"/>
<path d="M15.1,26.4c-3.4,4.3-3.3,9.5,0.1,11.5c3.4,2,10.1,5.9,14.9,8.6l30.2,17.4c4.8,2.8,6.4,1.1,3.7-3.7L39.3,17.6
	c-2.8-4.8-8.5-5.9-12.9-2.5L15.1,26.4z"/>
<path d="M70.7,8.7c0-5.5-4.5-9.4-9.9-8.6l-15.5,4c-5.1,2.1-7,7.7-4.2,12.5l24.6,42.7c2.8,4.8,5,4.2,5-1.3V8.7z"/>
</svg>
</div>

<div id="detail">
  <svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="134.9px" height="134.9px" viewBox="0 0 134.9 134.9" xml:space="preserve">
<path d="M70.8,18.3l1.5-14.6C72.5,2.2,72.1,1,71.3,0c-0.9,0.9-1.5,2.1-1.5,3.5v14.7c0.1-0.3,0.3-0.6,0.5-0.8
	C70.6,17.7,70.7,18,70.8,18.3z"/>
<path d="M75.4,18c0.2,0.3,0.3,0.6,0.4,0.9l3.1-14.4c0.3-1.4,0-2.7-0.7-3.8c-1,0.8-1.7,1.9-1.8,3.4l-1.5,14.6
	C75,18.5,75.2,18.2,75.4,18z"/>
<path d="M80.4,19.1c0.1,0.3,0.2,0.6,0.3,0.9l4.5-14c0.4-1.4,0.3-2.7-0.3-3.8c-1.1,0.7-1.9,1.7-2.2,3.1l-3.1,14.4
	C79.9,19.5,80.2,19.3,80.4,19.1z"/>
<path d="M85.5,21.7l6-13.4c0.6-1.3,0.6-2.7,0.1-3.8c-1.1,0.5-2,1.5-2.5,2.9l-4.5,14c0.2-0.2,0.5-0.4,0.8-0.6
	C85.5,21.1,85.5,21.4,85.5,21.7z"/>
<path d="M90.1,23.9l7.3-12.7c0.7-1.2,0.9-2.6,0.5-3.8c-1.2,0.4-2.2,1.3-2.8,2.6l-6,13.4c0.2-0.2,0.5-0.4,0.8-0.5
	C90.1,23.2,90.2,23.5,90.1,23.9z"/>
<path d="M94.7,26.3l2.6-3.6c1.8-2.5,4.6-6.3,6.2-8.5c0.7-1,1-2.2,0.7-3.3c-1.3,0.3-2.4,1.1-3.1,2.4l-7.3,12.7
	c0.3-0.2,0.6-0.3,0.9-0.4C94.7,25.7,94.7,26,94.7,26.3z"/>
<path d="M98.8,29.4l3-3.3c2-2.3,5.2-5.8,7.1-7.8c0.9-0.9,1.2-2.1,1.1-3.2c-1.3,0.1-2.5,0.8-3.4,2L98,28.9
	c0.3-0.2,0.6-0.3,1-0.3C98.9,28.8,98.9,29.1,98.8,29.4z"/>
<path d="M102.7,32.9l3.3-3c2.3-2,5.8-5.2,7.8-7.1c0.9-0.9,1.4-2,1.4-3.1c-1.3,0-2.6,0.6-3.6,1.7l-9.8,10.9
	c0.3-0.1,0.6-0.2,1-0.2C102.8,32.4,102.8,32.7,102.7,32.9z"/>
<path d="M106.3,36c0,0.3-0.1,0.5-0.2,0.8l3.6-2.6c2.5-1.8,6.3-4.6,8.5-6.2c1-0.7,1.6-1.8,1.7-3
	c-1.3-0.1-2.6,0.3-3.7,1.3l-10.9,9.8C105.7,36,106,36,106.3,36z"/>
<path d="M109.4,40.3c-0.1,0.3-0.2,0.5-0.3,0.8l3.9-2.2c2.6-1.5,6.7-3.9,9.1-5.3c1.1-0.6,1.8-1.6,2-2.8
	c-1.3-0.3-2.6,0-3.8,0.9l-11.9,8.6C108.8,40.2,109.1,40.2,109.4,40.3z"/>
<path d="M112,44.8c-0.1,0.3-0.3,0.6-0.5,0.8l13.4-6c1.3-0.6,2.2-1.6,2.6-2.8c-1.2-0.3-2.5-0.2-3.8,0.5L111,44.8
	C111.3,44.7,111.6,44.7,112,44.8z"/>
<path d="M113.5,50.3l14-4.5c1.4-0.4,2.4-1.4,2.9-2.5c-1.1-0.5-2.5-0.5-3.8,0.1l-13.4,6c0.3,0,0.6,0.1,0.9,0.2
	C114,49.8,113.8,50.1,113.5,50.3z"/>
<path d="M115.1,55.1l14.4-3.1c1.4-0.3,2.5-1.1,3.1-2.2c-1.1-0.6-2.4-0.7-3.8-0.3l-14,4.5c0.3,0,0.6,0.1,0.9,0.3
	C115.6,54.7,115.4,54.9,115.1,55.1z"/>
<path d="M116.1,60.1l14.6-1.5c1.4-0.2,2.6-0.8,3.3-1.8c-1-0.7-2.3-1-3.7-0.7L116,59.1c0.3,0.1,0.6,0.2,0.9,0.4
	C116.7,59.7,116.4,59.9,116.1,60.1z"/>
<path d="M116.6,65h14.7c1.4,0,2.7-0.6,3.5-1.5c-0.9-0.8-2.2-1.2-3.7-1.1L116.6,64c0.3,0.1,0.6,0.2,0.8,0.5
	C117.2,64.7,116.9,64.9,116.6,65z"/>
<path d="M116.6,70.8l14.6,1.5c1.4,0.2,2.7-0.3,3.7-1.1c-0.9-0.9-2.1-1.5-3.5-1.5h-14.7c0.3,0.1,0.6,0.3,0.8,0.5
	C117.2,70.6,116.9,70.7,116.6,70.8z"/>
<path d="M116.9,75.4c-0.3,0.2-0.6,0.3-0.9,0.4l14.3,3c1.4,0.3,2.7,0,3.8-0.7c-0.8-1-1.9-1.7-3.4-1.8l-14.6-1.5
	C116.4,75,116.7,75.2,116.9,75.4z"/>
<path d="M115.8,80.4c-0.3,0.1-0.6,0.2-0.9,0.3l13.9,4.5c1.4,0.4,2.7,0.3,3.8-0.3c-0.7-1.1-1.7-1.9-3.2-2.2l-14.4-3.1
	C115.4,79.9,115.6,80.2,115.8,80.4z"/>
<path d="M114.1,85.3c-0.3,0.1-0.6,0.2-0.9,0.2l13.4,6c1.3,0.6,2.7,0.6,3.8,0.1c-0.5-1.1-1.5-2-2.9-2.5l-13.9-4.5
	C113.8,84.8,114,85,114.1,85.3z"/>
<path d="M111,90.1l12.7,7.3c1.2,0.7,2.6,0.9,3.8,0.5c-0.4-1.2-1.3-2.2-2.6-2.8l-13.4-6c0.2,0.2,0.4,0.5,0.5,0.8
	C111.7,90.1,111.4,90.2,111,90.1z"/>
<path d="M108.4,94.5l2.2,1.6c2.5,1.8,6.5,4.7,8.9,6.5l0.7,0.5c1.2,0.8,2.5,1.1,3.7,0.9c-0.3-1.2-1.1-2.3-2.3-3
	l-12.7-7.3c0.2,0.3,0.3,0.5,0.4,0.8C109,94.6,108.7,94.6,108.4,94.5z"/>
<path d="M105.3,98.7l2,1.8c2.3,2,5.9,5.4,8.2,7.4l0.7,0.6c1.1,1,2.4,1.4,3.6,1.3c-0.2-1.2-0.8-2.4-2-3.2l-2.7-2
	c-2.5-1.8-6.5-4.7-8.9-6.5l-0.2-0.2c0.2,0.3,0.3,0.6,0.3,0.9C105.9,98.8,105.6,98.8,105.3,98.7z"/>
<path d="M101.8,102.5l1.8,2c2,2.3,5.4,5.9,7.4,8.2l0.6,0.7c1,1.1,2.2,1.6,3.4,1.6c0-1.2-0.6-2.5-1.7-3.4l-2.5-2.2
	c-2.3-2-5.9-5.4-8.2-7.4l-0.2-0.2c0.1,0.3,0.2,0.6,0.2,0.9C102.4,102.7,102.1,102.6,101.8,102.5z"/>
<path d="M98.8,106.2c-0.3,0-0.6-0.1-0.9-0.3l1.6,2.2c1.8,2.5,4.7,6.5,6.5,8.9l0.5,0.7c0.8,1.2,2,1.8,3.3,2
	c0.1-1.2-0.3-2.5-1.3-3.6l-2.2-2.5c-2-2.3-5.4-5.9-7.4-8.2l-0.2-0.2C98.8,105.6,98.8,105.9,98.8,106.2z"/>
<path d="M94.6,109.3c-0.3-0.1-0.6-0.2-0.9-0.4l1.4,2.4c1.5,2.6,4,6.9,5.5,9.6l0.5,0.8c0.7,1.2,1.8,2,3,2.3
	c0.2-1.2-0.1-2.5-0.9-3.7l-2-2.7c-1.8-2.5-4.7-6.5-6.5-8.9l-0.2-0.2C94.6,108.7,94.6,109,94.6,109.3z"/>
<path d="M90.1,112c-0.3-0.1-0.6-0.3-0.8-0.5l6,13.4c0.6,1.3,1.6,2.2,2.8,2.6c0.3-1.2,0.2-2.5-0.5-3.8l-1.7-2.9
	c-1.5-2.6-4-6.9-5.5-9.6l-0.1-0.2C90.2,111.3,90.1,111.7,90.1,112z"/>
<path d="M84.6,113.5l4.5,14c0.4,1.4,1.4,2.4,2.5,2.9c0.5-1.1,0.5-2.5-0.1-3.8l-6-13.4c0,0.3-0.1,0.6-0.2,0.9
	C85.1,114,84.8,113.8,84.6,113.5z"/>
<path d="M79.8,115.1l3.1,14.4c0.3,1.4,1.1,2.5,2.2,3.1c0.6-1.1,0.7-2.4,0.3-3.8l-4.5-14c0,0.3-0.1,0.6-0.3,0.9
	C80.2,115.6,79.9,115.4,79.8,115.1z"/>
<path d="M74.8,116.2l1.5,14.6c0.2,1.4,0.8,2.6,1.8,3.3c0.7-1,1-2.3,0.7-3.7L75.8,116c-0.1,0.3-0.2,0.6-0.4,0.9
	C75.2,116.7,75,116.4,74.8,116.2z"/>
<path d="M69.8,116.7v14.7c0,1.4,0.6,2.7,1.5,3.5c0.8-0.9,1.2-2.2,1.1-3.7l-1.5-14.6c-0.1,0.3-0.3,0.6-0.5,0.8
	C70.1,117.2,70,117,69.8,116.7z"/>
<path d="M64.1,116.6l-1.5,14.6c-0.2,1.4,0.3,2.7,1.1,3.7c0.9-0.9,1.5-2.1,1.5-3.5v-14.7c-0.1,0.3-0.3,0.6-0.5,0.8
	C64.3,117.2,64.2,116.9,64.1,116.6z"/>
<path d="M59.4,116.9c-0.2-0.3-0.3-0.6-0.4-0.9l-3,14.3c-0.3,1.4,0,2.7,0.7,3.8c1-0.8,1.7-1.9,1.8-3.4l0.1-0.9
	c0.3-3,0.8-8,1.2-11l0.3-2.7C59.9,116.4,59.7,116.7,59.4,116.9z"/>
<path d="M54.4,115.8c-0.1-0.3-0.2-0.6-0.3-0.9l-4.5,14c-0.4,1.4-0.3,2.7,0.3,3.8c1.1-0.7,1.9-1.7,2.2-3.1l0.2-0.9
	c0.6-3,1.7-7.8,2.3-10.8l0.6-2.7C54.9,115.4,54.7,115.6,54.4,115.8z"/>
<path d="M49.5,114.1c-0.1-0.3-0.2-0.6-0.2-0.9l-6,13.4c-0.6,1.3-0.6,2.7-0.1,3.8c1.1-0.5,2-1.5,2.5-2.9l0.3-0.9
	c0.9-2.9,2.5-7.6,3.4-10.5l0.8-2.6C50.1,113.8,49.8,114,49.5,114.1z"/>
<path d="M44.7,111l-7.3,12.7c-0.7,1.2-0.9,2.6-0.5,3.8c1.2-0.4,2.2-1.3,2.8-2.6L40,124c1.2-2.8,3.3-7.3,4.5-10.1
	l1.1-2.5c-0.2,0.2-0.5,0.4-0.8,0.5C44.7,111.6,44.7,111.3,44.7,111z"/>
<path d="M40.4,108.4l-8.6,11.9c-0.8,1.2-1.1,2.5-0.9,3.7c1.2-0.3,2.3-1.1,3-2.3l0.5-0.8c1.5-2.6,4-6.9,5.5-9.6
	l1.4-2.4c-0.3,0.2-0.6,0.3-0.9,0.4C40.3,109,40.3,108.7,40.4,108.4z"/>
<path d="M36.2,105.3l-9.8,10.9c-1,1.1-1.4,2.4-1.3,3.6c1.2-0.2,2.4-0.8,3.2-2l8.6-11.9c-0.3,0.2-0.6,0.3-0.9,0.3
	C36.1,105.9,36.1,105.6,36.2,105.3z"/>
<path d="M32.4,101.8l-10.9,9.8c-1.1,1-1.6,2.2-1.6,3.4c1.2,0,2.5-0.6,3.4-1.7l9.8-10.9c-0.3,0.1-0.6,0.2-0.9,0.2
	C32.2,102.4,32.3,102.1,32.4,101.8z"/>
<path d="M28.7,98.8c0-0.3,0.1-0.6,0.3-0.9l-11.9,8.6c-1.2,0.8-1.8,2-2,3.3c1.2,0.1,2.5-0.3,3.6-1.3l10.9-9.8
	C29.3,98.8,29,98.8,28.7,98.8z"/>
<path d="M25.6,94.5c0.1-0.3,0.2-0.6,0.4-0.9L13.3,101c-1.2,0.7-2,1.8-2.3,3c1.2,0.2,2.5-0.1,3.7-0.9l11.9-8.6
	C26.2,94.6,25.9,94.6,25.6,94.5z"/>
<path d="M22.9,90c0.1-0.3,0.3-0.6,0.5-0.8l-13.4,6c-1.3,0.6-2.2,1.6-2.6,2.8c1.2,0.3,2.5,0.2,3.8-0.5l12.7-7.3
	C23.5,90.2,23.2,90.1,22.9,90z"/>
<path d="M21.3,84.6l-14,4.5C6,89.5,5,90.5,4.5,91.6C5.6,92,7,92.1,8.3,91.5l13.4-6c-0.3,0-0.6-0.1-0.9-0.2
	C20.9,85,21.1,84.8,21.3,84.6z"/>
<path d="M19.8,79.7L5.4,82.8c-1.4,0.3-2.5,1.1-3.1,2.2c1.1,0.6,2.4,0.7,3.8,0.3l14-4.5c-0.3,0-0.6-0.1-0.9-0.3
	C19.3,80.2,19.5,79.9,19.8,79.7z"/>
<path d="M18.7,74.8L4.1,76.3c-1.4,0.2-2.6,0.8-3.3,1.8c1,0.7,2.3,1,3.7,0.7l14.4-3.1c-0.3-0.1-0.6-0.2-0.9-0.4
	C18.2,75.2,18.4,75,18.7,74.8z"/>
<path d="M18.2,69.8H3.5c-1.4,0-2.7,0.6-3.5,1.5c0.9,0.8,2.2,1.2,3.7,1.1l14.6-1.5c-0.3-0.1-0.6-0.3-0.8-0.5
	C17.6,70.1,17.9,69.9,18.2,69.8z"/>
<path d="M18.2,64L3.7,62.5C2.2,62.4,1,62.8,0,63.6C0.9,64.5,2.1,65,3.5,65h14.7c-0.3-0.1-0.6-0.3-0.8-0.5
	C17.7,64.3,17.9,64.1,18.2,64z"/>
<path d="M17.7,59.5c0.3-0.2,0.7-0.4,1-0.5L4.4,56c-1.6-0.3-3,0.1-4.1,0.9c0.5,0.8,1.2,1.3,2.2,1.4
	c2.2,0.2,6.4,0.7,9.4,1l6.2,0.6C17.9,59.9,17.8,59.7,17.7,59.5z"/>
<path d="M19.8,54.1L5.9,49.6c-1.5-0.5-3-0.3-4.2,0.5c0.4,0.8,1.1,1.4,2,1.6c2.1,0.5,6.3,1.3,9.3,2l6.1,1.3
	c-0.1-0.1-0.3-0.3-0.3-0.5C19.1,54.3,19.4,54.1,19.8,54.1z"/>
<path d="M21.5,49.3l-13.4-6c-1.5-0.6-3-0.6-4.2,0.1c0.3,0.9,0.9,1.5,1.8,1.8c2.1,0.7,6.1,2,9,2.9l5.9,1.9
	c-0.1-0.1-0.2-0.3-0.3-0.5C20.7,49.4,21.1,49.3,21.5,49.3z"/>
<path d="M23.7,44.6L11,37.3c-1.4-0.8-2.9-0.9-4.2-0.4c0.2,0.9,0.8,1.6,1.6,2c2,0.9,5.9,2.6,8.7,3.9l5.7,2.5
	c-0.1-0.2-0.2-0.3-0.2-0.5C22.9,44.6,23.3,44.6,23.7,44.6z"/>
<path d="M26.3,40.2l-11.9-8.6c-1.3-0.9-2.8-1.2-4.1-0.8c0.1,0.9,0.6,1.7,1.4,2.2c1.9,1.1,5.6,3.2,8.2,4.8l5.4,3.1
	c-0.1-0.2-0.2-0.4-0.2-0.6C25.5,40.1,25.9,40.1,26.3,40.2z"/>
<path d="M29.6,36.2l-10.9-9.8c-1.1-1-2.4-1.4-3.6-1.3c0.2,1.2,0.8,2.4,2,3.2L29,37c-0.2-0.3-0.3-0.6-0.3-0.9
	C29,36.1,29.3,36.1,29.6,36.2z"/>
<path d="M33.1,32.4l-9.8-10.9c-1-1.1-2.2-1.6-3.4-1.6c0,1.2,0.6,2.5,1.7,3.4l10.9,9.8c-0.1-0.3-0.2-0.6-0.2-0.9
	C32.5,32.2,32.8,32.3,33.1,32.4z"/>
<path d="M36.1,28.7c0.3,0,0.6,0.1,0.9,0.3l-8.6-11.9c-0.8-1.2-2-1.8-3.3-2c-0.1,1.2,0.3,2.5,1.3,3.6l9.8,10.9
	C36.1,29.3,36.1,29,36.1,28.7z"/>
<path d="M40.3,25.6c0.3,0.1,0.6,0.2,0.9,0.4l-7.3-12.7c-0.7-1.2-1.8-2-3-2.3c-0.2,1.2,0.1,2.5,0.9,3.7l8.6,11.9
	C40.3,26.2,40.3,25.9,40.3,25.6z"/>
<path d="M44.8,22.9c0.3,0.1,0.6,0.3,0.8,0.5l-6-13.4c-0.6-1.3-1.6-2.2-2.8-2.6c-0.3,1.2-0.2,2.5,0.5,3.8l7.3,12.7
	C44.7,23.5,44.7,23.2,44.8,22.9z"/>
<path d="M49.6,20.8c0.3,0.1,0.5,0.3,0.8,0.6l-4.5-14C45.3,6,44.4,5,43.3,4.5c-0.5,1.1-0.5,2.5,0.1,3.8l6,13.4
	C49.4,21.4,49.4,21,49.6,20.8z"/>
<path d="M55.1,19.8L52.1,5.4C51.8,4,51,2.9,49.9,2.3c-0.6,1.1-0.7,2.4-0.3,3.8l4.5,14c0-0.3,0.1-0.6,0.3-0.9
	C54.7,19.3,54.9,19.5,55.1,19.8z"/>
<path d="M60.1,18.7L58.5,4.1c-0.2-1.4-0.8-2.6-1.8-3.3c-0.7,1-1,2.3-0.7,3.7l3.1,14.4c0.1-0.3,0.2-0.6,0.4-0.9
	C59.7,18.2,59.9,18.5,60.1,18.7z"/>
<path d="M65.1,18.2V3.5c0-1.4-0.6-2.7-1.5-3.5c-0.8,0.9-1.2,2.2-1.1,3.7l1.5,14.6c0.1-0.3,0.2-0.6,0.5-0.8
	C64.7,17.7,64.9,17.9,65.1,18.2z"/>
</svg>
</div>

<div id="shadow">
  <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" xml:space="preserve">
<circle fill="#000" cx="15" cy="15" r="15"/>
</svg>
</div>
<!--AAD037-->
              
            
!

CSS

              
                $bgcolor: darkred;
$length: 22723.375;
body {
  zoom:1.5;
  background-color:$bgcolor;
  overflow:hidden;
}
.path {
  opacity:.2;
  stroke-dasharray: $length;
  stroke-dashoffset: $length;
  animation: dash 1s linear normal infinite;
  animation-fill-mode: forwards;
}
#second {
  animation: pump 1s linear alternate infinite;
}
#secs {
  width:225px;
  height:225px;
}
#minutes svg {
  width:135px;
  height:135px;
}
#detail svg {
  width:110px;
  height:110px;
}
svg, #minutes, #second, #secs {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes dash {
  from {
    stroke-dashoffset: $length;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pump {
  from, to {
    transform: scale(0.5);
    opacity:0.5;
  }
  10%, 90% {
    transform: scale(1);
    opacity:1;
  }
}

              
            
!

JS

              
                var bgcolor = "darkred",
    bgshade = "#000",
    middle = "darkred",
    popcolor = "red",
    blk = "#000";

$("#detail path").css("opacity", "0.1").attr("stroke", "#000").attr("stroke-width", "0.5");
$("#secs path").attr("fill", middle);
$("#minutes path").attr("fill", bgcolor);
$("#hours path").attr("fill", bgcolor);

var b = 0;

// some code extracted from https://bl.ocks.org/tomgp/6475678

var hourScale = d3.scale.linear()
	.range([0,330])
	.domain([0,11]);

var minuteScale = secondScale = d3.scale.linear()
	.range([0,354])
	.domain([0,59]);

var handData = [
	{
		type:'hour',
		value:0,
	},
	{
		type:'minute',
		value:0,
	},
	{
		type:'second',
		value:0,
	}
];

function updateData() {
	var t = new Date();
	handData[0].value = (t.getHours() % 12) + t.getMinutes()/60 ;
	handData[1].value = t.getMinutes();
	handData[2].value = t.getSeconds();
}
setInterval(function(){
  updateData();
  updateSeconds();
  updateMinutes();
  updateHour();
}, 1000);

function groupMin(n){
  return Math.ceil(n/5);
}

function updateHour() {
  var h = Math.floor(handData[0].value);
  if (h == 0) {
    var hobj = $("#hours path:nth-child(12)");
    var lobj = $("#hours path:nth-child(11)");
  } else {
    var hobj = $("#hours path:nth-child("+h+")");
    var lobj = $("#hours path:nth-child("+(h-1)+")");
  }  
  hobj.attr("fill", blk);
  lobj.attr("fill", bgcolor);
}

function updateMinutes() {
  var detail = handData[1].value,
      m = groupMin(detail),
      detailobj = $("#detail path:nth-child("+detail+")"),
      mobj = $("#minutes path:nth-child("+ m +")");                    
  
  detailobj.css("opacity", "1");
  $("#detail path:nth-child("+(detail-1)+")").css("opacity", "0.1");
  for (var i=0; i<m; i++){
      $("#minutes path:nth-child("+ i +")").attr("fill", bgcolor);//change for 5mn grouping
  }
  for (var i=0; i<detail; i++){
      $("#detail path:nth-child("+i+")").attr("fill", popcolor).css("opacity", "1");
    }
  if (m == 1) {
    $("#minutes path").attr("fill", bgcolor);
  }
  mobj.attr("fill", bgcolor);//change for 5mn grouping
}

function updateSeconds(){
  var s = handData[2].value,
      sobj = $("#secs path:nth-child("+(s+1)+")");
  for (var i=0; i<s+1; i++){
      $("#secs path:nth-child("+i+")").attr("fill", popcolor);
    }
  if (s+1 == 1) {
    $("#secs path").attr("fill", middle);
  }
  sobj.attr("fill", blk);    
}
              
            
!
999px

Console