Tick Ring Digital Clock
A bold 24-hour digital clock inside a rounded tile ringed by fine tick marks, updating every second from the visitor clock.
Preview and code
index.html
<div class="w"><svg viewBox="0 0 160 160"><rect x="8" y="8" width="144" height="144" rx="34" fill="none" stroke="#c4c4c4" stroke-width="8" stroke-dasharray="1.2 6"/></svg><b id="t">22:43</b></div>
styles.css
.w{position:relative;width:180px;height:180px;border-radius:42px;background:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.25)}.w svg{position:absolute;inset:0;width:100%;height:100%}.w b{position:absolute;inset:0;display:grid;place-items:center;font:700 38px system-ui,sans-serif;letter-spacing:-.02em;color:#111}
script.js
const t=document.getElementById("t");const u=()=>{const d=new Date();t.textContent=String(d.getHours()).padStart(2,"0")+":"+String(d.getMinutes()).padStart(2,"0")};u();setInterval(u,1000);About
A minimal digital clock tile. The dotted tick ring is a single dashed SVG rect, and the time is formatted in 24-hour style by a tiny script.