nc9nc9/skills/animate-svg/SKILL.md

animate-svg

Skill4 starsChanged 54 days agoMITView on GitHub

Generate looping animated SVGs (CSS keyframes / SMIL) with Gemini Pro via OpenRouter. Use for self-contained animated vector graphics — motion graphics, hero animations, loaders, halftone/ASCII motion, animated icons, draw-on line diagrams.

Reads credentials

In this repository18 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- agent-browserSkill
- ai-writing-detectorSkill
- browserbaseSkill
- clickhouseSkill
- commitSkill
- geist-designSkill
- generate-faviconSkill
- generate-imageSkill
- google-indexingSkill
- google-search-consoleSkill
- google-searchSkill
- humanizerSkill
- keyword-researchSkill
- parallelSkill
- remove-backgroundSkill
- reviewSkill
- web-uiSkill

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Keep --reasoning low for halftone/ascii: high-effort thinking eats the token budget and truncates the SVG mid-element.
line 47

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

animate-svg

Generate one self-contained, infinitely-looping animated SVG from a text description. Output is SVG markup (drop into HTML/JSX or save as .svg), not a raster image — for raster use generate-image.

Routes to google/gemini-3.1-pro-preview over OpenRouter chat-completions; Gemini Pro is unusually good at hand-authoring SVG geometry plus CSS @keyframes / SMIL motion.

Requirements

OPENROUTER_API_KEY — https://openrouter.ai/keys

Command

./scripts/animate_svg "a web browser window rendering a page" -o browser.svg

Progress goes to stderr, the .svg to --output.

Options

Flag	Default	Notes
`-o, --output`	`animation.svg`	Output path
`-st, --style`	`halftone`	`halftone` (dot grid + shimmer), `ascii` (`.:-=+*#%@` glyph grid), `line` (`stroke-dashoffset` draw-on), `glyph` (one bold mark, micro-animation), or free text passed through
`-c, --colors`	`currentColor + accent`	e.g. `"green #4a7c3f, orange #c8743a"`
`-b, --bg`	`transparent`	A color, or `transparent`/`none` (no bg rect)
`--size`	`400x300`	viewBox `WxH`; no width/height attrs emitted (CSS sizes it)
`-m, --model`	`google/gemini-3.1-pro-preview`	Any OpenRouter model id
`-t, --max-tokens`	`40000`	Halftone/ascii grids are token-heavy — keep high
`--temp, --temperature`	`0.8`
`-r, --reasoning`	`low`	`minimal\|low\|medium\|high`
`-x, --extra`	–	Extra instructions appended to the prompt
`-i, --input`	–	Existing `.svg` to refine/restyle
`--retries`	`2`	Re-asks if output isn't valid SVG

Gotchas

Keep --reasoning low for halftone/ascii: high-effort thinking eats the token budget and truncates the SVG mid-element.
Output is validated: one <svg> root with xmlns + viewBox and no width/height, no <script>/<image>/<foreignObject>/external URLs, parsed with defusedxml. A @media (prefers-reduced-motion: reduce) guard is baked into the prompt.
Halftone/ascii output runs to hundreds of elements — expected, and still cheap because motion is transform/opacity only.
For a family of graphics, hold --colors, --bg, --size and style constant and vary only the subject.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free