✨Effect Lab
Read the full guide完整技术长文 The one canvas setting that makes everything glow一个 canvas 设置,让所有东西都发光
🫠

Metaballs 融合光球

Real metaballs need marching squares. This fakes them with six blurred circles and gets 90% of the look for 5% of the code. 真正的 metaball 要写 marching squares,这里用六个模糊圆糊弄过去——效果拿到九成,代码只要零头。

Canvas 2Dfilter: blurCheap metaballs
Live demo实时演示

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

How it works原理拆解

Each of the six circles is drawn at radius 42 with ctx.filter = blur(16px), so their edges bleed into each other long before the shapes actually touch. Because the circles are drawn in the same solid colour, the overlaps merge visually into a single blob. 六个圆都以半径 42 绘制,并设 ctx.filter = blur(16px),所以它们的边缘在形状真正接触之前就已经渗到一起了。又因为用的是同一个实色,重叠部分在视觉上就并成了一个团。

What to change可以改的地方

  • 1Increase the radius to 60 with the same blur for stickier merging at a distance.
  • 2Add a second pass drawn with screen blending for a brighter core.
  • 1半径加到 60、模糊不变,隔着老远就会粘起来。
  • 2再叠一遍用 screen 混合模式,中心会更亮。

Source code源码

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

metaball.html