<div class="clock" id="clock">
  <div class="hand second-hand"></div>
  <div class="hand minute-hand"></div>
  <div class="hand hour-hand"></div>
</div>
.clock {
  /* general clock vars */
  --hour-hand-degrees: 0deg;
  --minute-hand-degrees: 0deg;
  --second-hand-degrees: 0deg;
  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
}

/* clock hands */
.hand {
  background: conic-gradient(
    from 0,
    rgba(255, 255, 255, 1) 2deg,
    rgba(0, 0, 0, 1) 0,
    rgba(255, 255, 255, 1) 1deg,
    rgba(0, 0, 0, 1)
  );
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
}

.second-hand {
  transform: rotate(var(--second-hand-degrees));
}

.hour-hand {
  transform: rotate(var(--hour-hand-degrees)) scale(0.7);
  opacity: 0.7;
}

.minute-hand {
  transform: rotate(var(--minute-hand-degrees)) scale(0.99);
  opacity: 1;
}
const clock = document.getElementById("clock");
function setDate() {
  // Get time
  const now = new Date();

  // Calculate clock angles
  const secondsAngle = now.getSeconds() * 6;
  // 60 *6 = 360(deg)
  const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
  // Same calculation as seconds but add a bit of angle for more accuracy based on second count
  const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;
  /* example hour calculation 23h
  remainder of 23 = 11
  11 / 12 = 0.916
  0.916 * 360 = 330(deg)
  (+ add the minute angle devided by 12 for more accuracy)
  */

  // Set the hands angles in css variables
  clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");

  clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");

  clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");
}

// Tick tick tick
setInterval(setDate, 1000);

setDate();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.