液态与有机 · 像水一样
融球Metaball
- 黏
- 有机
- 会连起来
一颗球周围有几颗小卫星在转，靠近的时候两者之间会「长」出一道桥，离开又断开。它们不是碰在一起，是像水滴那样融在一起 —— 所以看起来是有表面张力的东西，而不是几个圆。
什么时候用它
适合「正在合并 / 正在计数」的一小段过程：加进购物车、连上设备、下载进度。它只在有东西在动的时候才成立，所以别拿它做一个静止的图标。整页只用一处 —— 融球很抢眼，出现两次就变成花边。
参数
goo: blur σ9 + alpha ×20 −9 · satellite r 42–82px · core Ø56px · orbit 0.5–0.76 rad/s · sine-eased, per-frame loop
配方
融球 → goo: blur σ9 + alpha ×20 −9 · satellite r 42–82px · core Ø56px · orbit 0.5–0.76 rad/s · sine-eased, per-frame loop
给 AI 的一句话
做一组会融合的球：一颗 56px 的核心不动，三颗 30px 的卫星绕着它转，轨道半径在 42px 和 82px 之间来回（42 时刚好和核心相切长出一道桥，82 时完全分开），三颗的角速度互不相同。融合用一个 SVG 滤镜实现：先 feGaussianBlur σ=9 把边缘糊开，再用 feColorMatrix 把 alpha 乘以 20 再减 9，把糊掉的边缘重新切成硬边。核心只在滤镜层里画一次，滤镜外面那层只放图标和文字——两层各画一颗同样的圆会错开半像素，看起来是两个重叠的圆。