AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Components & kits

Dot Matrix Animations

A browsable set of tiny loading patterns built as self-contained SVG snippets with inline styles. Each animation is driven from a single keyframe plus a delay map, about four kilobytes apiece. Click a tile to copy SVG, tune tint and speed, pause all, or filter by spinner, progress, ambient, agent, and status families. Respects prefers-reduced-motion with a calm static fallback.

Dot Matrix Animations

What's interesting

  • Sixty quiet dot-matrix SVG loaders: one CSS keyframe each, per-dot delay maps, copy tiles with no GIFs or JavaScript runtime.
  • A browsable set of tiny loading patterns built as self-contained SVG snippets with inline styles.
  • Each animation is driven from a single keyframe plus a delay map, about four kilobytes apiece.

Tags

SVGLoadersCSSMotionPerformance