Annotation Arrow
A note that draws a hand-drawn arrow to the element it points at, picked by a CSS selector. The curve avoids both boxes and redraws when the layout moves.
View codeThe library
SVG & Drawing
6 SVG effects in CSS and vanilla JS: lines that draw themselves, arrows that find their target, icons that act out what they do. No plugin, no timeline library.
Hover Icons
Stroke icons that act out their meaning on hover or keyboard focus: the bell rings, the bin lifts its lid, the plane flies off and back, the cog turns, refresh spins, the padlock opens. CSS only.
View code
Morph Icons
Icon buttons whose strokes travel into the other icon: play to pause, sound to mute, plus to close, list to grid. They follow aria-pressed or aria-expanded and fire kodza:morph-icons.
View code
Path Draw
Any SVG drawn with strokes draws itself stroke by stroke at a steady pen speed, then fills in. Once on entering the screen, or tied to the scroll.
View code
Scroll Path
A line drawn through the steps of a section as you read: it swings from step to step, fills each marker it reaches and ends with a ring around the button.
View code
Section Curve
A section whose top edge comes up curved and pulls flat as it lands, tied to the scroll; scroll back up and it bends again.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it