<div class="clock">
  <div class="hand seconds">
  </div>
  <div class="hand minutes">
  </div>
  <div class="hand hours">
  </div>
</div>
.clock {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #80765D;
  background-color: #FFF8C5;
  position: relative;
}

.hand {
  width: 1px;
  height: 50%;
  background-color: #000;
  position: absolute;
  top: 0%;
  left: 50%;
  transform-origin: bottom;
}

.seconds {
  background-color: #E86469;
}

.hours {
  width: 2px;
  height: 40%;
  top: 10%;
  left: calc(50% - 1px)
}
const SECONDS_IN_A_MINUTE = 60;
const MINUTES_IN_AN_HOUR = 60;
const TWELVE_HOURS = 12;

function updateClock() {
  const secondsAngle = ratioToDeg(getSeconds(), SECONDS_IN_A_MINUTE);
  rotateElement('.seconds', secondsAngle);
  
  const minutesAngle = ratioToDeg(getMinutes(), MINUTES_IN_AN_HOUR);
  rotateElement('.minutes', minutesAngle);
  
  const hoursAngle = ratioToDeg(getHours() % TWELVE_HOURS, TWELVE_HOURS);
  rotateElement('.hours', hoursAngle);
}

function rotateElement(selector, angle) {
  const element = document.querySelector(selector);
  element.style.transform = `rotate(${angle}deg)`;
}

function ratioToDeg(val, max) {
  return (val / max) * 360;
}

function getSeconds() {
  return new Date().getSeconds();
}

function getMinutes() {
  return new Date().getMinutes();
}

function getHours() {
  return new Date().getHours();
}

setInterval(() => {
  updateClock();
}, 1000);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.