svg-animations

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.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 200x200 unit canvas, scales to any size -->
</svg>

Shape Primitives