Line-art drawing effects
Five takes on one primitive: stroke-dasharray +
stroke-dashoffset. With pathLength="1" on every path, the
dash math is normalized — no getTotalLength(), no JS, no magic numbers.
Signature that writes itself
Two paths, one 6s looping timeline. Keyframe percentages sequence them: scribble draws, underline follows, both un-draw backwards, repeat.
Geometric trace on load
One draw-in keyframe shared by every segment; the build-up
order is nothing but animation-delay. A 7% fill fades in last.
Border draws on hover
Hover me
The border traces clockwise from the top edge — and rewinds when you leave. That reversibility is free because this is a transition, not an animation.
A transition on dashoffset instead of a keyframe animation:
hover plays it, mouse-out rewinds it. Also fires on keyboard focus.
Ornamental divider
Draw the flourish once, mirror it with
<use transform="scale(-1,1)">. The center diamond pops in with an
overshoot bezier once both sides land.
Constellation map
Stars scale in, connector lines chase them with the dashoffset draw, and two stars keep twinkling — three animations, one delay schedule.