Neon Analog Clock
HTML
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
SCSS
$size: 200px;
@mixin pointer {
background-color: currentColor;
position: absolute;
transform-origin: 50% 100%;
}
html, body {
height: 100%;
}
body {
align-items: center;
background-color: #1D1F20;
color: cyan;
display: flex;
justify-content: center;
}
.clock {
background-color: rgba(0,0,0,0.1);
border: 4px solid currentColor;
border-radius: 50%;
box-shadow: inset 3px 3px 6px rgba(0,0,0,0.8);
height: $size;
width: $size;
position: relative;
.center {
@include pointer;
border-radius: 50%;
height: 10px;
left: calc(50% - 5px);
top: calc(50% - 5px);
width: 10px;
&:before { display: none }
}
.hour {
@include pointer;
border-radius: 3px;
height: 28%;
left: calc(50% - 3px);
top: 22%;
transform: rotate(0deg);
width: 6px;
}
.minute {
@include pointer;
border-radius: 2px;
height: 40%;
left: calc(50% - 2px);
opacity: 0.9;
top: 10%;
transform: rotate(45deg);
width: 4px;
}
.second {
@include pointer;
border-radius: 1px;
height: 40%;
left: calc(50% - 1px);
opacity: 0.7;
top: 10%;
transform: rotate(0deg);
width: 2px;
}
}
JAVASCRIPT
(function () {
'use strict';
var hourPointer = document.querySelector('.hour'),
minutePointer = document.querySelector('.minute'),
secondPointer = document.querySelector('.second'),
transform = getTransform();
function updateClock() {
var now = new Date(),
second = now.getSeconds() * 6,
minute = now.getMinutes() * 6 + (second / 60),
hour = (((now.getHours() % 12) / 12) * 360) + (minute / 12);
hourPointer.style[transform] = `rotate(${hour}deg)`;
minutePointer.style[transform] = `rotate(${minute}deg)`;
secondPointer.style[transform] = `rotate(${second}deg)`;
}
function getTransform() {
var style = document.createElement('div').style,
transform,
vendor;
if (undefined !== style[vendor = 'webkitTransform']) {
transform = vendor;
}
if (undefined !== style[vendor = 'msTransform']) {
transform = vendor;
}
if (undefined !== style[vendor = 'transform']) {
transform = vendor;
}
return transform;
}
setInterval(updateClock, 1000);
} ());
