Best SVG animation skills for Claude Code

SVG animation sits in an awkward gap: CSS keyframes cannot animate path data, and JavaScript animation libraries each have their own SVG quirks around transforms, viewBox units, and stroke properties. A dedicated skill closes that gap; the strongest today is svg-animations, and the supporting cast on the animation hub covers everything from line drawing to character rigs.

Key takeaways

• svg-animations by supermemoryai leads the SVG-specific picks with 1,418 installs (skills.sh registry), generating handcrafted, performant SVG animations and illustrations directly through the coding agent.
• svg-assembly-animator (893 installs, 913 stars) turns static SVG icons into assembly animations with transparent frame export for video editing, a niche nothing else in the catalog covers.
• For library-driven work, gsap-core (1,657 installs, 79,022 stars) produces production-grade GSAP code for DOM and SVG in React, Vue, or vanilla JavaScript.
• motion-advanced (1,684 installs, 230,384 stars) adds drag, gesture, text, and SVG animations for React and Next.js via Framer Motion.
• Lightweight pages can skip frameworks entirely: anime-js (401 installs) handles Anime.js timelines, staggers, and SVG tweens without a React dependency.

What is the best SVG animation skill for Claude Code?

The best SVG animation skill is svg-animations by supermemoryai, at 1,418 installs (skills.sh registry, GitHub). It focuses on generating handcrafted SVG animations and illustrations, meaning the agent writes the SVG markup and the animation together instead of bolting motion onto an existing asset.

npx skills add supermemoryai/skills --skill svg-animations

Two strong alternatives: svg-assembly-animator (893 installs, 913 stars) specializes in high-energy assembly effects where an icon builds itself from pieces, exporting transparent frames for video workflows, and svg-character-animation (261 installs, 39,264 stars) from the openmontage repo targets character rigs. The broader ranked list lives on the web animation guide.

When should you use GSAP for SVG instead of CSS?

Use GSAP when you need to animate path data, sequence multiple elements on a timeline, or scrub animation with scroll position, since CSS cannot express any of those. gsap-core (1,657 installs, 79,022 stars) generates production-grade GSAP code for exactly these cases across DOM, SVG, React, Vue, and vanilla JavaScript, and gsap-greensock (438 installs) adds the animation-principles framing on top. For plain transforms and opacity, CSS remains the cheaper choice; the CSS scroll animations vs GSAP guide draws that line in detail. The SVG 2 specification itself is maintained by the W3C at w3.org.

How do you animate SVG in React apps?

In React the strongest option is Framer Motion through motion-advanced (1,684 installs, 230,384 stars), which covers drag, gesture, text, and SVG animation patterns for React and Next.js without hand-rolling the library's more complex APIs. Its sibling repo variant at affaan-m/ecc (1,157 installs) tracks the same skill. SVG elements accept motion components directly, so pathLength line-drawing effects and staggered group reveals need only a few props once the skill is loaded. MDN documents the underlying SVG animation model at developer.mozilla.org.

What about lightweight sites without a framework?

For landing pages and dashboards that do not ship React, anime-js (401 installs) generates Anime.js timelines, staggers, and SVG or DOM tweens with a tiny footprint. It comes from the animation-principles repo, whose companion skills cover easing and timing theory, so the output follows real motion-design rules rather than arbitrary durations. Browse sibling picks in the frontend category.

A complete starter stack

• svg-animations (1,418 installs) - handcrafted SVG animation and illustration generation.
• gsap-core (1,657 installs) - timeline, scroll, and path animation via GSAP.
• motion-advanced (1,684 installs) - Framer Motion SVG and gesture work in React.
• svg-assembly-animator (893 installs) - icon assembly effects with transparent frame export.
• anime-js (401 installs) - lightweight tweens for framework-free pages.

Common pitfalls

• Animating stroke-dashoffset line drawing without setting pathLength first, which makes durations unpredictable across icons of different sizes.
• Applying CSS transforms to SVG children and expecting HTML box-model behavior: SVG uses its own coordinate system, and skills like gsap-core exist precisely because agents get this wrong unprompted.
• Shipping decorative SVG motion without a prefers-reduced-motion guard, an accessibility miss that also burns battery on mobile.

Install counts from the skills.sh leaderboard, snapshot 2026-07-17. Load one SVG-specific skill and one library skill, and the agent stops guessing at coordinate systems.

Common questions