Across line breaks
Links inside body text can wrap across several lines and the squiggle follows every single line fragment.
Playground
Body text where this link runs on long enough to wrap onto a second line and every fragment gets its own squiggle.
Resize me
Underlines
Display sizes
Heading underline
Inside a button
Hover and focus triggers resolve to the button.
amplitude
0.5 A steady hand drawing straight along the baseline
1.5 A steady hand drawing straight along the baseline
3 A steady hand drawing straight along the baseline
wavelength
15 A steady hand drawing straight along the baseline
45 A steady hand drawing straight along the baseline
90 A steady hand drawing straight along the baseline
seed
1 Identical options, so only the seed is talking
2 Identical options, so only the seed is talking
3 Identical options, so only the seed is talking
Borders
continuity
Radius clamps to half the height, so each end is pure corner curve.
currentColor
Real SVG strokes, so they ride a colour transition.
Fill from CSS
The path is closed and paints behind the label, so a fill never covers it.
button:hover svg path {
fill: lightblue;
}Resize
On an inner element, because overflow: hidden would
clip the overlay.
Resize me
Boil
Differently seeded squiggles in hard steps. Keyboard focus triggers it too, and it is skipped under reduced motion.
160 Hover this line
320 Hover this line