How to Get Handwriting Animation With Irregular SVG Strokes

Celý článek

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 <path> 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 <mask> 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 <text> 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 <svg> element width and height attributes that are set to size the final design.
2. Use the <title> element. Since we’re working with paths, the words aren’t actually recognized by screen readers. If you need them to be read when in focus, then this will do the trick.
3. There will likely be group elements (<g>) with the IDs based on the layers that were named in the illustration app. In this specific demo, I have two group elements:  #marketing-lab (the outline) and #marketing-masks (the masks). Move the masks into a <defs> element. This will hide it visually, which is what we want.
4. There will likely be paths inside of the masks group. If so, go ahead and remove the transform attribute from them.
5. Wrap each path element in a <mask> and give them a .mask class and an ID that indicates which letter is masked.

For example:

<mask id="mask-marketing-M">
  <path class="mask" id="mask-M" ... />
</mask>

Inside the outline group (which I’ve given an ID of #marketing-lab), apply the mask to the respective character path element by using mask="url(#mask-marketing-M)".

<g id="marketting-lab">
  <path mask="url(#mask-marketing-M)" id="marketting-char-M" d="M427,360, ... " />
</g>

Here’s the code for one character using all the above modifications:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 81" class="marketing-lab">
  <title>Marketing Lab</title>
  <defs>
    <g id="marketing-masks">
      <mask id="mask-marketing-M">
        <path class="mask" id="mask-M"
          d="M375.5, ... ,9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7" />
      </mask>
    </g>
  </defs>
  <g id="marketting-lab">
    <path
      mask="url(#mask-marketing-M)" id="marketting-char-M" 
      d="M427,360.22c-.11.08-.17.14-.17.18H427c0" />
  </g>
</svg>

Finally, we will add CSS for the .mask element that overrides stroke color with white so it is hidden against the document’s background color.

.mask {
  fill: none;
  stroke: #fff;
}

Animation

We’re going to animate the CSS stroke-dasharray property to get the continuous line reveal effect. We can do the animation with either CSS and JavasScript or with Greensock (GSAP). We’ll look at both approaches.

CSS and JavaScript 

It’s fairly straightforward to do this in CSS alone. You can use JavaScript to calculate the path length and then animate it using that returned value. If you do not want to use JavaScript at all, then you can calculate the path length once and hardcode that value into the CSS.

/* Set the stroke-dasharray and stroke-dashoffset */
.mask {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}


/* Animation the stroke-dashoffset to a zero length */
@keyframes strokeOffset {
  to {
    stroke-dashoffset: 0;
  }
}


/* Apply the animation to each mask */
#mask-M {
  animation: strokeOffset 1s linear forwards;
}

JavaScript can help with the counting if you’d prefer to go that route instead:

// Put the masks in an array
const masks = ['M', 'a', 'r', 'k-1', 'k-2', 'e', 't-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']


masks.forEach((mask, index, el) => {
  const id = `#mask-${mask}` // Prepend #mask- to each mask element name
  let path = document.querySelector(id)
  const length = path.getTotalLength() // Calculate the length of a path
  path.style.strokeDasharray = length; // Set the length to stroke-dasharray in the styles
  path.style.strokeDashoffset = length; // Set the length to stroke-dashoffset in the styles
})

GSAP

GSAP has a drawSVG plugin which allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse>. Under the hood, it’s using the CSS stroke-dashoffset and stroke-dasharray properties. 

Here’s how it works:

1. Include GSAP and drawSVG scripts in the code.
2. Hide the graphic initially by using autoAlpha.
3. Create a timeline.
4. Set autoAlpha to true for the graphic.
5. Add all the character path masks IDs to the timeline in proper sequence.
6. Use drawSVG to animate all characters.

References

1. Animated Drawing Line in SVG by Jake Archibald
2. Creating My Logo Animation by Cassie Evans

The post How to Get Handwriting Animation With Irregular SVG Strokes appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.