How To Create A Handwriting Effect - Advanced

Learn how to animate a handwriting effect in SVGator.

Step 1 - Draw Accent Strokes

With your main “Friyay” handwriting animation done, start by adding accent strokes. Use the Pen Tool to draw white paths where you want extra motion. Think about how each letter animates. For example, if the “F” loops down and up, draw an accent that follows or enhances that same direction. 

Step 2 - Start Dash Animation

Select all your accent paths. Zoom in on your timeline. At frame zero, nothing is visible yet because the stroke dash is set to zero. Move slightly forward in the timeline. Pick one path and set a dash value, like 10. This reveals a small part of the stroke. You can use larger numbers, like 50, for longer strokes, but start with 5 to keep it subtle.

Step 3 - Add Keyframes

Scrub forward a bit. Select the dash value and delete it. This creates a second keyframe. Now your stroke will animate as if it is being drawn. 

Step 4 - Repeat For All Strokes

Repeat the same steps for each accent path. Set an initial dash, scrub forward, delete the dash value to finish the animation. 

Step 5 - Align With Main Animation

Zoom out on the timeline. Play your animation and look for when the white stroke of each letter appears. Move the keyframes of your accent strokes to line up with those moments. You can change timing by moving the keyframes closer together (for faster animation) or farther apart (for slower animation). Adjust until everything feels smooth and in sync.

Step 6 - Final Adjustments

Fine-tune your stroke timing. Zoom in if needed and tweak the position of keyframes to improve flow. Watch the full animation and make any last edits to get the timing just right.

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:

Fake 3D Rotation - How to Create & Animate an SVG Mask | SVGator Tutorial

Learn how to create and animate SVG masks in SVGator to make 2D art appear 3D. This tutorial covers setting up clipping paths, containing graphics inside any shape, and animating both masks and their contents for a seamless depth illusion.

SVGator

How To Animate A Toggle Switch | SVGator Tutorial

Learn how to animate a toggle switch using SVGator! This tutorial will help you out, watch the video and follow the required steps.

SVGator