How To Create A Handwriting Effect - Basics
Duration: 13:46
Learn how to animate a handwriting effect in SVGator.
Step 1 - Prepare Your SVG Paths
Start your SVGator project with your “Friyay” text already created using the Pen Tool. These should be individual paths, some connected and some not. For visibility, change the color of the paths to a near-black purple. Group the layers, duplicate the group, and rename the new group to something like Blue. Open the Blue group, select all its layers, and change their stroke color to blue by sampling from the badge in the top left corner.
Step 2 - Organize Your Layers
Inside the Blue group, name each stroke layer based on the animation order you want. Label the loop of the F as 1, the crossbar as 2, and continue this for the remaining letters. Move the dot of the I to the top of the stack if it animates later and give it a name like Dot or 4. Organizing the layers in a sequential order will help keep your workflow smooth as you begin animating each stroke.
Step 3 - Animate The First Stroke With Offset
Select the first stroke and move three steps forward on the timeline. Activate Stroke Offset. Jump to the one-second mark and add another keyframe. In the stroke properties, copy the Length value to both the Offset and Dashes fields using the Copy To option. This hides the stroke initially. To change the direction of the stroke animation, add a minus sign to the Offset value. When you hit play, the stroke will animate from the correct starting point.
Step 4 - Animate Strokes In Order
Move forward about three frames in the timeline and select the second path. Repeat the Stroke Offset process, copying the Length to Offset and Dashes, and setting the end Offset to zero. Since this stroke is shorter, make sure the timing feels consistent with the previous stroke. Proceed to the next stroke and animate it using the same method. Adjust keyframes so each stroke begins shortly after the previous one ends.
Step 5: Adjust Direction And Add Easing
If a stroke animates from the wrong side, go to the starting Offset keyframe and insert a minus sign. You can add easing for a more interesting motion. For example, apply an Ease In Out to the smile-shaped stroke. Watch it play back and make sure the animation flows as intended. If the speed or direction feels off, tweak the keyframe spacing and Offset values until everything lines up correctly.
Step 6: Duplicate Color Layers And Apply Hue Filters
Duplicate the Blue group and rename the new one Pink. Instead of recoloring each stroke manually, apply a Hue filter to the entire Pink group and adjust it until the strokes appear pink. Then select all the keyframes within the Pink group and shift them two frames forward in the timeline. Repeat this process again, naming the new group White. For the White group, manually change each stroke to white instead of using a filter and move those keyframes forward another two frames.
Step 7: Refine The Timing And Layer Interaction
Play back the animation and evaluate the timing. If the trailing strokes feel too slow or too fast, adjust their keyframes accordingly. You might move the White layer’s keyframes earlier to help it close faster. You can also shorten or lengthen individual stroke animations to create more natural motion.
This technique can be extended to other illustrations, allowing you to replicate the process.
Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!
Tutorials to help you out:
