Blueprint Callout
A marker dot pulses once, a leader line elbows away from it and a label plate wipes open at the far end.
Animated SVGs you can copy.
Lightweight, self-contained animations in three tiers: CSS, JS and GSAP. Preview one, copy the code, drop it into your project.
18 animations
- CSS
- CSS
Blueprint Compass
A compass arm swings a full turn from the sheet centre, scribing a circle that reveals the marks inside it.
- CSS
Blueprint Dimension
Two extension lines drop in, a dimension line stretches between them and arrowheads snap onto both ends.
- CSS
Blueprint Elevation
A building elevation drafts itself from the ground line up: walls rise, the roof draws in, then door, windows and a dimension tick.
- CSS
Blueprint Frame
A sheet border draws itself clockwise from the top-left corner and four registration ticks click into place behind it.
- CSS
Blueprint Grid
Drafting gridlines extend across the sheet in a diagonal cascade and node crosses mark the intersections.
- CSS
Blueprint Hatch
A section outline draws itself and then fills, line by line, with forty-five degree hatching.
- CSS
Blueprint Sheets
Three drawing sheets rise into an offset stack and the top sheet fills in with rules and a folded corner.
- CSS
Blueprint Sweep
A vertical drafting rule travels across the sheet and leaves a fully drawn gridded panel behind it.
- CSS
Blueprint Unfold
A folded plan sheet opens out in three panels left to right and the drawing inside settles into view.
- CSS
Gauge Arc
A speedometer-style 270-degree dial fills clockwise while a needle swings from empty to a seventy-percent reading.
- CSS
Gauge Bars
Four rounded bars rise in quick succession from a baseline to different heights, hold as a small bar chart, then sink and rise again.
- CSS
Gauge Ring
A circular progress ring sweeps clockwise from the top to a three-quarter reading, holds, drains back and sweeps again.
- CSS
Gauge Segments
A ring of ten separated segments lights up one segment at a time clockwise until seven are lit, then steps back down.
- CSS
Gauge Sparkline
A sparkline draws itself left to right, its shaded area fades in beneath and a dot pops onto the final point, then the line unwinds and redraws.
- JS
Nebula Drift
Twelve particles drifting on closed paths, joined by faint lines that brighten as they pass each other.
- GSAP
Orbit Stagger
A pulsing purple core with three dots orbiting at staggered speeds, all returning to rest together.
- CSS
Wave Loader
Three rounded bars rising and falling in sequence, a quiet indeterminate wait state.
