Clock

Clock

Clock

index.html

<svg width="558px" height="558px" viewBox="0 0 558 558" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-183.000000, -86.000000)">
            <g transform="translate(183.000000, 86.000000)">
                <g>
                    <circle fill="#FFFFFF" cx="279" cy="279" r="279"></circle>
                    <path d="M191.327637,164 L195.453613,142.925781 L202.182129,158.160156 L209.151855,142.925781 L212.858887,164 L209.824707,164 L207.933105,152.167969 L202.131348,164.901367 L196.494629,152.155273 L194.387207,164 L191.327637,164 Z M220.032715,154.110352 C220.032715,151.351223 221.044098,148.981455 223.066895,147.000977 C225.081228,145.020498 227.501776,144.030273 230.328613,144.030273 C233.121596,144.030273 235.516754,145.028961 237.51416,147.026367 C239.52003,149.023773 240.522949,151.423163 240.522949,154.224609 C240.522949,157.042983 239.515798,159.433909 237.501465,161.397461 C235.478668,163.369476 233.036961,164.355469 230.17627,164.355469 C227.645658,164.355469 225.37322,163.479501 223.358887,161.727539 C221.141428,159.789378 220.032715,157.250341 220.032715,154.110352 L220.032715,154.110352 Z M223.016113,154.148438 C223.016113,156.315115 223.743971,158.096673 225.199707,159.493164 C226.64698,160.889655 228.318513,161.587891 230.214355,161.587891 C232.271006,161.587891 234.006015,160.87696 235.419434,159.455078 C236.832852,158.016269 237.539551,156.264333 237.539551,154.199219 C237.539551,152.108714 236.841316,150.356778 235.444824,148.943359 C234.056796,147.521477 232.338715,146.810547 230.290527,146.810547 C228.250804,146.810547 226.52849,147.521477 225.123535,148.943359 C223.71858,150.348314 223.016113,152.083323 223.016113,154.148438 L223.016113,154.148438 Z M248.242676,164 L248.242676,143.06543 L262.537598,158.020508 L262.537598,144.398438 L265.495605,144.398438 L265.495605,165.193359 L251.200684,150.276367 L251.200684,164 L248.242676,164 Z M274.192871,164 L274.192871,144.398438 L278.306152,144.398438 C280.278167,144.398438 281.835444,144.593097 282.978027,144.982422 C284.205247,145.363283 285.318192,146.010738 286.316895,146.924805 C288.339691,148.769866 289.351074,151.194646 289.351074,154.199219 C289.351074,157.212255 288.297374,159.64973 286.189941,161.511719 C285.131993,162.442713 284.023281,163.090167 282.86377,163.454102 C281.780431,163.818036 280.244313,164 278.255371,164 L274.192871,164 Z M277.150879,161.219727 L278.483887,161.219727 C279.812669,161.219727 280.917151,161.08008 281.797363,160.800781 C282.677576,160.504556 283.473141,160.034834 284.184082,159.391602 C285.639818,158.062819 286.367676,156.332042 286.367676,154.199219 C286.367676,152.049468 285.648282,150.305996 284.209473,148.96875 C282.914544,147.775385 281.006035,147.178711 278.483887,147.178711 L277.150879,147.178711 L277.150879,161.219727 Z M307.620605,159.239258 L299.229004,159.239258 L297.04541,164 L293.858887,164 L303.558105,143.166992 L312.914551,164 L309.677246,164 L307.620605,159.239258 Z M306.414551,156.458984 L303.507324,149.793945 L300.460449,156.458984 L306.414551,156.458984 Z M322.322754,144.398438 L322.322754,164 L319.364746,164 L319.364746,144.398438 L322.322754,144.398438 Z M331.032715,164 L331.032715,143.06543 L345.327637,158.020508 L345.327637,144.398438 L348.285645,144.398438 L348.285645,165.193359 L333.990723,150.276367 L333.990723,164 L331.032715,164 Z M367.799316,147.178711 L359.940918,147.178711 L359.940918,151.888672 L367.570801,151.888672 L367.570801,154.668945 L359.940918,154.668945 L359.940918,161.219727 L367.799316,161.219727 L367.799316,164 L356.98291,164 L356.98291,144.398438 L367.799316,144.398438 L367.799316,147.178711 Z" fill="#000000"></path>
                    <path d="M277,24 L282,24 L282,39 L277,39 L277,24 Z M303.720718,25.1383346 L308.693327,25.6609769 L307.1254,40.5788053 L302.152791,40.056163 L303.720718,25.1383346 Z M330.176068,29.0635088 L335.066806,30.1030672 L331.948131,44.7752813 L327.057393,43.7357228 L330.176068,29.0635088 Z M356.076201,35.7325176 L360.831483,37.2776026 L356.196228,51.5434503 L351.440946,49.9983653 L356.076201,35.7325176 Z M381.137349,45.072294 L385.705076,47.1059772 L379.604026,60.809159 L375.036299,58.7754758 L381.137349,45.072294 Z M405.084936,56.9805093 L409.415064,59.4805093 L401.915064,72.4708904 L397.584936,69.9708904 L405.084936,56.9805093 Z M427.656589,71.3266948 L431.701674,74.2656211 L422.884896,86.400876 L418.839811,83.4619497 L427.656589,71.3266948 Z M448.605008,87.9536706 L452.320732,91.2993236 L442.283773,102.446496 L438.568049,99.100843 L448.605008,87.9536706 Z M467.700676,106.679268 L471.046329,110.394992 L459.899157,120.431951 L456.553504,116.716227 L467.700676,106.679268 Z M484.734379,127.298326 L487.673305,131.343411 L475.53805,140.160189 L472.599124,136.115104 L484.734379,127.298326 Z M499.519491,149.584936 L502.019491,153.915064 L489.02911,161.415064 L486.52911,157.084936 L499.519491,149.584936 Z M511.894023,173.294924 L513.927706,177.862651 L500.224524,183.963701 L498.190841,179.395974 L511.894023,173.294924 Z M521.722397,198.168517 L523.267482,202.923799 L509.001635,207.559054 L507.45655,202.803772 L521.722397,198.168517 Z M528.896933,223.933194 L529.936491,228.823932 L515.264277,231.942607 L514.224719,227.051869 L528.896933,223.933194 Z M533.339023,250.306673 L533.861665,255.279282 L518.943837,256.847209 L518.421195,251.8746 L533.339023,250.306673 Z M535,277 L535,282 L520,282 L520,277 L535,277 Z M533.861665,303.720718 L533.339023,308.693327 L518.421195,307.1254 L518.943837,302.152791 L533.861665,303.720718 Z M529.936491,330.176068 L528.896933,335.066806 L514.224719,331.948131 L515.264277,327.057393 L529.936491,330.176068 Z M523.267482,356.076201 L521.722397,360.831483 L507.45655,356.196228 L509.001635,351.440946 L523.267482,356.076201 Z M513.927706,381.137349 L511.894023,385.705076 L498.190841,379.604026 L500.224524,375.036299 L513.927706,381.137349 Z M502.019491,405.084936 L499.519491,409.415064 L486.52911,401.915064 L489.02911,397.584936 L502.019491,405.084936 Z M487.673305,427.656589 L484.734379,431.701674 L472.599124,422.884896 L475.53805,418.839811 L487.673305,427.656589 Z M471.046329,448.605008 L467.700676,452.320732 L456.553504,442.283773 L459.899157,438.568049 L471.046329,448.605008 Z M452.320732,467.700676 L448.605008,471.046329 L438.568049,459.899157 L442.283773,456.553504 L452.320732,467.700676 Z M431.701674,484.734379 L427.656589,487.673305 L418.839811,475.53805 L422.884896,472.599124 L431.701674,484.734379 Z M409.415064,499.519491 L405.084936,502.019491 L397.584936,489.02911 L401.915064,486.52911 L409.415064,499.519491 Z M385.705076,511.894023 L381.137349,513.927706 L375.036299,500.224524 L379.604026,498.190841 L385.705076,511.894023 Z M360.831483,521.722397 L356.076201,523.267482 L351.440946,509.001635 L356.196228,507.45655 L360.831483,521.722397 Z M335.066806,528.896933 L330.176068,529.936491 L327.057393,515.264277 L331.948131,514.224719 L335.066806,528.896933 Z M308.693327,533.339023 L303.720718,533.861665 L302.152791,518.943837 L307.1254,518.421195 L308.693327,533.339023 Z M282,535 L277,535 L277,520 L282,520 L282,535 Z M255.279282,533.861665 L250.306673,533.339023 L251.8746,518.421195 L256.847209,518.943837 L255.279282,533.861665 Z M228.823932,529.936491 L223.933194,528.896933 L227.051869,514.224719 L231.942607,515.264277 L228.823932,529.936491 Z M202.923799,523.267482 L198.168517,521.722397 L202.803772,507.45655 L207.559054,509.001635 L202.923799,523.267482 Z M177.862651,513.927706 L173.294924,511.894023 L179.395974,498.190841 L183.963701,500.224524 L177.862651,513.927706 Z M153.915064,502.019491 L149.584936,499.519491 L157.084936,486.52911 L161.415064,489.02911 L153.915064,502.019491 Z M131.343411,487.673305 L127.298326,484.734379 L136.115104,472.599124 L140.160189,475.53805 L131.343411,487.673305 Z M110.394992,471.046329 L106.679268,467.700676 L116.716227,456.553504 L120.431951,459.899157 L110.394992,471.046329 Z M91.2993236,452.320732 L87.9536706,448.605008 L99.100843,438.568049 L102.446496,442.283773 L91.2993236,452.320732 Z M74.2656211,431.701674 L71.3266948,427.656589 L83.4619497,418.839811 L86.400876,422.884896 L74.2656211,431.701674 Z M59.4805093,409.415064 L56.9805093,405.084936 L69.9708904,397.584936 L72.4708904,401.915064 L59.4805093,409.415064 Z M47.1059772,385.705076 L45.072294,381.137349 L58.7754758,375.036299 L60.809159,379.604026 L47.1059772,385.705076 Z M37.2776026,360.831483 L35.7325176,356.076201 L49.9983653,351.440946 L51.5434503,356.196228 L37.2776026,360.831483 Z M30.1030672,335.066806 L29.0635088,330.176068 L43.7357228,327.057393 L44.7752813,331.948131 L30.1030672,335.066806 Z M25.6609769,308.693327 L25.1383346,303.720718 L40.056163,302.152791 L40.5788053,307.1254 L25.6609769,308.693327 Z M24,282 L24,277 L39,277 L39,282 L24,282 Z M25.1383346,255.279282 L25.6609769,250.306673 L40.5788053,251.8746 L40.056163,256.847209 L25.1383346,255.279282 Z M29.0635088,228.823932 L30.1030672,223.933194 L44.7752813,227.051869 L43.7357228,231.942607 L29.0635088,228.823932 Z M35.7325176,202.923799 L37.2776026,198.168517 L51.5434503,202.803772 L49.9983653,207.559054 L35.7325176,202.923799 Z M45.072294,177.862651 L47.1059772,173.294924 L60.809159,179.395974 L58.7754758,183.963701 L45.072294,177.862651 Z M56.9805093,153.915064 L59.4805093,149.584936 L72.4708904,157.084936 L69.9708904,161.415064 L56.9805093,153.915064 Z M71.3266948,131.343411 L74.2656211,127.298326 L86.400876,136.115104 L83.4619497,140.160189 L71.3266948,131.343411 Z M87.9536706,110.394992 L91.2993236,106.679268 L102.446496,116.716227 L99.100843,120.431951 L87.9536706,110.394992 Z M106.679268,91.2993236 L110.394992,87.9536706 L120.431951,99.100843 L116.716227,102.446496 L106.679268,91.2993236 Z M127.298326,74.2656211 L131.343411,71.3266948 L140.160189,83.4619497 L136.115104,86.400876 L127.298326,74.2656211 Z M149.584936,59.4805093 L153.915064,56.9805093 L161.415064,69.9708904 L157.084936,72.4708904 L149.584936,59.4805093 Z M173.294924,47.1059772 L177.862651,45.072294 L183.963701,58.7754758 L179.395974,60.809159 L173.294924,47.1059772 Z M198.168517,37.2776026 L202.923799,35.7325176 L207.559054,49.9983653 L202.803772,51.5434503 L198.168517,37.2776026 Z M223.933194,30.1030672 L228.823932,29.0635088 L231.942607,43.7357228 L227.051869,44.7752813 L223.933194,30.1030672 Z M250.306673,25.6609769 L255.279282,25.1383346 L256.847209,40.056163 L251.8746,40.5788053 L250.306673,25.6609769 Z" fill="#000000"></path>
                    <path d="M275,23 L284,23 L284,57 L275,57 L275,23 Z M403.602886,55.0474966 L411.397114,59.5474966 L394.397114,88.9923604 L386.602886,84.4923604 L403.602886,55.0474966 Z M498.952503,147.102886 L503.452503,154.897114 L474.00764,171.897114 L469.50764,164.102886 L498.952503,147.102886 Z M535.5,274.5 L535.5,283.5 L501.5,283.5 L501.5,274.5 L535.5,274.5 Z M503.452503,403.102886 L498.952503,410.897114 L469.50764,393.897114 L474.00764,386.102886 L503.452503,403.102886 Z M411.397114,498.452503 L403.602886,502.952503 L386.602886,473.50764 L394.397114,469.00764 L411.397114,498.452503 Z M284,535 L275,535 L275,501 L284,501 L284,535 Z M155.397114,502.952503 L147.602886,498.452503 L164.602886,469.00764 L172.397114,473.50764 L155.397114,502.952503 Z M60.0474966,410.897114 L55.5474966,403.102886 L84.9923604,386.102886 L89.4923604,393.897114 L60.0474966,410.897114 Z M23.5,283.5 L23.5,274.5 L57.5,274.5 L57.5,283.5 L23.5,283.5 Z M55.5474966,154.897114 L60.0474966,147.102886 L89.4923604,164.102886 L84.9923604,171.897114 L55.5474966,154.897114 Z M147.602886,59.5474966 L155.397114,55.0474966 L172.397114,84.4923604 L164.602886,88.9923604 L147.602886,59.5474966 Z" fill="#000000"></path>
                </g>
                <path d="M274,29 L284,29 L290,311 L268,311 L274,29 Z" fill="#000" class="hand minute"></path>
                <path d="M274,79 L284,79 L290,311 L268,311 L274,79 Z" fill="#000" class="hand hour"></path>
                <path d="M282,88.8118316 L282,272.426764 C284.912981,273.456355 287,276.234453 287,279.5 C287,282.765547 284.912981,285.543645 282,286.573236 L282,347 L277,347 L277,286.573236 C274.087019,285.543645 272,282.765547 272,279.5 C272,276.234453 274.087019,273.456355 277,272.426764 L277,88.8118316 C269.073641,87.6070787 263,80.7628268 263,72.5 C263,63.3873016 270.387302,56 279.5,56 C288.612698,56 296,63.3873016 296,72.5 C296,80.7628268 289.926359,87.6070787 282,88.8118316 Z" fill="#E82110" class="hand second"></path>
            </g>
        </g>
    </g>
</svg>

script.js

var sec = document.querySelector('.hand.second'),
    min = document.querySelector('.hand.minute'),
    hour = document.querySelector('.hand.hour');

setInterval(function() {
	function r(el, deg) {
    if(deg > 360) deg = 0;
		el.style.transform = 'rotate('+ deg +'deg)';
	}
	var d = new Date()
	r(sec, 6.15*(d.getSeconds() + (d.getMilliseconds()*.001)))  
	r(min, 6*d.getMinutes())
	r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 10)

style.scss

* {
  margin: 0;
}

html, body {
  background-color: black;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  margin: 50px;
  max-width: 100%;
  max-height: 100%;
}

.hand {
  transform-origin: center 280px;
  filter: drop-shadow(2px 2px 2px black);
}

.hand.minute, .hand.hour {
  transition: .5s cubic-bezier(0.65, 0.1, 0, 1.2);
}