✨Effect Lab
Read the full guide完整技术长文 Shapes nobody drew: recursion, displacement and polar coordinates没人画过的形状:递归、位移与极坐标
💗

Heart Pulse 同心脉冲

Five rings sharing one expanding radius, each offset by 40px so they never coincide. 五个环共用一条扩张的半径,彼此错开 40px,所以永远不会重合。

Canvas 2DPhase offsetRadius modulo
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

Radius is (t*60 + i*40) % 200, so each ring is at a different point in the same cycle. Alpha of 1 - r/200 makes them fade exactly as they reach the edge, and the hue is derived from the same radius, so colour and size stay locked together. 半径是 (t*60 + i*40) % 200,所以每个环处在同一循环的不同位置。透明度 1 - r/200 让它们刚好在抵达边缘时消失,色相也由同一个半径推出,颜色和大小因此始终绑定。

What to change可以改的地方

  • 1Add a second set with a smaller max radius to suggest a heartbeat.
  • 2Decrease the 40px offset so rings bunch up into visible clusters.
  • 1再叠一组最大半径更小的环,就有了心跳的双峰。
  • 2把 40px 的错位改小,环会挤成几簇。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

pulse.html