An SVG Clock gzip 1.91 kB

import { o, html, svg } from 'sinuous';

const ClockContainer = () => {
const date = o(new Date());

function tick() {
date(new Date());
}
setInterval(tick, 1000);

return html`
<style>
.square {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}

.square svg {
position: absolute;
width: 100%;
height: 100%;
}

.clock-face {
stroke: #333;
fill: white;
}

.minor {
stroke: #999;
stroke-width: 0.5;
}

.major {
stroke: #333;
stroke-width: 1;
}

.hour {
stroke: #333;
}

.minute {
stroke: #666;
}

.second,
.second-counterweight
{
stroke: rgb(180, 0, 0);
}

.second-counterweight {
stroke-width: 3;
}
</style>
<div class="square">
<${Clock} date=${date} />
</div>
`
;
};

const Clock = ({ date }) => {
return svg`
<svg viewBox="0 0 100 100">
<g transform=translate(50,50)>
<circle class=clock-face r=48 />
${minuteTicks}
${hourTicks}
<line class=hour y1=2 y2=-20
transform=${() =>
`rotate(${30 * date().getHours() + date().getMinutes() / 2})`}
/>

<line class=minute y1=4 y2=-30
transform=${() =>
`rotate(${6 * date().getMinutes() + date().getSeconds() / 10})`}
/>

<g transform=${() => `rotate(${6 * date().getSeconds()})`}>
<line class=second y1=10 y2=-38/>
<line class=second-counterweight y1=10 y2=2/>
</g>
</g>
</svg>
`
;
};

const minuteTicks = (() => {
const lines = [];
for (let i = 0; i < 60; i++) {
lines.push(svg`
<line class=minor y1=42 y2=45 transform=${`rotate(${(360 * i) / 60})`} />
`
);
}
return lines;
})();

const hourTicks = (() => {
const lines = [];
for (let i = 0; i < 12; i++) {
lines.push(svg`
<line class=major y1=32 y2=45 transform=${`rotate(${(360 * i) / 12})`} />
`
);
}
return lines;
})();

document.querySelector('.clock-example').append(ClockContainer());