svg-animations
Create beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any animated SVG content. Covers SMIL animations, CSS-driven SVG animation, path drawing effects, shape morphing, motion paths, gradients, masks, and filters.
Install
With your agent
Install OMGSkills skill "supermemoryai/skills:svg-animations" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/supermemoryai/skills /tmp/skills && ln -s /tmp/skills/svg-animations ~/.claude/skills/svg-animationsFrom README
SVG Fundamentals Coordinate System SVGs use a coordinate system defined by viewBox="minX minY width height". The viewBox is your canvas — all coordinates are relative to it, making SVGs resolution-independent. Shape Primitives The Element — The Power Tool The d attribute defines a path using commands. Uppercase = absolute, lowercase = relative. | Command | Purpose | Syntax | |---------|---------|--------| | M/m | Move to | M x y | | L/l | Line to | L x y | | H/h | Horizontal line | H x | | V/v | Vertical line | V y | | C/c | Cubic bézier | C x1 y1, x2 y2, x y | | S/s | Smooth cubic bézier | S x2 y2, x y | | Q/q | Quadratic bézier | Q x1 y1, x y | | T/t | Smooth quadratic | T x y | | A/a | Elliptical arc | A rx ry rotation large-arc sweep x y | | Z/z | Close path | Z | Cubic Bézier (C): Two control points define the curve. The first control point sets the departure angle, the second sets the arrival angle.