HTML
.art

• var d = 0;
  while d < 4
  .digit
  - var c = 0;
  while c < 6
  svg(class=clock clock--${d * 6 + c} width=“100” height=“100” viewBox=“0 0 100 100”)
  path(class=“clock-smallHand” d=“M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z” stroke=“none” fill=“#4A4A4A” fill-rule=“evenodd”)
  path(class=“clock-largeHand” d=“M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z” stroke=“none” fill=“#4A4A4A” fill-rule=“evenodd”)
  - c++
  - d++
  .text
  h1 Clock Clock 24
  p
  small Code
  br
  a(href=“https://manu.ninja/”) Manuel Wieser
  p
  small Design
  br
  a(href=“http://www.humanssince1982.com/”) Humans since 1982
  .trigger.trigger–left
  .trigger.trigger–right

CSS

html {
width: 100%;
height: 100%;
}

body {
min-height: 100%;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

font-family: ‘Source Sans Pro’, sans-serif;
color: #4a4a4a;

cursor: default;
}

.art {
cursor: zoom-in;
margin: 5vw 0;
}

.art–full {
cursor: zoom-out;
}

.text {
margin-bottom: 5vw;
text-align: center;
}

a {
color: lighten(#4a4a4a, 25%);
text-decoration: none;
}

.digit {
float: left;
}

.clock {
–small-hand: -135deg;
–large-hand: -45deg;

margin: .3vw; // 3px
width: 10vw;
height: 10vw;

border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);

float: left;
&:nth-of-type(2n+1) {
clear: left;
}
}

.clock-smallHand,
.clock-largeHand {
transform-origin: 50px center;
transition: transform 10s;
}

.clock-smallHand {
transform: rotateZ(var(–small-hand));
}

.clock-largeHand {
transform: rotateZ(var(–large-hand));
}

.s-hidden {
display: none;
}

.trigger {
position: fixed;
bottom: 0;
width: 25%;
height: 5vw;
cursor: help;
}

.trigger–left {
left: 0;
}

.trigger–right {
right: 0;
}

JS

const digits = [
[ // 0
{ hour: 6, minute: 15 },
{ hour: 9, minute: 30 },
{ hour: 6, minute: 0 },
{ hour: 0, minute: 30 },
{ hour: 3, minute: 0 },
{ hour: 0, minute: 45 }
], [ // 1
{ hour: 7.5, minute: 37.5 },
{ hour: 6, minute: 30 },
{ hour: 7.5, minute: 37.5 },
{ hour: 6, minute: 0 },
{ hour: 7.5, minute: 37.5 },
{ hour: 0, minute: 0 }
], [ // 2
{ hour: 3, minute: 15 },
{ hour: 9, minute: 30 },
{ hour: 6, minute: 15 },
{ hour: 0, minute: 45 },
{ hour: 0, minute: 15 },
{ hour: 9, minute: 45 }
], [ // 3
{ hour: 3, minute: 15 },
{ hour: 9, minute: 30 },
{ hour: 3, minute: 15 },
{ hour: 9, minute: 0 },
{ hour: 3, minute: 15 },
{ hour: 9, minute: 0 }
], [ // 4
{ hour: 6, minute: 30 },
{ hour: 6, minute: 30 },
{ hour: 0, minute: 15 },
{ hour: 6, minute: 0 },
{ hour: 7.5, minute: 37.5 },
{ hour: 0, minute: 0 }
], [ // 5
{ hour: 6, minute: 15 },
{ hour: 9, minute: 45 },
{ hour: 0, minute: 15 },
{ hour: 6, minute: 45 },
{ hour: 3, minute: 15 },
{ hour: 0, minute: 45 }
], [ // 6
{ hour: 6, minute: 15 },
{ hour: 9, minute: 45 },
{ hour: 6, minute: 0 },
{ hour: 6, minute: 45 },
{ hour: 0, minute: 15 },
{ hour: 0, minute: 45 }
], [ // 7
{ hour: 3, minute: 15 },
{ hour: 6, minute: 45 },
{ hour: 7.5, minute: 37.5 },
{ hour: 6, minute: 0 },
{ hour: 7.5, minute: 37.5 },
{ hour: 0, minute: 0 }
], [ // 8
{ hour: 6, minute: 15 },
{ hour: 6, minute: 45 },
{ hour: 0, minute: 15 },
{ hour: 0, minute: 45 },
{ hour: 0, minute: 15 },
{ hour: 0, minute: 45 }
], [ // 9
{ hour: 6, minute: 15 },
{ hour: 6, minute: 45 },
{ hour: 3, minute: 0 },
{ hour: 6, minute: 0 },
{ hour: 3, minute: 15 },
{ hour: 0, minute: 45 }
]
];

const happyDigit = Array(6).fill({ hour: 22.5, minute: 7.5 });
const neutralDigit = Array(6).fill({ hour: 7.5, minute: 7.5 });

function showSpecialState(digit) {
stopClock();
for (let x = 0; x < 4; x++) {
setDigit(x, digit);
}
window.setTimeout(() => startClock(), 10000);
}

document.querySelector(‘.trigger–left’).addEventListener(‘click’, e => {
showSpecialState(happyDigit);
});

document.querySelector(‘.trigger–right’).addEventListener(‘click’, e => {
showSpecialState(neutralDigit);
});

window.addEventListener(‘keydown’, e => {
const h = 72;
const n = 78;
if (h === e.keyCode) {
showSpecialState(happyDigit);
}
if (n === e.keyCode) {
showSpecialState(neutralDigit);
}
});

document.querySelector(‘.art’).addEventListener(‘click’, e => {
document.querySelector(‘.text’).classList.toggle(‘s-hidden’);
document.querySelector(‘.art’).classList.toggle(‘art–full’);
})

function hourToDegrees(hour) {
return hour * (360 / 12) - 90;
}

function minuteToDegrees(minute) {
return minute * (360 / 60) - 90;
}

function setHands(id, hour, minute) {
const clock = document.querySelector(.clock--${id});
clock.style.setProperty(--small-hand, ${hourToDegrees(hour) + 360}deg);
clock.style.setProperty(--large-hand, ${minuteToDegrees(minute) - 360}deg);
}

function setDigit(id, values) {
for (let x = 0; x < 6; x++) {
setHands(id * 6 + x, values[x].hour, values[x].minute);
}
}

function setTime(time) {
setDigit(0, digits[time.charAt(0)]);
setDigit(1, digits[time.charAt(1)]);
setDigit(2, digits[time.charAt(3)]);
setDigit(3, digits[time.charAt(4)]);
}

let state;
let interval;

function startClock() {
state = ‘----’;
interval = window.setInterval(() => {
const time = new Date(Date.now() + 10000).toTimeString();
if (time !== state) {
setTime(time);
state = time;
}
}, 1000);
}

function stopClock() {
clearInterval(interval);
}

startClock();