InteractiveSVGAnimations

InteractiveSVGSVGSVGAnimations

Login

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

$199$119Get AccessGet notified
Get Access • Get Access • Get Access • Get Access •

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.

  • 00.

    Understanding Path Commands

    05.07.2024

  • 01.

    Path Animations

    05.07.2024

  • 02.

    Gradients, Masks, and Patterns

    12.07.2024

  • 03.

    Mysterious SVG Filters

    19.07.2024

*contents subject to change as I iterate on feedback!

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.

FAQ

  • What do I get by preordering?By preordering, you'll get access to all released and future course content at a discounted price, as well as the opportunity to shape the content through your feedback!
  • Do you support PPP or student discounts?We do! If you're browsing this page from a PPP-eligible country, you should see a banner at the top of the page with your discount code. For student discounts, please email me at nanda.s@hey.com and I'll help get you started!
  • How much experience do I need?No animation experience is required, but we do expect you to be familiar with HTML and CSS syntax at a minimum. Knowing a component-based framework (like React or Vue) would be useful for understanding some of the code examples as well.
  • How is the course structured? Is it video/text/something else?The course is text-based with code examples and interactive exercises. Expect each module to have an in-browser editor for code as well as animations to explain the concepts!
  • Can I ask questions if I get stuck?Yes! The course has an inline commenting system that lets you ask questions and get answers from myself and other students.
  • What if I'm not satisfied with the course?We do 14-day refunds no questions asked! You can email me at nanda.s@hey.com for a refund.
  • What if I have more questions?Happy to answer them! Email me at nanda.s@hey.com or shoot me a DM on Twitter @nandafyi.