skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

svg-animation

Animate SVG strokes, morphs, path motion, and gradients using CSS, SMIL, or GSAP.

3|Updated Apr 20, 2026
Search Tags:#css#animation#svg#gsap#smil#path morphing#stroke draw-on
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill svg-animation-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-animation
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/svg-animation
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill svg-animation-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and 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, motion along paths, and animated gradients or filters. This Skill provides the exact techniques, code patterns, and verification workflow to produce a working animated SVG as a single self-contained HTML file. ## Core Features & Use Cases - Stroke draw-on animation: Implements the stroke-dasharray/stroke-dashoffset technique with getTotalLength measurement or the pathLength="1" no-JS normalization for signature, icon, and illustration draw-on effects. - Path morphing and motion paths: Covers GSAP MorphSVG and Flubber for mismatched-point morphs, plus GSAP MotionPath, CSS offset-path, and SMIL animateMotion for moving elements along paths. - Animated gradients, filters, and verification: Animates gradientTransform, feDisplacementMap, and blur filters, includes an SVGO config tuned for animation, and ships a seek-harness plus screenshot workflow to verify frames at start, mid, and end. - Use Case: A user asks to make a logo's outline draw itself on page load. The Skill produces one HTML file with an inline SVG, a CSS keyframes draw-on using pathLength normalization, a ?t=N seek harness, and screenshot verification of the animation frames. ## Quick Start Ask the assistant to animate an SVG, for example: make this logo's stroke draw itself on over 1.5 seconds and give me a standalone HTML file.

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 path draw itself on screen?▼

Set stroke-dasharray and stroke-dashoffset equal to the path length, then animate the offset to zero. Measure the length with getTotalLength() in JavaScript, or set pathLength="1" on the path and animate dashoffset from 1 to 0 for a pure-CSS solution.

How do I morph one SVG path into another shape?▼

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

Should I use CSS, SMIL, or GSAP for SVG animation?▼

Use CSS for simple declarative effects like draw-on and fades, SMIL for self-contained assets that must animate inside an <img> tag, and GSAP for coordinated timelines, scroll scrubbing, or morphing mismatched paths. SMIL lacks support in legacy IE and old Edge.

Why does my SVG animation break after running SVGO?▼

Default SVGO presets rename IDs, merge paths, and convert shapes, which destroys the hooks your CSS, JS, or SMIL targets. Disable cleanupIds, mergePaths, convertShapeToPath, and removeViewBox in the SVGO config, and use prefixIds to avoid gradient ID collisions when inlining multiple SVGs.

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

An SVG loaded via <img> can only self-animate through internal SMIL or CSS inside the SVG file; external JavaScript and CSS cannot reach its internals. Inline the SVG directly in the HTML markup when you need script or stylesheet control.

How do I respect prefers-reduced-motion in SVG animations?▼

Wrap looping or large-motion animations in a media query and disable them under prefers-reduced-motion: reduce, showing the final drawn state instantly by setting stroke-dashoffset to 0. Keep functional icon state changes but drop the easing duration.

Related Skills

Explore More Design & Creative Skills→
tryopendatatryopendata
121

svg-design

Create and edit SVG logos, icons, and graphics with hand-authored markup.

Official
Advanced
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
lord-vinayaklord-vinayak

playwright-accessibility-auditor

Automate browser accessibility testing with axe-core and Playwright.

Community
Advanced
openaiopenai
5.3k

remotion-markup

Write Remotion React markup with frame-driven animations, media components, and visual effects.

Official
Advanced