About SVGarden

SVGarden is a growing bank of 74 SVG + CSS animations across 14 categories — loaders, stroke drawing, hover effects, gauges, animated text, shape morphs and backgrounds. It is built and maintained by Simon-Pierre Boucher.

The rules every snippet follows

• Self-contained — paste any snippet into a blank .html file and it works. No frameworks, no CDNs, no fonts, no build step.
• Scoped — every class is prefixed sg-, so multiple snippets coexist on one page without collisions.
• Customizable — colors, sizes and speeds are CSS custom properties (--sg-*) on the root element. The customizer on each page rewrites them live.
• Pedagogical — each snippet ships with a short “How it works” explaining the technique, not just the code.
• Accessible — decorative SVGs are aria-hidden; meaningful ones get role="img" and a <title>.

How to use a snippet

Open any snippet, tweak it with the customizer, then Copy code (or Download .html). The attribution header travels with the code — you're free to use the snippets in your projects; keeping the header is appreciated.

Colophon

Built with Astro, highlighted at build time with Shiki, searched client-side with a lazy-loaded Fuse.js. The site itself is styled with the same vanilla CSS techniques the snippets teach — no CSS frameworks anywhere.