Markered, Like a Real Highlighter

What this is

Per-line canvas overlays positioned over each text-line rectangle, with a stroke that mimics the chunky, slightly-imperfect path of a felt-tip marker. Pressure variation along the stroke, frayed edges, multiple slightly-misaligned passes for that hand-drawn weight. Variable colours, multi-line wrapping, animated draw-on for entrance.

Drop it onto any element via a data attribute. The underlying text is untouched; the canvas sits behind as decoration. Genuinely accessible: screen readers read the original text, not the rendered highlight.

The puzzle that started it

CSS highlights look like CSS highlights. They are uniform, sharp-edged, machine-perfect, and instantly readable as "yellow rectangle behind text". The puzzle: could a highlight effect feel hand-drawn without sacrificing accessibility or performance?

How I built it

For each line of text, position a transparent canvas behind it. Draw the highlight stroke as a felt-tip path: multiple slightly-misaligned passes, pressure variation along the length, frayed edges where the pen lifts. The underlying text stays as plain HTML, so screen readers, copy-paste and CSS overrides all work normally.

What this is an example of

A drop-in component small enough to live in any project, careful enough to keep accessibility intact. The kind of detail that lifts a marketing site or editorial page without becoming a maintenance burden. Works as a drop-in for editorial sites, landing pages, interactive marketing copy.

If your editorial site needs small careful details like this, that is the kind of craft I bring.