[SvgAnimations.how]-Interactive SVG Animations

Extra Resources: Note: .mht files are web files open them in chrome browser
and please use winrar to extract from zip

0 - SVG Foundations

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
05.04.2024
01.Shapes in Depth
05.04.2024
02.How Shapes are Made
05.04.2024
03.The SVG Coordinate System
05.04.2024

1 - Your First Animation

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
05.04.2024
01.Understanding Transforms
05.04.2024
02.Sequencing Animations
05.04.2024
03.Inside Timing Functions
05.04.2024

2 - Morphing Animations

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 making shapes that morph, animating values that we couldn't animate with CSS alone.

00.Mighty Morphin Mental Model
10.05.2024
01.Using the Platform with SMIL
10.05.2024
02.JavaScript-Based Animations
24.05.2024
03.Inside Animation Performance
24.05.2024

3 - Paths and SVG Details

Paths and path animations make up a huge part of SVG animations; in this module, we'll take a look at a few different ways to animate SVG paths, as well as a few other nifty SVG details that don't quite fit anywhere else.