SVG 时钟
Posted | stdout
一个奇怪的想法: GitHub Profile README、邮件签名等没有JS的情况下,如何展示当前时间,并且最好可以跳动?
想来想去,纯 SVG 实现。于是呼来AI:
- codex-5.3.mod.svg
- codex-5.3.new.svg
- gemini-3.1-pro-thinking.new.svg
- gemini-3.1-pro.new.svg
- gemini-3.mod.svg
- mimo-2.5-pro.new.svg
- opus-4.6.mod.svg
- opus-4.6.thinking.new.svg
其中大多数AI写得都很平庸。采用堆一大堆 <text> 。gemini 惊艳,它用了滑动胶片法(Filmstrip)
为了彻底解决冗余和跨天 Bug,我们可以采用“滑动胶片”的设计思维:将单独的数字拼成一条长长的文本带(胶片),外面罩上一个双位宽度的剪裁窗口(
)。时间流逝时,整个文本带像胶片一样通过 transform: translateX 整体向左跳格(使用 steps() 级联函数)。
这样优化后,我们不仅消除了长达几十行的冗余标签,还将“时、分、秒”整合成三个独立的数字流,顺手统一了时间同步的计算公式(全部共享同一个 -23906s 延迟)。
那么最后的效果便是,现在为您报时:
Comments