Teach Me

SVG - From Coordinates to Animation

13 lessons taking you from the coordinate system to complex, interactive animations.

Lessons

  1. 1. The Coordinate System
  2. 2. Transforms and Grouping
  3. 3. Basic Shapes and Paths
  4. 4. Styling: Presentation Attributes vs CSS
  5. 5. Gradients, Patterns, and Paint Servers
  6. 6. Clipping and Masking
  7. 7. Filters
  8. 8. Text and TextPath
  9. 9. SMIL Animation Fundamentals
  10. 10. SMIL Advanced
  11. 11. CSS Animation of SVG
  12. 12. JavaScript and SVG
  13. 13. Putting It Together

Reference

Tools

Interactive playgrounds for all 17 SVG filter primitives. Adjust parameters in real time, see instant results, and copy the generated code.