skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svg-animation

Implements SVG draw-on, morphing, and motion-path animations using CSS, SMIL, and GSAP.

52|3|Updated Aug 20, 2026
Search Tags:#css#SVG#animation#gsap#smil#draw-on#path morphing
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill svg-animation-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-animation
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/svg-animation
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill svg-animation-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Animating SVGs requires choosing between CSS, SMIL, and JavaScript approaches, each with different tradeoffs for draw-on effects, path morphing, and motion along paths, and mistakes like mismatched path commands or SVGO stripping animated IDs silently break the result. ## Core Features & Use Cases - Stroke draw-on animations: Implements stroke-dasharray/stroke-dashoffset draw-on effects for icons, signatures, and illustrations, including the pathLength="1" no-JS normalization trick. - Path morphing and motion paths: Covers GSAP MorphSVG and Flubber for shape morphing, plus GSAP MotionPath, CSS offset-path, and SMIL animateMotion for moving elements along paths. - Verification workflow: Ships a seek harness (?t=N) and screenshot loop to freeze and visually verify animations at start, mid, and end frames. - Use Case: A user asks to make a logo's outline draw itself on page load; the Skill produces a single standalone HTML file with an inline SVG, a CSS keyframes draw-on animation, and a seek harness for screenshot verification. ## Quick Start Animate this SVG logo so its stroke draws itself on over 1.5 seconds and give me a standalone HTML file I can open in a browser.

Frequently Asked Questions about svg-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make an SVG line draw itself on with CSS?▼

Set stroke-dasharray and stroke-dashoffset equal to the path length, then animate the offset to 0 with CSS keyframes. Measure the length with path.getTotalLength() in JS, or set pathLength="1" on the path and use dash values of 1 for a no-JS solution.

How to morph one SVG path into another shape?▼

Use GSAP MorphSVGPlugin, which handles mismatched point counts automatically, or the standalone Flubber library to generate interpolators. For hand-authored icon toggles, give both paths identical command structure and animate transforms instead of the d attribute.

GSAP MorphSVG vs Flubber for SVG morphing?▼

MorphSVG provides the highest-quality point mapping with shapeIndex tuning and rotational interpolation, and is free as of GSAP 3.12. Flubber is a small standalone library better suited when you cannot add GSAP or need React and Framer Motion value plumbing.

Does SMIL animation work in all browsers?▼

SMIL works in evergreen browsers but is not supported in IE or old Edge and has been historically deprecation-flagged. For maximum reach or scroll-synced animation, prefer CSS or JavaScript; SMIL remains fine for self-contained icon assets.

Why does my SVG animation break after running SVGO?▼

Default SVGO plugins rename IDs, merge paths, and convert shapes, which breaks CSS, JS, and SMIL references. Disable cleanupIds, mergePaths, convertShapeToPath, and removeViewBox in your SVGO config, and use prefixIds to avoid gradient ID collisions when inlining multiple SVGs.

Can I animate an SVG embedded with an img tag?▼

An SVG loaded via an img tag can only self-animate through internal SMIL or CSS; external CSS and JS cannot reach its internals. Inline the SVG directly in the DOM if you need to animate it with page scripts or stylesheets.

Related Skills

Explore More Design & Creative Skills→
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate
SL-A-SHSL-A-SH

optimize

Diagnose Core Web Vitals and optimize front-end loading, rendering, and bundle size.

Community
Advanced
gagandeepgillgagandeepgill
1

frontend-a11y

Implements accessibility patterns for React and Next.js components including ARIA, forms, and keyboard navigation.

Community
Intermediate
xingBaGanxingBaGan

lottie-bodymovin

Implement Disney's 12 animation principles in Lottie animations exported from After Effects.

Community
Intermediate