An innovative animation engine that uses LLMs to generate SVG code sequences and compile them into high-quality MP4 or GIF videos.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install svg-animator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install svg-animator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is SVG Animator?
SVG Animator is a powerful technical tool designed for the Openclaw Skills ecosystem. It offers a unique alternative to traditional AI video generation APIs by leveraging the ability of text-based LLMs to write precise SVG code. By calculating motion paths and transformations through code, it produces smooth, scalable animations that are perfect for characters, scenes, and abstract art.
This skill bridges the gap between static vector graphics and dynamic video content. It automates the entire pipeline from prompt analysis and frame-by-frame SVG generation to final rendering and video encoding, providing developers with a cost-effective and highly customizable animation workflow.
SVG Animator Use Cases
- Character animation including walking, running, and jumping cycles for humans and animals.
- Environmental storytelling such as sunrises, weather effects, and flowing water.
- Abstract UI animations including geometric morphing and particle systems.
- Short narrative videos created by concatenating multiple animated scenes into a single story.
How SVG Animator Works
- The skill parses a natural language prompt to define the subject, action, and duration.
- It designs a sequence of frames where movement is controlled by mathematical functions like sine waves.
- A Node.js environment generates individual SVG files for every frame in the sequence.
- The rsvg-convert utility transforms these vector frames into rasterized PNG images.
- FFmpeg compiles the PNG sequence into a final MP4 or GIF file with specified frame rates.
SVG Animator Setup
To get started with this skill in your Openclaw Skills environment, ensure you have the necessary system dependencies installed:
# Install FFmpeg and RSVG dependencies
sudo apt update
sudo apt install ffmpeg librsvg2-bin
# Basic command to generate an animation
node scripts/animate.js --theme "running cat" --frames 24 --output /tmp/output.mp4
SVG Animator Data Schema & Taxonomy
The skill manages data through a structured pipeline of temporary assets and final exports:
| Component | Format | Description |
|---|---|---|
| Frame Source | .svg | Individual XML-based vector files for each frame. |
| Raster Cache | .png | Intermediate images converted at 400x400 (default) resolution. |
| Video Output | .mp4 | The final compressed video file using mpeg4 encoding. |
| Web Output | .gif | Optimized animated graphics for web embedding. |
| Story Script | .txt | A concatenation list for merging multi-scene animations. |
SVG Animator Advanced Features
- Periodic motion logic using trigonometric functions for realistic physical movements like swaying and flapping.
- Dynamic duration rules that adjust frame counts and FPS based on the complexity of the requested action.
- Multi-scene storytelling support using automated FFmpeg concatenation for continuous narratives.
- Configurable background rendering and lighting effects through SVG gradient manipulation.
SKILL.md
Loading
Related Openclaw Skills
Cartoon Pet Generator
A programmatic image generation tool that creates customizable SVG and PNG cartoon pets using Node.js without requiring external AI APIs.
Local LLM Discovery Guide
A specialized technical guide for identifying, comparing, and validating local Large Language Models based on specific hardware constraints and performance goals.
remind-me
A natural language reminder skill that automates cron job creation and maintains a local markdown-based history log.
Send Me My Files: R2/S3 Upload with Signed URLs
A TypeScript-based MCP skill for uploading files to S3-compatible storage with secure, time-limited download links.
SVG Artist
Generate high-quality vector illustrations and icons directly from text prompts using LLM-driven SVG code generation.
Emergence Codex
A symbolic semantic architecture language designed to enhance AI reasoning and prevent generic LLM output smoothing.
Featured*
