Orqestria Download
← Back to Web app developers

Skill · Version 1.0.0

SVG animation

Prepares scalable SVG motion with correct coordinates, unique identifiers and accessible reduced-motion behavior.

svg-animation

Team members using this skill

See how it helps

When is it useful?

Use when animated icons collide across instances or scale incorrectly.

What does it help you do?

  • Defines viewport geometry and consistent transform origins.
  • Prevents duplicate IDs in gradients, masks and clipping paths.
  • Chooses suitable animation techniques and measures rendering cost.

Try asking this

Animate two copies of a status illustration without shared mask collisions and provide a meaningful static alternative. Render both illustrations on one page, pause one and resize the other. Their masks and animations must remain independent, with understandable static status text.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

SVG Animation

SVGs provide resolution-independent, DOM-addressable vector graphics that bridge UI components and expressive illustrations. Well-structured SVG markup is 80% of a reliable SVG animation.

Preparing Clean, Animatable SVG Markup

  1. Viewport & coordinate hygiene:
    • Always include an explicit viewBox="0 0 width height" and preserve aspect ratio (preserveAspectRatio="xMidYMid meet").
    • Group related visual layers into semantic <g id="..."> or data-part="..." groups flattened to a shared coordinate space so transforms don't compound unexpectedly across deeply nested matrices.
  2. Avoid ID collisions across multiple component instances:
    • Inline SVGs often contain <linearGradient id="grad-1">, <clipPath id="clip-1">, or <mask id="mask-1">. Rendering the same component twice on a page causes duplicate DOM IDs—and hiding the first instance breaks gradients/clips in the second! Prefix IDs dynamically per component instance (useId()).
  3. Transform origin normalization:
    • By default, SVG <path> and <g> elements calculate transform-origin relative to the entire SVG canvas (0, 0), not the element's own bounding box.
    • In CSS, always set transform-box: fill-box; transform-origin: center; on animated SVG child elements (or use GSAP's svgOrigin / transformOrigin: "50% 50%", which normalizes cross-browser behavior automatically).

Core SVG Animation Techniques

Technique Best Practice
Line / Path Drawing (stroke-dasharray & stroke-dashoffset) Set pathLength="1" directly on the <path>, <line>, or <circle> element! That normalizes the total path length to 1 regardless of viewport scale, allowing clean stroke-dasharray: 1; stroke-dashoffset: 1 -> 0 animations without calling getTotalLength() in JavaScript.
Data-Flow Connectors & Pulses Layer two paths sharing the exact same d attribute: a muted base track (stroke-opacity="0.2") and an animated highlight segment (pathLength="1", stroke-dasharray="0.12 0.88", animating stroke-dashoffset from 1 to 0) to visualize live request/data routing.
Icon Micro-Interactions (Morph & State Toggle) Keep anchor point counts compatible when morphing d attributes, or animate composite <line> / <path> primitives (rotate, scaleX, stroke-dashoffset) for crisp play/pause, menu/close, and copy/check transitions.
Clipping & Mask Reveals Prefer <clipPath> (hard geometry edge, fast GPU compositing) over <mask> (luminance/alpha pixel calculation per frame) unless soft feathered gradients are required.

Accessibility & Performance Guardrails

  • Decorative vs. informative SVGs: Mark purely decorative icons and background vector scenes with aria-hidden="true" focusable="false". For informative diagrams, include <title> and <desc> linked via aria-labelledby or expose semantic HTML labels alongside the graphic.
  • Avoid animating SVG <filter> primitives (feGaussianBlur, feDisplacementMap) continuously on large viewports: Filter regions trigger expensive CPU/GPU rasterization every frame. Restrict animated filters to small bounded <filter x y width height> regions or replace them with layered opacity/transform transitions.

Included files 1

  • SKILL.md