Clock svg

by tomik23

HTML

<div class="clockbox">
  <svg id="clock" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
    <g id="hour">
      <path class="hour-arm" d="M300.5 298V152" />
      <circle class="sizing-box" cx="300" cy="300" r="253.9" />
    </g>
    <g id="minute">
      <path class="minute-arm" d="M300.5 298V120" />
      <circle class="sizing-box" cx="300" cy="300" r="253.9" />
    </g>
    <g id="second">
      <path class="second-arm" d="M300.5 350V100" />
      <circle class="sizing-box" cx="300" cy="300" r="253.9" />
    </g>
    <g id="face">
      <circle class="circle" cx="300" cy="300" r="253.9" />
      <path class="hour-marks" d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6" />
      <circle class="mid-circle" cx="300" cy="300" r="14" />
    </g>
  </svg>
</div>

CSS

*,
:after,
:before {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #091921;
}

svg:not(:root) {
  overflow: hidden;
}

.clockbox,
#clock {
  width: 100%;
}

.circle {
  position: relative;
  fill: none;
  stroke: #313131;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.mid-circle {
  fill: #313131;
  position: absolute;
}

.hour-marks {
  fill: none;
  stroke: #313131;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.hour-arm {
  fill: none;
  stroke: red;
  stroke-width: 10;
  stroke-linecap: round;
}

.minute-arm {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
}

.second-arm {
  fill: none;
  stroke: #cac2c2;
  stroke-width: 4;
  stroke-linecap: round;
}

.sizing-box {
  fill: none;
}

#hour,
#minute,
#second {
  transform-origin: 300px 300px;
}

JavaScript

const HOURHAND = document.querySelector("#hour");
const MINUTEHAND = document.querySelector("#minute");
const SECONDHAND = document.querySelector("#second");


function run_the_clock() {
  var date = new Date();
  let hr = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();

  let hrPosition = hr * 360 / 12 + ((min * 360 / 60) / 12);
  let minPosition = (min * 360 / 60) + (sec * 360 / 60) / 60;
  let secPosition = sec * 360 / 60;

  HOURHAND.style.transform = `rotate(${hrPosition}deg)`;
  MINUTEHAND.style.transform = `rotate(${minPosition}deg)`;
  SECONDHAND.style.transform = `rotate(${secPosition}deg)`;
}


var interval = setInterval(run_the_clock, 1000);