SVG 时钟

一个奇怪的想法: GitHub Profile README、邮件签名等没有JS的情况下,如何展示当前时间,并且最好可以跳动?

想来想去,纯 SVG 实现。于是呼来AI:

其中大多数AI写得都很平庸。采用堆一大堆 <text> 。gemini 惊艳,它用了滑动胶片法(Filmstrip)

为了彻底解决冗余和跨天 Bug,我们可以采用“滑动胶片”的设计思维:将单独的数字拼成一条长长的文本带(胶片),外面罩上一个双位宽度的剪裁窗口()。时间流逝时,整个文本带像胶片一样通过 transform: translateX 整体向左跳格(使用 steps() 级联函数)。
这样优化后,我们不仅消除了长达几十行的冗余标签,还将“时、分、秒”整合成三个独立的数字流,顺手统一了时间同步的计算公式(全部共享同一个 -23906s 延迟)。

那么最后的效果便是,现在为您报时:

https://t.est.im/clock.svg

Comments