<!-- ----------------- Created by InCoder ----------------- -->
<!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">
    <title>Analog Clock Design - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <script src="script.js" defer></script>
</head>

<body>
    <div class="clockContainer">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</body>

</html>
/* ----------------- Created by InCoder ----------------- */

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(47 53 77);
}

.clockContainer {
    width: 25rem;
    height: 25rem;
    position: relative;
    border-radius: 50%;
    background: url('https://drive.google.com/uc?id=1CMGPzgNoLSAiZI738O2DNEMtxUTBfzLM&export=view') no-repeat center;
    box-shadow: inset 0px 0px 8px rgb(204 204 204 / 20%), 0px 0px 20px rgb(204 204 204 / 20%);
}

.clockContainer::before {
    content: "";
    top: 50%;
    left: 50%;
    width: 5%;
    height: 5%;
    border-radius: 50%;
    position: absolute;
    background-color: #797979;
    transform: translate(-50%, -50%);
}

.clockContainer :is(.hour,
.minute,
.second) {
    position: absolute;
    border-radius: 1rem;
    transform-origin: bottom;
}

.hour {
    top: 21%;
    left: 49%;
    width: 2%;
    height: 28%;
    background-color: #797979;
}

.minute {
    top: 18%;
    left: 49%;
    width: 1.5%;
    height: 32%;
    background-color: #797979;
}

.second {
    top: 12%;
    left: 49.5%;
    width: 1%;
    height: 38%;
    z-index: -1;
    background-color: rgb(233 54 50);
}
let hourStick = document.querySelector('.hour')
minuteStick = document.querySelector('.minute')
secondStick = document.querySelector('.second');

window.addEventListener('load', () => {
    setInterval(() => {
        let date = new Date();

        let hour = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();

        let hDeg = 30 * hour + minute / 2;
        let mDeg = 6 * minute;
        let sDeg = 6 * second;

        hourStick.style.transform = `rotate(${hDeg}deg)`;
        minuteStick.style.transform = `rotate(${mDeg}deg)`;
        secondStick.style.transform = `rotate(${sDeg}deg)`;
    }, 1000);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.