106.9K+Download
Skip to the usage guide
SVG Animationsby supermemoryai

SVG Animations Skill.

Create editable SVG path, icon and illustration animations.

  • SVG
  • Vector Motion
Download OpenDesignView Usage Guide
Source Review · svg-animationsSKILL.md
Task Create editable SVG path, icon and illustration animations. Produces Editable SVG markup with the chosen animation mechanism. Before You Start Bring the SVG or shape brief and specify the trigger, final state and embedding target. Inline markup and image embedding need separate checks for interaction, labeling and reduced-motion behavior.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Create editable SVG path, icon and illustration animations

Explore SVG drawing, path motion, shape morphing and grouped transforms, with practical checks for embedding, final states and reduced motion.

Source-based workflowNot an execution benchmark

The Working Approach

svg-animations is a practical reference for hand-authored vector motion. It covers SVG coordinate systems, shapes, paths, groups, masks and filters, then connects them to CSS or SMIL animation. Typical outputs include drawing lines, moving objects along paths, changing icons and animated illustrations.

The source explains mechanics that affect correctness: a draw-on uses the path length, a morph needs compatible command structures, and grouped transforms can separate overall motion from local details. It also calls for accessible labels and reduced-motion behavior, which must be verified in the actual embedding and animation mode.

Expected Deliverables

  • Editable SVG markup with the chosen animation mechanism.
  • A vector icon, illustration, logo or loading-state animation.
  • Embedding and fallback notes for the intended web context.
See the Example Brief

From Brief to Review

  1. 01
    Set the coordinate system

    Define a viewBox and build the artwork from primitives, paths and groups. Keep reusable masks, gradients and filters in definitions.

  2. 02
    Choose the animation mechanism

    Use the required attributes and timing model for stroke drawing, path following or morphing. Measure lengths and align path commands instead of guessing.

  3. 03
    Check the embedding context

    Inspect transforms, final states and loop seams in the actual page or image embedding. Test labels and reduced motion for the selected mechanism.

02 When to Use It

When to Use It

Bring the SVG or shape brief and specify the trigger, final state and embedding target. Inline markup and image embedding need separate checks for interaction, labeling and reduced-motion behavior.

A Good Fit

  • Vector artwork needs small-scale motionUse it for icons, loading graphics and illustrations that should remain editable as markup.
  • A path effect needs technical guidanceThe reference explains drawing, movement and compatible-shape interpolation.

Limits to Check

  • Browser behavior needs testingThe source contains broad compatibility statements; individual CSS path and SMIL features should be checked in target browsers.
  • CSS rules do not cover every engineA reduced-motion CSS block alone may not stop a SMIL timeline. The actual animation mechanism needs an appropriate fallback.

Bring These Inputs

  • Vector artwork or shape briefProvide an SVG or a description of the paths and shapes to create.
  • Motion behaviorSpecify a reveal, loop, morph or path-following action and its trigger.
  • Embedding targetIdentify inline SVG, image embedding, target browsers and accessibility requirements.

03 Decisions That Matter

Decisions That Matter

  1. Geometry stays editable

    Paths and groups can be revised directly rather than replacing a rendered clip.

  2. Measured drawing lengths

    Using actual path length avoids an incomplete stroke or premature reveal.

  3. Separated transforms

    Group-level movement can coexist with local changes without losing the intended origin.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide an SVG or a description of the paths and shapes to create.

Upstream Source File
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use svg-animations to create a small success illustration for my checkout page. Draw a circular outline, then reveal a checkmark, and hold the finished state. Keep the artwork editable as SVG and measure the actual path lengths. Provide an inline embedding with a descriptive title and a static reduced-motion version. Test the transform origins and final stroke completion in the target browsers rather than assuming every animation feature behaves identically. Include a replay trigger for review, but do not turn the success indicator into an endless attention-grabbing loop.

Inspect the Result

Check the actual output against these observable criteria.

  • Check path lengths, morph command compatibility and transform origins.
  • Inspect final states and any loop boundary at the real display size.
  • Test accessible labeling and the chosen mechanism's reduced-motion fallback.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
supermemoryai
Repository
supermemoryai/skills
Skill File
SKILL.md
License
Not confirmed
Reviewed Snapshot
2026-11-02 · 64e285d5a4a5

Reading Notes

  1. License ScopeUnknown, not public domain. Other filenames or external terms may exist; completeness not established.
Editorial Source Summary
Create editable SVG path, icon and illustration animations.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

How does a line draw itself?

The source exposes a stroke by changing stroke-dashoffset relative to its measured length. This controls how much of the path is visible.

Can any two shapes morph?

Direct path interpolation requires compatible command structures. Shapes with different commands need preparation or another morphing approach.

Is one reduced-motion CSS rule enough?

That depends on the animation mechanism. CSS animation, JavaScript and SMIL can require different handling, so the embedded result must be exercised.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md