A text-based mini-course on making whimsical, playful SVG animations by Nanda Syahrasyad.
How do SVGs work and how do you draw things with it?
In this introductory module, we'll get comfortable drawing SVGs using code, going over concepts like the coordinate system and the different shape primitives available to us.
00.
An Introduction to SVGs
01.
Shapes in Depth
02.
How Shapes are Made
03.
The SVG Coordinate System
Once you've coded up your SVG, how do you animate it?
In this module, we'll take a look at how SVGs play with CSS, diving deep into the different ways to animate with CSS such as transforms, transitions, and timing functions.
00.
A Trash Can Animation
01.
Understanding Transforms
02.
Sequencing Animations
03.
Inside Timing Functions
The real power of SVGs come in its ability to take any shape—not just circles and rectangles. In this module, we'll take a look at SMIL—the animation tool that lets you animate everything CSS can't.
00.
The Problem with CSS
01.
A Deep Dive Into SMIL
02.
Orchestrating SMIL
03.
SMIL and React
Paths and path animations make up a huge part of SVG animations; in this module, we'll take a look at the mysterious path element and ways to animate them.
00.
The Elusive Path Element
01.
Animating Paths
02.
Animating Along Paths
03.
Morph Animations
SVGs start to really shine when you dive into its weirder features. In this module, we'll take a look at gradients, masks, and the downright magical world of SVG filters, before looking at ways to animate SVGs when SMIL falls short.
00.
Gradients and Masks
01.
SVG Filters
02.
Animating With JavaScript
03.
Animation Performance
Interactive SVG Animations will launch in full on December 27th, 2024.
If you'd like to be notified on news and updates, you can sign up for the waitlist using your email below!