Analog Clock JavaScript

Analog clock using SVG, JS, CSS

by Abid Shaik

HTML

<div class="clockMain">
  <svg id="clock" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
    <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="16.2" />
    </g>
    <g id="hour">
      <path class="hour-arm" d="M300.5 298V142" />
      <circle class="sizing-box" cx="300" cy="300" r="253.9" />
    </g>
    <g id="minute">
      <path class="minute-arm" d="M300.5 298V67" />
      <circle class="sizing-box" cx="300" cy="300" r="253.9" />
    </g>
    <g id="second">
      <path class="second-arm" d="M300.5 350V55" />
      <circle class="sizing-box" cx="300" cy="300" r="253.9" />
    </g>
  </svg>

</div>

CSS

body {
  background: #E1E1E1;
  font-family: Helvetica;
}

.clockMain {
    display: flex;
    justify-content: center;
    align-items: middle;
	  transition: 1s; 
}

.clockMain:hover{
	transition: 1s; 
	transform: scale(1.25); 
}
svg {
  width: 50%;
  fill: #13294B;
  stroke: #4B9CD3;
  stroke-width: 1;
  stroke-linecap: round;
}
.mid-circle {
    fill: #13294B;
}
.hour-marks {
    stroke: #4B9CD3;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.hour-arm {
    stroke: #4B9CD3;
    stroke-width: 17;
    stroke-miterlimit: 10;
}

.minute-arm {
    stroke: #4B9CD3;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.second-arm {
    stroke: #4B9CD3;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second {
    transform-origin: 300px 300px;
    /*transition: transform .5s ease-in-out;*/
}

JavaScript

function TikTokThisClock()
{
var currentDate = new Date(); 
let Hour = currentDate.getHours(); 
let Min = currentDate.getMinutes(); 
let Sec = currentDate.getSeconds(); 

console.log(Hour+ " : "+ Min+ " : "+ Sec);

let HourInDeg = (Hour*360/12) + (Min*(360/60)/12); 
let MinInDeg = (Min*360/60) + (Sec*(360/60)/60); 
let SecInDeg = Sec*360/60; 

console.log(HourInDeg + " : "+ MinInDeg + " : " + SecInDeg);

$("#hour").css("-webkit-transform", "rotate(" + HourInDeg +"deg)"); 
$("#minute").css("-webkit-transform", "rotate(" + MinInDeg +"deg)");
$("#second").css("-webkit-transform", "rotate(" + SecInDeg +"deg)");
}

window.setInterval(TikTokThisClock, 1000);