# svg-animations

Instructs the assistant to write clean animated SVGs using CSS and SMIL. Helpful when building custom icons, loading spinners, and logo animations.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2600 installs · ★ 113
- Author: supermemoryai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/supermemoryai/skills/tree/HEAD/svg-animations/SKILL.md
- Updated: 2026-10-14
- HTML: https://affpapa.org/en/nevibecode/skills/svg-animations

## What it does

This skill guides coding assistants to produce handcrafted vector graphics without bloated markup. It covers coordinate mapping via `viewBox`, geometric primitives, and path drawing commands from Bézier curves to elliptical arcs. It also details the setup for linear gradients, masks, and blur filters.

The instructions break down two animation methods: CSS keyframes and native SMIL markup. CSS handles line-drawing strokes with `stroke-dasharray` and path transitions. Native SMIL tags like `<animate>` and `<animateMotion>` take over when rendering SVGs inside `<img>` tags or CSS background rules, where external scripts cannot run.

Morphing paths via CSS requires strict consistency. Both the starting and ending paths must share identical command counts and types for browser interpolation to succeed.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add supermemoryai/skills --skill svg-animations -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/svg-animations/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/svg-animations/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add supermemoryai/skills --skill svg-animations -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/svg-animations/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add supermemoryai/skills --skill svg-animations -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/svg-animations/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install supermemoryai/skills svg-animations
```

2. **Manually: put the files in place**
- File: `.github/skills/svg-animations/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add supermemoryai/skills --skill svg-animations -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/supermemoryai/skills --path svg-animations
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/svg-animations/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add supermemoryai/skills --skill svg-animations -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/supermemoryai/skills/tree/HEAD/svg-animations/SKILL.md

## When to use it
- build animated SVG loading indicators with pure CSS
- create stroke-drawing line animations for vector icons
- move graphics along custom paths with native SMIL
- configure shape morphing via the CSS `d` property

## Example prompts
- Create an SVG loading spinner with a CSS pulse animation
- Generate a checkmark icon that animates its stroke on display
- Build an animated icon that morphs between two shapes on hover

## Similar
- [svg-animation](https://affpapa.org/en/nevibecode/skills/svg-animation.md) — skill · 2500 installs
- [motion-figure](https://affpapa.org/en/nevibecode/skills/motion-figure.md) — skill · 545 installs
- [svg-icon-generator](https://affpapa.org/en/nevibecode/skills/svg-icon-generator.md) — skill · 1300 installs
- [svg-art](https://affpapa.org/en/nevibecode/skills/svg-art.md) — skill · 509 installs
- [cli-anything-inkscape](https://affpapa.org/en/nevibecode/skills/cli-anything-inkscape.md) — skill · 605 installs
- [SVG Logo Designer](https://affpapa.org/en/nevibecode/skills/svg-logo-designer.md) — skill · 8200 installs

From the same set: [supermemoryai/skills](https://affpapa.org/en/nevibecode/by/supermemoryai/skills.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md