Outline Fill 描边填充字
Two identical SVG text elements: one outlined, one filled, each with its own SMIL animation. 两个一模一样的 SVG 文字：一个描边、一个填充，各自带一条 SMIL 动画。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The first text has fill:none and a stroke, and animates stroke-width 1 → 3 → 1. The second is filled pink at opacity 0 and animates opacity 0 → 1 → 0 on a slower 3s clock. Because the two cycles are different lengths, they drift in and out of phase, so the effect never looks like it is looping. 第一层 fill:none 加描边，动画改 stroke-width 从 1 到 3 再回 1。第二层是粉色填充、初始 opacity 为 0，用更慢的 3 秒周期做 0 → 1 → 0。两个周期长度不同，相位就会不断错开，所以永远看不出「在循环」。
What to change可以改的地方
- 1Make both durations equal and the two states will lock into an obvious pulse.
- 2Add stroke-dasharray animation to make the outline appear to draw itself.
- 1两个时长改成一样，就会变成一眼看穿的规律脉动。
- 2再加 stroke-dasharray 动画，描边会有「自己画出来」的感觉。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。