Composure v2 — programmable pseudo-elements

Inert, size-aware SVG layers welded to elements. Drag the resize handles (bottom-right) and watch the decoration redraw live via ResizeObserver.

1 · Under layer — plate behind text (resize me)

A parallelogram drawn behind the text. The shape is recomputed from the box's pixel size on every resize.

Take your time.

2 · Beyond bounds — stem + glow outside the box

The connector stem and soft glow are drawn past the element's edges (overflow: visible). No padding hack.

I'll be there.

3 · Many layers — glow + plate + inner + border

Four stacked layers on one element: pseudo-elements give you two, here we have four with explicit z-order.

Persona-style plate.

4 · Over layer is inert — clicks pass through

A corner ribbon drawn in front of a real button. It's pointer-events:none, so the button still clicks.

not clicked yet

5 · Inert for a11y/selection — select the text

Decoration is aria-hidden and doesn't intercept selection. Try selecting the sentence below.

This text sits on a decorated plate and is still fully selectable and readable by screen readers.

6 · Content-driven — type and the plate follows

The host sizes to its (editable) text via CSS; the decoration tracks it through ResizeObserver. Click and type.

edit me…