Webmasters Gallery

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing with typical path animation techniques. But I found an innovative application of SVG masking to achieve this affect in matter of minutes.

While researching how to do this, I gathered information from multiple sources. I combined them together and was able to create the final effect.

Let’s make this together!

SVG masking

If the stroke width of all the letters in a word or sentence are even throughout, then Craig Roblewsky has a nice way to animate handwriting. This is a clever technique that animates the SVG stroke-dasharray and stroke-offset attributes.

Calligraphy fonts like we want to animate here have uneven stroke width throughout the letters, hence it will need to be a and animating it in that way will not work. The trick will be to use SVG masking.

Let’s start by figuring out what font we want to use. The one I’ll be using throughout this article is HaveHeartOne, which has a nice brush stroke appearance that is perfect for handwriting.

The idea is to create a out of same sentence we want to animate, then place it on top of the sentence. In other words, there will be two layers of same sentence. Since the mask sits on top, we’ll make it white so it will hide the original sentence below it. We will animate the mask so the bottom layer is revealed as the animation runs.

Making the layers

The foundation of this trick is that we’re actually going to create two separate layers, one on top of the other:

1. The bottom layer is the words with the desired font (in my case it is HaveHeartOne).
2. The top layer is a handcrafted path approximating the words.

Creating the handcrafted path isn’t as hard as you might think. We need a continuous path to animate and reveal the sentence. That means no for this. But, many illustrates apps — including Illustrator — can convert letters to paths:

1. Select the words.
2. Open the “Properties” panel and click Create outline.

And, like magic, the letters become outlines with vector points that follow the shape.

At this point it is very important to give meaningful names to these paths, which are stored as layers. When we expect this to SVG, the app will generate code and it uses those layer names as the IDs and classes.

Notice how individual letters have a fill but no stroke:

In SVG, we can animate the stroke in the way we want to, so we’re going to need to create that as our second main layer, the mask. We can use the pen tool to trace the letters.

1. Select the pen tool.
2. Set the Fill option to “None.”
3. The stroke width will depend on the font you’re using. I’m setting the Stroke Width option to 5px and setting its color to black.
4. Start drawing!

My pen tool skills aren’t great, but that’s OK. What’s important isn’t perfection, but that the mask covers the layer below it.

Create a mask for each letters and remember to use good names for the layers. And definitely reuse masks where there are more than one of the same letter — there’s no need to re-draw the same “A” character over and over.

Exporting

Next up, we need to export the SVG file. That will likely depend on the application you are using. In Illustrator, you can do that with File ? Export ? Export as ? SVG

SVG options popup will open, below is the preferred setting to export for this example.

Now, not all apps will export SVG the same exact way. Some do an excellent job at generating slim, efficient code. Others, not so much. Either way, it’s a good idea to crack open the file in a code editor

When we’re working with SVG, there are a few tips to consider to help make them as light as possible for the sake of performance:

1. The fewer points, the lighter the file.
2. Using a smaller viewBox can help.
3. There are plenty of tools to optimize SVG even further.

Manually editing the SVG code

Now, not all apps will export SVG the same exact way. Some do an excellent job at generating slim, efficient code. Others, not so much. Either way, it’s a good idea to crack open the file in a code editor and make a few changes.

Some things worth doing:

1. Give the element width and height attributes that are set to size the final design.
2. Use the