SVGarden
Copy-ready SVG + CSS animations, taught properly
A searchable, zero-dependency bank of 74 self-contained animations where every snippet ships with a live customizer and a short lesson on how it works.
74
Copy-ready snippets
14
Categories
177
Distinct techniques taught
100/100
Lighthouse perf & accessibility
90%
JavaScript-free snippets (67/74)
0
Dependencies for visitors
Overview
SVGarden is a static-first web platform hosting a large, ever-growing library of SVG and CSS animations. Every animation is one self-contained .html file: paste it into a blank page and it works — no frameworks, no CDNs, no build step required by the snippets themselves. Each one carries a short "How it works" lesson, so the bank doubles as a course in modern SVG and CSS technique.
The bank currently holds 74 snippets across 14 categories — loaders, filters, backgrounds, scroll-driven scenes, charts, motion paths, text effects, and more — teaching 177 distinct techniques from feTurbulence and goo filters to @property sweeps, animation-timeline, and SMIL morphing. 67 of the 74 snippets need zero JavaScript, and cutting-edge CSS always sits behind @supports with a graceful static fallback and a documented browser-support caveat.
The platform is engineered to scale by design: adding an animation means adding one file, and the gallery, detail pages, category pages, search index, and tag filters all regenerate at build time. A validation script enforces attribution headers, YAML frontmatter, class scoping, self-containment, and a 150-line size cap on every build — and the site itself scores a perfect 100/100 on Lighthouse performance and accessibility.
Key Features
Self-contained snippets
Every animation is one .html file with inline styles that renders correctly when pasted into a blank page — no external assets, ever.
Instant client-side search
Lazy-loaded Fuse.js searches titles, tags, and techniques with category and difficulty filters, all on a fully static site.
Live customizer
Controls auto-generated from each snippet's frontmatter tweak --sg-* custom properties in real time and rewrite the code block and clipboard output to match.
A lesson in every snippet
Each animation ships with a genuine "How it works" explanation, turning the bank into a hands-on classroom for 177 techniques.
Cutting-edge CSS, safely
Modern features like @property, animation-timeline, :has(), and linear() sit behind @supports with static fallbacks and rendered browser-support notes.
Validation that fails the build
A validation script enforces attribution headers, frontmatter, sg- class scoping, self-containment, and the 150-line cap on all 74 snippets before Astro builds.
Zero runtime cost
Astro emits pure static pages with Shiki highlighting done at build time, hitting 100/100 Lighthouse performance and accessibility.
Accessible by rule
Every SVG is either aria-hidden or given role="img" with a title, and all snippets are dark/light safe by design.
One-command deploys
A deploy script syncs to the node, runs npm ci and the build, restarts pm2, and health-checks both the local server and the public domain.
How It Works
One file per animation
Each snippet lives at snippets/<category>/<slug>.html with an attribution header, YAML frontmatter (title, tags, difficulty, techniques, how_it_works, customizable), and the raw self-contained markup and CSS.
Validation gate
validate-snippets.mjs runs before every build and fails it if any of the 74 snippets breaks the rules: headers, frontmatter, sg- scoping, self-containment, or the 150-line cap.
Static generation
A single parser (src/lib/snippets.mjs) feeds Astro, which regenerates the gallery, per-snippet detail pages, category pages, tag filters, and the Fuse.js search index — 84 pages per build, never edited by hand.
Interactive layer
Detail pages pair a sandboxed live preview with a customizer whose controls come straight from frontmatter; changes update the preview, the Shiki-highlighted code block, and the copy/download output with attribution attached.
Production serving
An Express server (server.mjs) serves dist/ with compression and cache headers, kept alive by pm2 alongside an ngrok tunnel exposing https://www.svgarden.dev, with /healthz checks wired into deploy.sh.
Tech Stack
Site & Build
Search & Snippets
Serving & Ops
Highlights
- 74 snippets teaching 177 distinct techniques across 14 categories — average snippet is just 57 lines
- Perfect 100/100 Lighthouse scores for both performance and accessibility
- 90% of snippets (67/74) need zero JavaScript — and visitors need zero dependencies
- Every copied snippet works pasted into a blank .html file, paste-tested per batch
- Adding an animation is adding one file: 84 pages, search index, and filters regenerate at build time
- The site eats its own dog food — vanilla CSS and custom properties, no Tailwind, no third-party trackers
Explore SVGarden
A searchable bank of SVG + CSS animations — the full source is on GitHub.