Moiré Pattern 莫尔条纹
Two sets of parallel lines at mirrored angles — the pattern you see is not drawn anywhere. 两组夹角相反的平行线——你看到的那个花纹，代码里根本没画。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
One pass draws lines at tan(t), the other at tan(-t); both use the same 12px spacing. The visible bands are an interference artefact of the two grids overlapping, which is why the pattern appears to move in directions neither set is moving. Nothing in the code computes those bands. 一次用 tan(t) 画一组线，另一次用 tan(-t) 画一组，两组都是 12px 间距。肉眼看到的明暗带是两组栅格叠加产生的干涉，所以它移动的方向和任何一组线都不一样。代码里没有任何地方计算那些带。
What to change可以改的地方
- 1Vary the second spacing to 13px and the bands get much more pronounced.
- 2Hold t still and animate one line offset instead for a classic slide-moiré.
- 1第二组间距改成 13px，条纹会明显得多。
- 2让 t 停住、只动一组的相位偏移，就是经典的滑动莫尔。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。