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].

#SVG #filter #CSS #cssFilter #cssBlur #coding #web #dev #webDev #webDevelopment #code #frontend #svgFilter

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.

#CSS #cssFilter #svgFilter #cssBlur #code #webDev #web #dev #webDevelpment #coding #frontend #goo #gooey #blobs #metalball

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!

#css #cssFilter #filter #cssBlur #coding #web #dev #webDev #webDevelopment #code #frontend

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.

#CSS #filter #cssFilter #cssBlur #coding #web #dev #webDev #webDevelopment #code #frontend