How to Create a Hand-Drawn Text Animation Effect Using SVG\'s Dash Animation?

How to Animate Handwriting Text on the Web Page Using SVG?

Problem Statement:

You're attempting to animate a text that you have saved as an SVG, but you've only been able to animate the stroke, which is not the desired effect. You would like to implement animation similar to the given examples, which create a hand-drawn look. Here's what you have so far:

Code Sample:

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Answer:

The animation you're trying to achieve uses the standard dash animation technique but clips the animated stroke with an outline that resembles the hand-drawn style.

The Dash Animation Technique:

A standard line, such as:

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"></path>

is animated by controlling the values of stroke-dasharray and stroke-dashoffset in a keyframes animation.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

In this example, the stroke-dasharray property defines the length of the dashes and gaps along the path, and stroke-dashoffset defines the offset of the dashes within the path. As the animation progresses from 0% to 100%, the stroke-dashoffset value decreases, causing the dashes to appear gradually along the path.

Creating the Hand-Drawn Look:

To clip the animated stroke with an outline, an additional SVG path is used with a stroke that matches the width and color of the animated stroke. This outline path should cover the entire area that the animated stroke will occupy. By defining the stroke-linejoin property of the outline to miter, a sharp cornered style is created, giving the impression of a hand-drawn line.