InteractiveSVGAnimations

InteractiveSVGSVGSVGAnimations

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

Get notified
Get notified • Get notified • Get notified • Get notified •

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

Modules will be released as soon as they are ready, with the course launching in full later this year.

If you'd like to be notified when modules are complete and the course is ready for purchase, sign up now! Enter your email below.

No spam. Unsubscribe anytime.