https://youtu.be/C2aG_wzVuew

clock.html

<style>
div {
  width: 200px;
  height: 200px;
  background: lime;
  border-radius: 100%;
  position: relative;
}
span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  z-index: 3;
}
span::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 40%;
  left: 0;
  background: red;
}
span + span {
  width: 4px;
  margin-left: -2px;
  z-index: 2;
}
span + span::before {
  top: 5%;
  background: black;
}
span + span + span {
  width: 6px;
  margin-left: -3px;
  z-index: 1;
}
span + span + span::before {
  top: 25%;
  background: black;
}
span:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  background: red;
  border-radius: 100%;
}
</style>

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

<script>
var arrow = document.querySelectorAll('span');
function tick() {
    var date = new Date,
        h = (date.getHours() / 12) * 360,
        m = (date.getMinutes() / 60) * 360,
        s = (date.getSeconds() / 60) * 360;
    h += m / 12;
    m += s / 60;
    arrow[0].style.transform = 'rotate(' + s + 'deg)';
    arrow[1].style.transform = 'rotate(' + m + 'deg)';
    arrow[2].style.transform = 'rotate(' + h + 'deg)';
    setTimeout(tick, 1000);
}
tick();
</script>