Agent skill · design visual · supermemoryai
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.
Why this skill is useful
Provides detailed techniques for creating complex SVG animations that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-05-19. 92 stars on the source repository.
What this skill does
This skill guides creation of handcrafted SVG animations — from simple animated icons to complex multi-stage path animations. SVGs are a markup language for images; every element is a DOM node you can style, animate, and script. 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 <path> 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. Smooth Cubic (S): Reflects the previous control point automatically — perfect for chaining fluid S-curves. Arc (A): rx ry x-rotation large-arc-flag sweep-flag x y large-arc-flag: 0 = small arc, 1 = large arc (>180°) sweep-flag: 0 = counterclockwise, 1 = clockwise Grouping and Transforms Use <g> to group elements for collective transforms, styling, and animation targets. Gradients, Masks, and Filters --- CSS Animations on SVG Many SVG attributes are valid CSS properties: fill, stroke, opacity, transform, stroke-dasharray, stroke-dashoffset, etc. Basic CSS Animation Stroke Drawing Animation (The Classic) The most iconic SVG animation. Uses stroke-dasharray and stroke-dashoffset to make a path appear to draw itself. How it works: 1. Set stroke-dasharray to the path's total length (one giant dash + one giant gap) 2. Set stroke-dashoffset to the same length (shifts the dash off-screen) 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills supermemoryai/svg-animations