Kaleidoscope 万花筒
The same dot drawn six times with the canvas rotated 60 degrees between each — that is the entire kaleidoscope. 同一个点画六遍，每次把画布转 60 度——万花筒就这么点事。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
save() / translate() / rotate() / restore() is the whole mechanism: the mouse offset is expressed relative to the centre, then drawn six times at 2π/6 intervals. Because each copy uses the same source point, the pattern stays perfectly symmetric while the pointer moves. save() / translate() / rotate() / restore() 就是全部机制：先把鼠标偏移换算成相对中心的坐标，然后按 2π/6 的间隔重复画六次。因为六份用的都是同一个源点，鼠标一动，图案整体保持严格对称。
What to change可以改的地方
- 1Change the loop to 12 iterations for a denser mandala.
- 2Fill the canvas each frame instead of fading it to get a crisp, non-smearing pattern.
- 1循环改成 12 次，就变成更密的曼陀罗。
- 2每帧整屏清掉而不是留残影，图案会变得干净锐利。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。