<div class="clock" id="clock">
  <div class="hand hour-hand"></div>
  <div class="hand minute-hand"></div>
  <div class="hand second-hand"></div>
  <ul>
    <li><span>&bull;</span></li>
    <li><span>&bull;</span></li>
    <li><span>3</span></li>
    <li><span>&bull;</span></li>
    <li><span>&bull;</span></li>
    <li><span>6</span></li>
    <li><span>&bull;</span></li>
    <li><span>&bull;</span></li>
    <li><span>9</span></li>
    <li><span>&bull;</span></li>
    <li><span>&bull;</span></li>
    <li><span>12</span></li>
  </ul>
</div>
/* clock witch conic gradient, updates variables in JS */

.clock {
  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;
  /* general clock vars */
  --hour-hand-color: #59c9a5;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #56e39f;
  --minute-hand-degrees: 0deg;
  --second-hand-color: #c9dfec;
  --second-hand-degrees: 0deg;
  --numbers-color: #153131;
  --bullets-color: #52489c;
  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--start),
    rgba(255, 255, 255, 0.5) 2deg,
    rgba(0, 0, 0, 0.5) var(--end),
    rgba(255, 255, 255, 0.7) 2deg,
    rgba(0, 0, 0, 0.7)
  );
  margin: 0 auto;
  border: 7px solid #92d5e6;
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.5),
    inset -4px -4px 10px rgba(67, 67, 67, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.clock::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(29, 235, 214);
  background: radial-gradient(
    circle,
    rgba(29, 235, 214, 0.7) 80%,
    rgba(41, 139, 142, 0.9) 100%
  );
  content: "";
  z-index: -1;
}

/* 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%;
  width: 5px;
  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));
}

/* Clock indexes */

.clock ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clock ul li {
  position: absolute;
  width: 20px;
  height: 20px;
  font-family: "Georgia", Times, serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: var(--bullets-color);
}

.clock ul li:nth-child(1) {
  top: 7.5%;
  right: 23%;
}

.clock ul li:nth-child(2) {
  top: 25.5%;
  right: 6.75%;
}

.clock ul li:nth-child(3) {
  top: calc(50% - 13px);
  right: 2%;
  font-size: 26px;
  color: var(--numbers-color);
}

.clock ul li:nth-child(4) {
  top: 70%;
  right: 7%;
}

.clock ul li:nth-child(5) {
  top: 87%;
  right: 23.5%;
}

.clock ul li:nth-child(6) {
  top: calc(99% - 26px);
  right: calc(50% - 10px);
  font-size: 26px;
  color: var(--numbers-color);
}

.clock ul li:nth-child(7) {
  top: 86.4%;
  left: 23.3%;
}

.clock ul li:nth-child(8) {
  top: 70%;
  left: 7%;
}

.clock ul li:nth-child(9) {
  top: calc(50% - 13px);
  left: 2%;
  font-size: 26px;
  color: var(--numbers-color);
}

.clock ul li:nth-child(10) {
  top: 24.5%;
  left: 6.5%;
}

.clock ul li:nth-child(11) {
  top: 7%;
  left: 23.5%;
}

.clock ul li:nth-child(12) {
  top: 2%;
  right: calc(50% - 7px);
  font-size: 26px;
  color: var(--numbers-color);
}

/* Default body styling */
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(#6e7dab 70%, transparent 30%),
    radial-gradient(#6e7dab 70%, transparent 30%), #5762d5;
  background-size: 2vw 2vw;
}
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.