# SVGarden 🌱

A massive, searchable bank of SVG + CSS animations with copy-ready code snippets.

Production: https://www.svgarden.dev · Author: Simon-Pierre Boucher — contact@spboucher.ai

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 — and each one ships with a short "How it works" lesson. The site is static (Astro), searched client-side (lazy Fuse.js), highlighted at build time (Shiki), and customized live through CSS custom properties.

# 📊 Metrics

# The bank

# Difficulty

# Categories

# Quality gates (every build)

# Quick start

npm install
npm run dev        # local dev server on :4321
npm run build      # validate snippets + build static site into dist/
npm run serve      # serve dist/ with the production Express server (:4321, /healthz)

# Adding a snippet

npm run new        # interactive scaffolder → snippets/<category>/<slug>.html
npm run validate   # the same gate the build runs

One file = one animation. The gallery, detail page, category pages, search index and tag filters all regenerate at build time — never edit generated pages.

Snippet hard rules (enforced by scripts/validate-snippets.mjs, which fails the build):

• SVGarden author header at the top (attribution travels with every copy/download);
• <!--svgarden ... --> YAML frontmatter (title, slug, category, tags, difficulty, techniques, how_it_works, customizable, created, and optional support);
• self-contained (no external assets), all classes prefixed sg-<slug>,
• customizable values as --sg-* custom properties declared on the root element,
• ≤ 150 lines, js tag iff the snippet contains a <script>,
• every <svg> is aria-hidden="true" or role="img" + <title>;
• cutting-edge CSS (@property, animation-timeline, :has(), backdrop-filter, linear(), CSS d) must sit behind @supports with a graceful static fallback, and declare a support: <one-line caveat> frontmatter field — the detail page renders it as a browser-support note.

# Architecture

# Deployment (node M3U96b + ngrok)

The site runs on cluster node M3U96b, served at 127.0.0.1:4321 and exposed publicly through an ngrok tunnel at https://www.svgarden.dev.

./scripts/deploy.sh

The script syncs the source to the node (via git pull once a git remote exists on the node; via rsync until then), runs npm ci + npm run build, restarts both pm2 apps, then health-checks http://127.0.0.1:4321/healthz and https://www.svgarden.dev/healthz.

# One-time ngrok requirements (operator steps)

1. ngrok installed and authenticated on the node (ngrok config add-authtoken <token>). Never commit or share the token.
2. www.svgarden.dev reserved as a custom domain in the ngrok dashboard (Universal Gateway → Domains).
3. DNS: a CNAME for www.svgarden.dev pointing at the target ngrok gives you when reserving the domain.
4. Tunnel definition in the node's ngrok config (~/Library/Application Support/ngrok/ngrok.yml on macOS — add the block, don't overwrite the file):

tunnels:
  svgarden:
    proto: http
    addr: 4321
    domain: www.svgarden.dev

pm2 keeps both alive across reboots (pm2 save + pm2 startup): svgarden-web runs server.mjs, svgarden-tunnel runs ngrok start svgarden --log=stdout.

© Simon-Pierre Boucher — contact@spboucher.ai — svgarden.dev