<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Analog CLock</title>
  
<style>
  @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");
*, *:afater, *:before {
  box-sizing: border-box;
}

body, html {
  background: #000;
  margin: 0;
  height: 100vh;
  color: #fff;
  font-family: "Comfortaa", cursive;
}

.clock {
  --clock-size: 360px;
  width: var(--clock-size);
  height: var(--clock-size);
  position: fixed;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}
.spike {
  position: absolute;
  width: 8px;
  height: 1px;
  background: #fff9;
  line-height: 20px;
  transform-origin: 50%;
  z-index: 5;
  inset: 0;
  margin: auto;
  font-style: normal;
  transform: rotate(var(--rotate)) translateX(var(--dail-size));
}
.spike:nth-child(5n+1) {
  box-shadow: -7px 0 #fff9;
}
.spike:nth-child(5n+1):after {
  content: attr(data-i);
  position: absolute;
  right: 22px;
  top: -10px;
  transition: 1s linear;
  transform: rotate(calc( var(--dRotate) - var(--rotate)));
}

.seconds {
  --dRotate: 0deg;
  --dail-size: calc((var(--clock-size)/ 2) - 8px);
  font-weight: 800;
  font-size: 18px;
  transform: rotate(calc( -1 * var(--dRotate)));
  position: absolute;
  inset: 0;
  margin: auto;
  transition: 1s linear;
}

.minutes {
  --dail-size: calc((var(--clock-size)/ 2) - 65px);
  font-size: 16px;
  transform: rotate(calc( -1 * var(--dRotate)));
  position: absolute;
  inset: 0;
  margin: auto;
  transition: 1s linear;
}

.stop-anim {
  transition: 0s linear;
}
.stop-anim .spike:after {
  transition: 0s linear !important;
}

.hour {
  font-size: 70px;
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.minute {
  font-size: 36px;
  font-weight: 900;
  position: absolute;
  background: #000;
  z-index: 10;
  right: calc(var(--clock-size)/ 4.5);
  top: 50%;
  transform: translateY(-50%);
}
.minute:after {
  content: "";
  position: absolute;
  border: 2px solid #fff;
  border-right: none;
  height: 50px;
  left: -10px;
  top: 50%;
  border-radius: 40px 0 0 40px;
  width: calc(var(--clock-size)/ 2.75);
  transform: translatey(-50%);
}
</style>
</head>
<body>

<second class="clock">
  <div class="seconds"></div>
  <div class="minutes"></div>
  <div class="minute">44</div>
  <div class="hour"></div>
</second>

  <script>
  const seconds = document.querySelector('.seconds');
const minutes = document.querySelector('.minutes');
const minute = document.querySelector('.minute');
const hour = document.querySelector('.hour');

// Create spikes
for(let s = 0; s < 60 ; s++){
  let mSpikeEl = document.createElement('i');
  let sSpikeEl = document.createElement('i');
  mSpikeEl.className = 'spike'
  sSpikeEl.className = 'spike'
  mSpikeEl.style = `--rotate:${6 * s}deg`;
  sSpikeEl.style = `--rotate:${6 * s}deg`;
  mSpikeEl.setAttribute('data-i', s);
  sSpikeEl.setAttribute('data-i', s);

  seconds.append(sSpikeEl);
  minutes.append(mSpikeEl);
}

function getTime() {
    let date = new Date(),
    s  = date.getSeconds() ,
    m  = date.getMinutes();
  
    hour.textContent = date.getHours();
    minute.textContent = m;
  

    minutes.style = `--dRotate:${6 * m}deg`;

    if(s == 0){
      seconds.classList.add('stop-anim')
    } else{
      seconds.classList.remove('stop-anim')
    }
    if(m == 0){
      minutes.classList.add('stop-anim')
    } else{
      minutes.classList.remove('stop-anim')
    }
    
      seconds.style = `--dRotate:${6 * s}deg`;
}






setInterval(getTime, 1000);
getTime();
  </script>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.