<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <section>
        <div class="sec"></div>
        <div class="min"></div>
        <div class="hr"></div>
        <div class="dot"></div>
    </section>
    <script src="app.js"></script>
</body>

</html>
// CSS Rest

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  width: 100%;
}

/* —————————————————————————————————— */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  width: 30rem;
  height: 30rem;
  border: 1px solid black;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.sec {
  position: absolute;
  top: 5%;
  height: 45%;
  width: 1px;
  background-color: red;
  transform-origin: bottom;
}

.min {
  position: absolute;
  top: 5%;
  height: 45%;
  width: 2px;
  background-color: black;
  transform-origin: bottom;
}

.hr {
  position: absolute;
  top: 20%;
  height: 30%;
  width: 4px;
  background-color: black;
  transform-origin: bottom;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 100%;
}

const now = new Date();
const clock = {
  hr: document.querySelector(".hr"),
  min: document.querySelector(".min"),
  sec: document.querySelector(".sec"),
};
const currentTime = {
  hr: now.getHours(),
  min: now.getMinutes(),
  sec: now.getSeconds(),
};
const positions = {
  hr: currentTime.hr * 30 + currentTime.min * 0.5 + currentTime.sec * 0.008333,
  min: currentTime.min * 6 + currentTime.sec * 0.1,
  sec: currentTime.sec * 6,
};

function setPosition(pointer, pointerPosition, increment = 0) {
  let newPointerPosition = pointerPosition + increment;
  pointer.style.transform = `rotate(${newPointerPosition}deg)`;
  return newPointerPosition;
}

for (let i = 0; i < 3; i++) {
  setPosition(Object.values(clock)[i], Object.values(positions)[i]);
}

const movingRates = {
  hr: 0.008333,
  min: 0.1,
  sec: 6,
};

setInterval(() => {
  positions.hr = setPosition(clock.hr, positions.hr, movingRates.hr);

  positions.min = setPosition(clock.min, positions.min, movingRates.min);

  positions.sec = setPosition(clock.sec, positions.sec, movingRates.sec);
}, 1000);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.