ss-animate-svglisted

Create hand-crafted, dependency-free animated SVGs: self-drawing paths and signatures, loading spinners, morphing shapes, motion along a path, animated gradients, waves, pulses, and animated logos, icons, and badges — up to complex layered scenes with choreographed build-ins, particle fields, and parallax — choosing the right technique (CSS vs SMIL) for how the SVG is delivered (inline HTML, <img>, CSS background, GitHub README, favicon). Use when the user wants any animated SVG, asks to animate an existing SVG, icon, logo, or favicon, wants an animated scene, illustration, hero background, or banner, or mentions SMIL, stroke drawing, dashoffset, path or shape morphing, motion path, loader, spinner, animated checkmark, particles, parallax, or a "draws itself" effect.
rajnandan1/such-skills · ★ 2 · Web & Frontend · score 75

Install: claude install-skill rajnandan1/such-skills

# Animate SVG Hand-craft SVG animations with nothing but markup — no JS libraries, no build step. Every SVG element is a DOM node you can animate with CSS or native SMIL. ## Workflow 1. **Pick the technique for the delivery context** (table below). This decides everything else. 2. **Build the static artwork first** and confirm it renders. Need path/shape/gradient/filter syntax? Read [references/paths-and-shapes.md](references/paths-and-shapes.md). 3. **Add animation.** For SMIL (`<animate>`, timing chains, easing, morphing) read [references/smil.md](references/smil.md). For ready-made patterns (spinner, checkmark, morphing menu icon, waves, shimmer, orbits) read [references/recipes.md](references/recipes.md) and adapt. For complex multi-element pieces — layered scenes, hero art, particles, parallax, choreographed build-ins — read [references/complex-scenes.md](references/complex-scenes.md) and follow its storyboard-first method. 4. **Accessibility pass** (below) — every deliverable. 5. **Verify** (below) — open it, watch it, check reduced motion. ## Choose the technique | Where the SVG will live | What runs there | Use | |---|---|---| | Inline in HTML / JSX | Everything: page CSS, JS, SMIL, `:hover`, `click` | CSS keyframes; JS only if it needs state | | `<img>`, CSS `background-image`, favicon, GitHub README | `<style>` **inside** the file and SMIL. No JS, no external CSS/fonts/images, no pointer events | CSS-in-SVG for simple loops; SMIL for chained, timed sequences |