Animated logo mark
A house outline draws itself, its calendar nights fill in, and the teal gap night fills last.
The React code for this component comes with Pro.
Unlock with ProUse it for
- The header logo on first load
- Splash or empty states where the brand can play once
Avoid
- Replaying the full load on every page view
- Long logo animations that delay the content
How it works
The roof is an SVG path with pathLength 1, drawn by animating stroke-dashoffset from 1 to 0. The five calendar cells scale in with a delay from their index variable, and the gap cell fills last with fill-opacity. transform-box fill-box makes each cell scale around its own centre. Hover and focus replay only the gap fill and lift the roof by a pixel and a half. Replay remounts the SVG to restart every keyframe.
Accessibility
The mark is aria-hidden inside a link with a label, and focus triggers the same replay as hover. The load waits until the logo is in view. Reduced motion shows the finished mark with no animation.
Get the source with Pro
The demo above is free to play with. Pro unlocks the source of this and every other Pro component, with copy-ready code and a zip download.
Already bought? Sign in- Pay once
Lifetime
Pay once, keep it forever.
$39once
- Every Pro component, with full source
- Lifetime updates: every future Pro component included
- One zip download, ready to drop into a React app
- Commercial use in unlimited client and personal projects