SVG 黏液融球
SVG Metaballs，Antony Garand
正在布展…
它是怎么做的
- 第 1 步SVG 中的圆形被一个 filter 包裹。
- 第 2 步feGaussianBlur 把边缘模糊，使相邻形状的透明度场叠加。
- 第 3 步feColorMatrix 只把 alpha 乘以约 25 再减 15，把软边重新变成硬边。
- 第 4 步拖动时改写圆的 cx/cy，滤镜实时重新计算。
复刻配方
一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。
Place several circles inside an SVG group with a filter that chains feGaussianBlur (stdDeviation around 10–30) into feColorMatrix whose alpha row is '0 0 0 M -S' with M around 20 and S around 10. Optionally composite the SourceGraphic back on top with feComposite operator 'atop' to keep crisp colors. Make circles draggable with pointer events updating cx and cy, and expose the three numbers as range inputs that rewrite the filter attributes live. Keep the blurred region small because blur radius dominates performance.
档案
交互
能不能拿来用
原作不是开源许可（proprietary — inspiration only）：只能作为视觉参考，不要复制它的代码或素材，自己按技术思路实现。
性能开销
视觉强度
实现难度
尺度为策展判断（1 到 5），用于比较和推荐。
核实记录：Opened garand.dev/metaballs/index.html (HTTP 200): page source shows Blur/Alpha multiplier/Alpha Shift controls, feColorMatrix '0 0 0 25 -15' and drag handlers. Linked from the DEV article 'SVG metaballs' by antogarand. No repo found.
