Path drawing: Step-by-step tutorial
Matt Perry
In this tutorial, we're going to build the Path drawing example step-by-step.
This example is rated 2/5 difficulty, which means we'll spend some time explaining the Motion APIs we've chosen to use, but it assumes familiarity with JavaScript as a language.
Here's a live demo of the example we're going to be creating:
Introduction
The Path Drawing example shows how to create a drawing animation effect using SVGs and Motion for React.
In this tutorial, we'll use the variants and motion component from Motion for React to create a staggered animation effect across multiple SVG elements.
Get started
Let's start by setting up our SVG container and shapes without animation:
This creates a basic SVG with circle, cross and square shapes.
Let's animate!
Now let's bring our SVG to life by adding animations.
Import from Motion
First, import the motion component from Motion for React:
Creating the animation variants
Next, we'll define how our paths should animate. We'll create variants that control the pathLength property, which determines how much of the path is drawn (0 = none, 1 = all):
Let's break down what's happening:
The
hiddenstate setspathLength: 0(nothing drawn) andopacity: 0(invisible).The
visiblestate is a function that accepts a custom index parameter (i). We'll pass this in to eachmotion.pathvia itscustomprop.The delay is calculated based on this index, creating a staggered effect.
Applying the animation
Now, let's convert our SVG elements to motion components and apply our animation:
You can see each path gets its own index, which we use to calculate a staggered delay. The container switches the variant for all its children from "hidden" to "visible".
Conclusion
In this tutorial, we learned how to:
Animate SVG paths using the
pathLengthpropertyCreate staggered animations using
variantsand thecustompropCoordinate multiple animations to create a complex drawing effect
The pathLength property is especially powerful for SVG animations, as it gives the appearance of drawing each shape stroke by stroke. Combined with Motion's animation capabilities, it creates visually appealing drawing effects that would be difficult to achieve with CSS alone.
This technique works with any SVG element that has a stroke, including circles, lines, rectangles, and complex paths. Try experimenting with different timing values, transition types, and SVG shapes to create your own unique drawing animations!
