svg-animations
0This skill guides the creation of SVG animations, perfect for developers looking to create both simple animated icons and complex multi-stage path animations. It helps users leverage the SVG markup language to produce dynamic visuals.
8800Updated 2mo ago
Animation
Quick InstallView Source
$ npx skills add https://github.com/supermemoryai/skills --skill svg-animationsOverview
About This Skill
This skill guides handcrafted SVG animations for developers of all levels. Learn SVG fundamentals including coordinate systems, shape primitives, and the powerful path element with Bézier curves and arcs. Master three animation approaches: CSS-driven animations with stroke-dasharray effects for drawing paths, SMIL animations embedded directly in SVG markup that work in restricted contexts like img tags, and the modern CSS d property for morphing shapes. Create loading spinners, animated illustrations, and icons with gradients, masks, and filters for visual polish.
How to Use
Install the skill using the command provided.
Use Cases
Animate icons for web design
Create visual representations of data
Develop interactive infographics
Design engaging presentations with animations
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/supermemoryai/skills --skill svg-animationsAlternative Install (Git Clone)
git clone https://github.com/supermemoryai/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate an SVG animation for [PURPOSE, e.g., 'a loading spinner for [COMPANY]' or 'a multi-stage path animation showing user onboarding flow']. Use clean, modern SVG code with SMIL or CSS animations. Include comments explaining key elements. Prioritize performance and responsiveness. Here’s the starting point: [SVG_MARKUP or DESCRIPTION OF SHAPES].
Example Output
# SVG Animation for a Loading Spinner
```svg
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Define the spinner's circle and animation -->
<circle cx="50" cy="50" r="20" fill="none" stroke="#3b82f6" stroke-width="4" stroke-dasharray="5, 5">
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="1s"
repeatCount="indefinite"
/>
</circle>
<!-- Optional: Add a center dot -->
<circle cx="50" cy="50" r="4" fill="#3b82f6" />
</svg>
```
### Key Features:
- **SMIL Animation**: Uses `<animateTransform>` for smooth rotation.
- **Performance**: Lightweight with minimal DOM elements.
- **Customizable**: Adjust `stroke-dasharray`, `dur`, or colors to match [COMPANY]'s branding.
- **Responsive**: Works at any size due to `viewBox`.
### How to Use:
1. Copy the SVG code into your HTML file.
2. Replace `#3b82f6` with your brand’s primary color.
3. Adjust `dur="1s"` to control speed (e.g., `dur="0.5s"` for faster spinning).
4. Embed directly or inline in CSS/JS frameworks.
5. For advanced use, add more circles or paths to create multi-stage animations.Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan