<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>Document</title>
</head>
<body>
<div class="container">
        <svg viewBox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewBox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewBox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewBox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewBox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
        <svg viewBox='0 0 70 140'>
            <polygon
                     points="70,70 0,70 0,0 70,0 70,70 70,140 0,140 0,70 70,70" />
        </svg>
    </div>
  
</body>
</html>
* {
  font-size: 2vmin;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #171717;
}

.container {
  position: absolute;
}

svg {
  width: 5rem;
  overflow: visible;
  margin-right: 1.5rem;
}

.container svg:nth-child(even) {
  margin-right: 4rem;
}

polygon {
  fill: none;
  stroke-width: 8;
  stroke: #17f700;
  transition: stroke-dasharray 0.5s ease;
  /* 初始默认时间显示为0 */
  stroke-dasharray: 0 70 0 5 60 5 0 5 60 5 0 5 60 5 0 5 60 5 0 5 60 5 0 5 60 5 0 70 0;
}
document.addEventListener("DOMContentLoaded", () => {
    let polygons = [...document.querySelectorAll('polygon')];

    if (polygons.length === 0) {
        console.error("find no any <polygon> , pleas check your SVG code");
        return;
    }

    console.log("polygon sum:", polygons.length);

    polygons.forEach((poly, i) => {
        console.log(`Polygon ${i} total length:`, poly.getTotalLength());
    });

    let dasharrayData = [
        [0, 1, 1, 1, 1, 1, 1, 0], // 0
        [0, 0, 0, 1, 1, 0, 0, 0], // 1
        [1, 0, 1, 1, 0, 1, 1, 0], // 2
        [1, 0, 1, 1, 1, 1, 0, 0], // 3
        [1, 1, 0, 1, 1, 0, 0, 0], // 4
        [1, 1, 1, 0, 1, 1, 0, 0], // 5
        [1, 1, 1, 0, 1, 1, 1, 0], // 6
        [0, 0, 1, 1, 1, 0, 0, 0], // 7
        [1, 1, 1, 1, 1, 1, 1, 0], // 8
        [1, 1, 1, 1, 1, 1, 0, 0]  // 9
    ];

    dasharrayData = dasharrayData.map(arry => {
        let str = "0";
        arry.forEach(nums => {
            if (nums) str += ' 5 60 5 0';
            else str += ' 70 0';
        });
        return str;
    });

    // renew with in one sec.
    setInterval(() => {
        let now = new Date();
        let times = [
            Math.floor(now.getHours() / 10), now.getHours() % 10,
            Math.floor(now.getMinutes() / 10), now.getMinutes() % 10,
            Math.floor(now.getSeconds() / 10), now.getSeconds() % 10
        ];

        if (polygons.length !== times.length) {
            console.warn("polygon The quantity and the number of time digits do not match!");
            return;
        }

        polygons.forEach((ele, index) => {
            ele.style.strokeDasharray = dasharrayData[times[index]];
        });
    }, 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.