About this set
Curved, hand-drawn SVG arrows that draw themselves in, for annotating a pricing table, a product screenshot or a feature you want people to notice. The first example points a curved arrow from a handwritten note, Most teams of five pick this one, at a pricing card. The second loops an arrow up from a note to the Export button of a toolbar. The arrow library shows four standalone styles, a swoosh, a loop, a zigzag and a curl, each drawn after the one before. Every path has pathLength=”1″, which makes the dash maths independent of the real length: the stroke gets a dash of 1, the animation slides the dash offset from 1 to 0, and the arrowhead path draws after the line. The notes use a stack of handwriting system fonts, so nothing is downloaded. Arrows are aria-hidden and the note beside each one is real text, so the meaning is in the words, not the drawing. On narrow screens the card annotation stacks and the arrow turns to point down at the card. Under prefers-reduced-motion the arrows appear fully drawn.
What’s included
- Self-drawing stroke animation using pathLength="1"
- Arrowhead draws after the line
- Annotation examples for a pricing card and a toolbar button
- Library of four arrow styles: swoosh, loop, zigzag and curl
- Handwriting font stack with no web font download
Accessibility
The SVG arrows are aria-hidden, and each annotation is real text next to the thing it describes. The toolbar mock-up is a role="img" with a written description. The pricing link shows a 2px focus outline. The draw animation runs once and is removed under prefers-reduced-motion, leaving the arrows fully drawn.
Customise it
Change --pen for the annotation colour, --hand for the font stack and stroke-width on .hd for line weight. Stagger the draw with animation-delay; in Tailwind set [--hd-delay:…] on an svg that has the hd-draw utility.
