Here's a gradient background version on @codepen too https://codepen.io/thebabydino/pen/KwKrJGp

Shape depends on how the text content naturally wraps.

This effectively pushes all pixels except for those with alphas originally in the [.4, .6] interval (which now stretch across the [0, 1] interval) to either 0 or 1, whichever is closer.

Now you may be wondering why not do this from the start instead of those first two primitives.

Well, because without knowing the blur radius in px (something that's not really possible without JS if we set it in container query or viewport units), we can't know what interval to map to.

To fix this, we give the assembly a tiny blur.

We don't want blurry edges either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].

Enter the #SVG #filter!

`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).

This makes edges jagged.

Maybe not so noticeable in some cases, but it often won't cut it.

How the assembly alpha is computed is something I've detailed in https://css-tricks.com/adventures-in-css-semi-transparency-land/

Keep in mind that where we have overlap, two corresponding pixels from the two layers may both have an alpha below .5, but their overlap can still give the assembly an alpha above .5!

For example:

.4 + .3 - .4*.3 = .7 - .12 = .58

Both .4 and .3 are smaller than .5, but the overlap alpha .58 is bigger than .5!

As you can see in the recording blurring makes the pixels around the edges semitransparent. The bigger the blur radius, the more pixels become transparent.

When the particles get closer, their semitransparent areas overlap. This increases the assembly alpha there.

What's going on here?

We have particles moving around inside a `.goo` assembly. How we do that (layout, animation) doesn't matter.

We blur these particles with a #CSS #filter (same blur radius or not). CSS allows us to use whatever unit we need for the blur radius. rem, cqi, lh.