<div class="clock" id="clock">
  <div class="hand hour-hand"></div>
  <div class="hand minute-hand"></div>
  <div class="hand second-hand"></div>
</div>
.clock {
  /* general clock vars */
  --hour-hand-color: #000;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #000;
  --minute-hand-degrees: 0deg;
  --second-hand-color: hotpink;
  --second-hand-degrees: 0deg;
  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;
  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  border: 7px solid #000;
  background: conic-gradient(
    from var(--start),
    rgba(255, 255, 255, 1) 2deg,
    rgba(0, 0, 0, 0.5) var(--end),
    rgba(255, 255, 255, 1) 2deg,
    rgba(0, 0, 0, 0.7)
  );
}

/* clock hands */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 4px;
  margin-left: -2px;
  background: var(--second-hand-color);
  border-radius: 6px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

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

.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}

.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}
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");

  // Conic gradient, find start and endposition of gradient
  let startPosition = minsAngle;
  let endPosition = hourAngle - minsAngle;

  // Check if the big hand is moved besides the small hand, we will use a negative start for the big hand and re-calculate the stop based on that

  if (minsAngle > hourAngle) {
    startPosition = minsAngle - 360;
    endPosition = hourAngle - startPosition;
  }

  //Set the conic gradient variables
  clock.style.setProperty("--start", startPosition + "deg");

  clock.style.setProperty("--end", endPosition + "deg");
}

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

setDate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.