Design & Motion · iart-ai/web-animation-skills

svg-animation

Name: svg-animation
Author: iart-ai/web-animation-skills

This skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessWrite FileDual-pass Audit

Author iart-aiGitHub iart-ai/web-animation-skills ↗Stars 28License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）Commit b6dba3eb75

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Line drawing animations rely on the dash mechanism: set stroke-dasharray to the total path length and dashoffset to the same value (making it invisible), then animate offset down to 0 to reveal it segment by segment.

skills/svg-animation/SKILL.md

Draw the dash array as long as the path, offset it fully (invisible), then animate the offset to 0.

Provides two ways to obtain length: JS getTotalLength() (most reliable) and the zero-JS pathLength="1" normalization technique (eliminates measurement).

Path morphing requires both d paths to have matching command counts and types; otherwise, a resampling library like MorphSVG or Flubber is necessary.

skills/svg-animation/SKILL.md

Paths interpolate point-by-point, so a naive morph requires both `d` attributes to have the **same number and type of commands**.

Offers three routes: GSAP MorphSVG (automatic mapping resolution and convertToPath), Flubber (GSAP-free interpolator), and hand-crafted isomorphic paths (icon state transitions).

Motion along a path has three implementation routes (GSAP MotionPath, SMIL animateMotion with mpath, and CSS offset-path), selected based on scroll-synchronization requirements and library dependencies.

skills/svg-animation/SKILL.md

motionPath: { path: "#track", align: "#track", autoRotate: true, alignOrigin: [0.5, 0.5] },

Presents three cost tiers for the same requirement alongside a decision matrix (one row of evaluation criteria each for CSS, SMIL, and GSAP).

Gradients and filters can also be animated (animating gradientTransform or stop offset for light sweeps, animating feDisplacementMap.scale and feGaussianBlur.stdDeviation for distortion and focus), but filters carry heavy paint costs.

skills/svg-animation/SKILL.md

Filters are paint-heavy — animate sparingly and prefer `transform`/`opacity` where possible.

Maintains consistency with the performance cost criteria of 60fps-animation in the same repository, preventing filter animations from being treated as zero-cost operations.

SVG engineering discipline is mandatory before delivery: SVGO must not strip animatable dependencies (cleanupIds, removeViewBox), and the SVG must be inlined to be accessible via CSS and JS.

skills/svg-animation/SKILL.md

keep `viewBox`, drop editor metadata, but disable `cleanupIds`/`removeViewBox` and any plugin that renames IDs you reference from CSS/JS/SMIL.

references provides a dedicated animation-tuned SVGO configuration to proactively prevent accidents where optimizations strip out animation steps.

2Core Capabilities

01Stroke line drawing (dasharray and dashoffset, including getTotalLength, pathLength="1" normalization, and multi-path stagger)

02Path morphing (choosing between GSAP MorphSVG, Flubber, or hand-crafted isomorphic paths)

03Motion along a path and orientation (MotionPath autoRotate, SMIL animateMotion, CSS offset-path)

04Gradient and filter animations (gradientTransform light sweeps, feDisplacementMap, feGaussianBlur, feColorMatrix)

05Driver selection (trade-off matrix for CSS, SMIL, and JS, including SMIL support and deprecation considerations)

06Animation-friendly SVGO configuration and inlining requirements

07Driver-specific freeze harnesses (pauseAnimations and setCurrentTime for SMIL; animationDelay and playState for CSS; tl.seek for GSAP)

08Morphing strategy decisions and hand-crafted icon transitions (e.g., hamburger to close)

09Zero-build delivery (single HTML file with inlined SVG, explicitly avoiding bundlers)

10Accessibility criteria: gating loops and large-scale motions under reduced-motion while preserving static final states

3External Dependencies

Kind	Dependency / Endpoint
package	gsap 加 MorphSVGPlugin / MotionPathPlugin（可选：形变与沿路径运动）
package	flubber（可选：无 GSAP 的路径插值器）
cli	SVGO（可选：SVG 清洗与压缩，需关掉会破坏动画的插件）
api	浏览器原语：SVGGeometryElement.getTotalLength()、SMIL animateMotion 与 mpath、CSS offset-path 与 offset-distance
network	交付页可从 CDN 取 GSAP（产物期引用，不判级；正文未点名具体域）
cli	npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Declare allowed domains and key scope

For Administrators

Least privilege keys, retain request logs

Evidence & Triggers (File Paths & Excerpts)

网络端点: Declared external network access: Zero outbound network activity during execution; delivery pages can import GSAP from a CDN (artifact-phase reference, no specific domain named in body)
本地工作目录: File I/O and artifact output: Zero disk writes within this skill's directory; delivers a single self-contained .html file (inline SVG plus a single driver) written out by the agent

Audit Notes: Grading is strictly based on the skill's own directory (skills/svg-animation/ = SKILL.md + 0-byte README.md + references/svg-techniques.md, verified via full find check): zero scripts, zero credentials, zero disk writes, and zero outbound network calls during execution (token scan for fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( yielded zero hits). GSAP CDN, svgo, gsap, and flubber mentioned in the body are artifact-phase or user-side tools and not factored into the risk level. Note (no escalation): Inline SVG is this skill's core technique; if third-party SVGs of unknown origin are inlined, their embedded scripts and event attributes will execute in the host page—this is an inherent characteristic of inline SVG, which is not explicitly flagged in the text.

5Second-Pass Verification

[ok] SMIL 的支持与弃用表述是否自洽 — SKILL.md 选型表给出 SMIL 适用面（自包含、无 JS bundle），并在 caveat 段说明 not supported in IE/old Edge and historically deprecation-flagged，要求滚动同步或最大兼容时改用 CSS 或 JS；references 第 4 节以三轴对比表重申，未夸大（未宣称 SMIL 已被移除）。
[unlocatable] MorphSVG 是否真的免费可用（与 gsap-web 的免费声明同源风险） — SKILL.md 两次称 MorphSVG 在 GSAP 3.12+ 免费（**GSAP MorphSVG** (free as of GSAP 3.12)），但仓库内无上游许可文件可核，属外部事实声明，按文档声明记录（同仓 gsap-web 有同一处声明）。
[ok] dashoffset 的两条取长度路线是否与 references 一致 — SKILL.md 的 Getting the length 两条（getTotalLength 与 pathLength="1"）在 references 的 getTotalLength gotchas 与 No-JS normalization with pathLength 两节展开，且都附代码，前后一致。
[discrepancy] Packaged helper 的路径基准与适用性 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 在仓库根而非本 skill 目录；且 SMIL 驱动的冻结走 svg.pauseAnimations() 与 setCurrentTime()，helper 只替换 URL 参数，无法冻结 SMIL 时钟——对 SMIL 路径该 helper 失效。

6Verdict & Scenarios

Provides all three technical routes alongside a decision matrix for the same requirement, avoiding single-point dependency on solely GSAP or SMIL

Pairs zero-JS normalization techniques (pathLength="1") with library solutions, ensuring viability in low-dependency scenarios

Thorough engineering discipline: ensures SVGO accommodates animations, mandates inline SVG, and explicitly documents potential pitfalls

Annotates performance costs for both filters and gradients, aligning with 60fps-animation performance criteria

Best for: Best for: (1) Stroke line-drawing, erase, and multi-path staggered animations for icons, logos, and signatures; (2) Icon state morphing (hamburger to close, play to pause); (3) Elements moving along paths with auto-rotation (including scroll-synced GSAP versions); (4) SVG gradient and filter animations (light sweeps, glows, displacements); (5) Self-contained vector assets delivered with zero JS (via SMIL or pure CSS declarations).

Not for: Not suited for: (1) Animations based on bitmap or video assets (non-vector objects); (2) Complex multi-element timeline orchestration (better handled by gsap-web); (3) Scenarios requiring pixel-level or frame-by-frame rendering control (better suited for canvas and WebGL skills); (4) Environments requiring IE and legacy Edge support where JS cannot be introduced (both SMIL and CSS offset-path are unsupported).

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload svg-animation.tar.gz

sha256: 7a0047bb3c20631d…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit b6dba3eb75.