React Clock Made of Clocks Component

Open In Editor Video Publish Your Code

<html lang="en"><head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Clock made of clocks</title>
  <script>
  window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
  <div id="root"><div class="app"><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 855; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 900; --minute-angle: 630; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 990; --minute-angle: 810; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 990; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 630; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1260; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1575; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1440; --minute-angle: 1350; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2340; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2790; --minute-angle: 1530; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3015; --minute-angle: 2655; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2655; --minute-angle: 2295; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2790; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3015; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 4095; --minute-angle: 2655; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1575; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3960; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2340; --minute-angle: 2790; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2520; --minute-angle: 2430; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1620; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1350; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 6840; --minute-angle: 7020; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7200; --minute-angle: 14220; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 7290; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14040; --minute-angle: 13950; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14040; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14220; --minute-angle: 6930; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14310; --minute-angle: 14130; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 21240; --minute-angle: 20970; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 21060; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 21420; --minute-angle: 21150; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14310; --minute-angle: 7290; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 35190; --minute-angle: 28170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 27810; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 7020; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 7110; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 35190; --minute-angle: 13770; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 20880; --minute-angle: 27990; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 20880; --minute-angle: 21060; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 13680; --minute-angle: 13950; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 13680; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div></div></div>
  
    <script id="rendered-js" type="module">
import React, { useState, useEffect, useRef } from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";

const H = { h: 0, m: 180 },
V = { h: 270, m: 90 },
TL = { h: 180, m: 270 },
TR = { h: 0, m: 270 },
BL = { h: 180, m: 90 },
BR = { h: 0, m: 90 },
E = { h: 135, m: 135 };

const digits = [
[
BR, H, H, BL,
V, BR, BL, V,
V, V, V, V,
V, V, V, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, BL, E,
TR, BL, V, E,
E, V, V, E,
E, V, V, E,
BR, TL, TR, BL,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
BR, H, TL, V,
V, BR, H, TL,
V, TR, H, BL,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
E, BR, TL, V,
E, TR, BL, V,
BR, H, TL, V,
TR, H, H, TL],

[
BR, BL, BR, BL,
V, V, V, V,
V, TR, TL, V,
TR, H, BL, V,
E, E, V, V,
E, E, TR, TL],

[
BR, H, H, BL,
V, BR, H, TL,
V, TR, H, BL,
TR, H, BL, V,
BR, H, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
V, BR, H, TL,
V, TR, H, BL,
V, BR, BL, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
E, E, V, V,
E, E, V, V,
E, E, V, V,
E, E, TR, TL],

[
BR, H, H, BL,
V, BR, BL, V,
V, TR, TL, V,
V, BR, BL, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
V, BR, BL, V,
V, TR, TL, V,
TR, H, BL, V,
BR, H, TL, V,
TR, H, H, TL]];

const normalizeAngle = (next, prev) => {
  const delta = ((next - prev) % 360 + 360) % 360;
  return prev + delta;
};

const getTimeDigits = () => {
  const now = new Date();
  return [
  now.getHours(),
  now.getMinutes(),
  now.getSeconds()].
  flatMap(val => String(val).padStart(2, "0").split("").map(Number));
};

const randomAngle = () => Math.floor(Math.random() * 360);

return /*#__PURE__*/(
    React.createElement("div", {
      className: "clock",
      style: {
        "--hour-angle": initial ? randomAngle() : hourAngle,
        "--minute-angle": initial ? randomAngle() : minuteAngle,
        "--dur": initial ? 1 : 0.4 } }));

};

const App = () => {
  const [time, setTime] = useState(Array(6).fill(0));
  const [initial, setInitial] = useState(true);

useEffect(() => {
    let updateTimerId;
    const updateTime = () => {
      setTime(getTimeDigits());
      const now = Date.now();
      const delay = 1000 - now % 1000;
      updateTimerId = setTimeout(updateTime, delay);
    };

const initialTimerId = setTimeout(() => {
      setInitial(false);
      updateTime();
    }, 600);

return () => {
      clearTimeout(updateTimerId);
      clearTimeout(initialTimerId);
    };
  }, []);

return /*#__PURE__*/(
    React.createElement("div", { className: "app" },
    time.map((t, i) => /*#__PURE__*/
    React.createElement("div", { key: i },
    digits[t].map(({ h, m }, j) => /*#__PURE__*/React.createElement(Clock, { key: j, h: h, m: m, initial: initial }))))));

};

createRoot(document.getElementById('root')).render( /*#__PURE__*/React.createElement(App, null));

</script>

</body></html>

CSS

body {
  padding: 0;
  margin: 0;
}

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

.app {
  --clock-size: 3vw;
  --gap: calc(var(--clock-size) * 0.05);
  --clock-segment-w: calc(var(--clock-size) * 4 + var(--gap) * 5);
  --clock-segment-h: calc(var(--clock-size) * 6 + var(--gap) * 5);
  font-family: sans-serif;
  text-align: center;
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-left: calc(var(--clock-size) + var(--gap) * 2);
}

.app > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: var(--clock-segment-w);
  height: var(--clock-segment-h);
}

.app > div:nth-of-type(even) {
  margin-right: var(--clock-size);
}

.clock {
  --w: 47%;
  --h: 3px;
  --dur: 0.4s;
  position: relative;
  width: var(--clock-size);
  height: var(--clock-size);
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid white;
  background: linear-gradient(225deg, #d0d0d0 10%, white);
  box-shadow: -2px 2px 6px #d0d0d0,
               2px -2px 6px #ffffff;
}

.clock::before,
.clock::after {
  position: absolute;
  content: '';
  top: calc(50% - var(--h) * 0.5);
  left: 50%;
  transform-origin: 0% 50%;
  width: var(--w);
  height: var(--h);
  background: black;
  border-radius: 9999px;
  transition: calc(var(--dur) * 1s) ease-in-out;
  transform: rotate(calc(var(--angle) * 1deg));
}

.clock::before {
  --angle: var(--hour-angle);
}

.clock::after {
  --angle: var(--minute-angle);
}

@media (max-width: 700px) {
  .clock {
    --h: 2px;
    border: 1px solid white;
  }
}

@media (max-width: 500px) {
  .clock {
    --h: 1px;
    --w: 50%;
  }
}

React Clock Made of Clocks Component

Recommended

Call Of Duty

The Legend of Zelda

Call Of Duty

HTML

CSS

JS

Recommended

Call Of Duty

The Legend of Zelda

Call Of Duty

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS