InteractiveSVGAnimations

InteractiveSVGSVGSVGAnimations

A text-based mini-course on making whimsical, playful SVG animations by Nanda Syahrasyad.

$199$119PreorderGet notified
Preorder • Preorder • Preorder • Preorder • Preorder •

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.

1 - Path Commands

While SVG's shape primitives are useful, they can only get us so far.

In this module, we'll take a look at the powerful yet mystical path element, how it works, and how you can use them to draw some previously-impossible shapes.

2A - Gradients, Masks, and Filters

Some of the most interesting SVG interactions involve clipping or morphing certain elements. In this module, we'll take a look at gradients, masks, and filters - the techniques that allow us to make exactly these animations.

2B - Animating Paths

Whether it be drawing a path, moving along a path or morphing a path from one shape to another, path animations make up a large part of SVG animations. In this module, we'll take a look at a few different ways to animate SVG paths.

Get NotifiedGet Notified

Interactive SVG Animations will launch in full in 2024.

If you'd like to be notified on news and updates, you can sign up for the waitlist using your email below!

No spam. Unsubscribe anytime.