Here's another such example on @codepen https://codepen.io/thebabydino/pen/azbLBJy

Concave rounding, gradient background, shape drop-shadow, responsivity... all in one demo. Also using an #SVG #filter + #CSS #grid.

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.

14/ Das ist die Typhierarchie für die Grammatik von Kapitel 6. Leider erlaubt Mastodon keine #SVGs.