CSS Animations · Icons & Transitions

Icons that hold state, and the hand-off between two views.

Catalog section E draws, fills, and morphs SVG geometry with one attribute, plus three icon toggles that are CSS state rather than a keyframe. Section L is the frame a router plays between two pages — page-fade, page-slide, curtain-wipe, and a loading-bar, simulated below with the replay button since there's no second page here to navigate to.

Scroll the matrix Read the catalog docs →

Hover the shapes, click the toggles, then hit ↻ to replay the transitions.

checkmark-draw

hamburger-to-x — click

icon-morph — hover

loading-bar

E — SVG & icons

All 17 names in catalog section E: seven stroke draws, four clip-path fills, one staggered logo build, three icon toggles that are state rather than animation, and two arbitrary path morphs.

Draws — 7

stroke-dashoffset from the path's own length down to zero. pathLength="100" on every <path> below makes the default length:100 exact without measuring anything in JS — the library never calls getTotalLength().

data-kui="draw-stroke"

data-kui="draw-signature"

data-kui="draw-underline"

data-kui="checkmark-draw"

data-kui="cross-draw"

data-kui="chart-line-draw"

data-kui="gradient-stroke" — loops, owns the stroke channel

Fills — 4

Same mechanism as star-rating-fill on data-hover.html: an outline copy behind, a filled copy in front, and clip-path reveals the filled one.

data-kui="heart-fill"

data-kui="bookmark-fill"

data-kui="chart-area-fill" — left to right, not bottom up

data-kui="chart-bar-grow"

Logo build — 1

Goes on the parts, with data-kui-stagger on their wrapper — that stagger is what makes it a build rather than one more scale-in.

data-kui="logo-build" (staggered)

Icon toggles — 3

State, not an animation: a CSS transition keyed off aria-expanded / aria-pressed, the same attribute a real control needs for accessibility anyway. Wired here as working controls, not bare boxes.

data-kui="hamburger-to-x" — click, same control as the header

Click to play / pause

data-kui="play-to-pause"

Is this accessible?

Yes — aria-expanded drives the icon and the answer, together.

data-kui="plus-to-minus" — FAQ trigger

Path morphs — 2

Arbitrary path interpolation (primitive 16) — hover or Tab to focus. The library's own named icon pairs are precomputed, matched-point-count shapes; these two are hand-authored to show the underlying mechanism plainly rather than reuse a named pair.

data-kui="icon-morph" — hover

data-kui="blob-morph" — hover, 800ms

L — Page transitions

All in catalog section L. These fire once, when a router swaps an outgoing view for an incoming one — there's no router on a static demo page, so the three below play on scroll-into-view like every other on:enter effect on this site, and the ↻ replay button (bottom corner) fires them again on demand.

Simulated with the replay button — 3

data-kui="page-fade" — simulated

data-kui="page-slide" — simulated

data-kui="curtain-wipe" — simulated

Standalone — 1

data-kui="loading-bar" — reads fine on its own, no simulation needed

smooth-scroll-to isn't demoed above because it doesn't need to be — it's already live on every page in this site, including this one: data-kui="smooth-scroll-to" sits once on <html> (see the top of this file) and every in-page anchor jump inherits it. Try it — jump to top ↑.

page-morph is documented in the catalog as a planned View Transitions shared-element handoff, degrading to page-fade where unsupported — but it is not registered in src/effects yet, so there's no working attribute to demo. Noted here rather than shown, matching the catalog's own † convention.