
A good friend of mine, [Tommy](https://github.com/ItsTommyGun), recently built
this cool **SVG drawing animation**. I was curious how he did it because I'd
never done something like this before, and he was kind enough to explain it to
me.

First and foremost, you need an SVG with a stroke because strokes can be dashed.
Here's the SVG we are going to animate like it's being drawn:

<svg
  width="165"
  height="47"
  xmlns="http://www.w3.org/2000/svg"
>
  <g>
    <path
      stroke="#000"
      strokeWidth="2"
      d="m70.1895,4.65437c0,0 -2.48485,-0.39525 -6.58888,-0.67265c-4.99273,-0.33748 -8.23605,-0.67265 -10.70688,-0.67265c-4.11805,0 -8.18497,0.33517 -13.17771,0.67265c-2.46241,0.16644 -4.9458,-0.09537 -6.58885,0c-5.80915,0.33716 -8.2581,0.5181 -9.05968,0.67265c-3.58476,0.69114 -7.48447,2.55199 -11.53051,4.03588c-1.68001,0.61615 -2.62402,1.13847 -4.11802,2.01792c-1.88981,1.11244 -3.19367,3.40762 -4.11804,4.7085c-1.49051,2.09762 -2.05363,3.95418 -2.47082,6.0538c-0.39578,1.99189 0,4.03588 0,5.38117c0,0.67263 -0.47734,2.07563 0,3.36321c0.86053,2.3212 1.81754,3.2372 3.29443,4.7085c1.88267,1.87555 2.62402,3.15642 4.11804,4.03588c1.88978,1.11242 3.24017,2.78763 4.94163,3.36321c2.40622,0.814 6.48882,2.34985 9.05968,2.69058c1.62596,0.21549 6.596,0.23456 12.3541,0c8.26688,-0.33674 18.11936,-0.67265 25.53182,-0.67265c1.64722,0 2.47081,0.67265 9.05968,0.67265c13.17771,0 23.06097,0 28.82624,0c6.58885,0 14.83752,0.37197 23.061,0c7.44667,-0.33683 9.8939,-1.23755 10.70688,-1.34529c5.14167,-0.68144 10.79607,-1.92737 15.64853,-2.69058c4.35523,-0.68501 7.66779,-2.24494 9.88329,-3.36321c0.9908,-0.50011 1.5026,-0.73851 2.47081,-2.01794c0.43299,-0.57218 0.37788,-1.13908 0.82361,-2.01794c0.31518,-0.62143 0,-1.34527 0,-3.36321c0,-2.01794 -0.94246,-3.31891 -1.64722,-4.7085c-0.99668,-1.96517 -2.62752,-3.95618 -4.11802,-6.0538c-1.84875,-2.60179 -4.48905,-5.68417 -6.58885,-7.39909c-2.0998,-1.71492 -3.92127,-2.97033 -6.58885,-4.03586c-2.33965,-0.93454 -8.25684,-2.61075 -12.35412,-3.36323c-3.31308,-0.60845 -6.62075,-0.34941 -9.05966,-0.67265c-2.57086,-0.34073 -7.4325,-0.34125 -11.53051,-0.67265c-4.17915,-0.33796 -7.9421,1.13881 -12.8042,0.15254c-2.52765,-0.51275 -9.14435,0.40914 -14.06916,0.07626c-4.99273,-0.33748 -5.51904,-0.97084 -6.34265,-0.97084c-1.64722,0 -7.14913,-0.74891 -7.97274,-0.74891l-3.7274,0l-3.84628,0.45071"
      fill="none"
    />
  </g>
</svg>

And here's the HTML of it:

```html
<svg
  width="165"
  height="47"
  xmlns="http://www.w3.org/2000/svg"
>
  <g>
    <path
      stroke="#000"
      strokeWidth="2"
      d="m70.1895,4.65437c0,0 -2.48485,-0.39525 -6.58888,-0.67265c-4.99273,-0.33748 -8.23605,-0.67265 -10.70688,-0.67265c-4.11805,0 -8.18497,0.33517 -13.17771,0.67265c-2.46241,0.16644 -4.9458,-0.09537 -6.58885,0c-5.80915,0.33716 -8.2581,0.5181 -9.05968,0.67265c-3.58476,0.69114 -7.48447,2.55199 -11.53051,4.03588c-1.68001,0.61615 -2.62402,1.13847 -4.11802,2.01792c-1.88981,1.11244 -3.19367,3.40762 -4.11804,4.7085c-1.49051,2.09762 -2.05363,3.95418 -2.47082,6.0538c-0.39578,1.99189 0,4.03588 0,5.38117c0,0.67263 -0.47734,2.07563 0,3.36321c0.86053,2.3212 1.81754,3.2372 3.29443,4.7085c1.88267,1.87555 2.62402,3.15642 4.11804,4.03588c1.88978,1.11242 3.24017,2.78763 4.94163,3.36321c2.40622,0.814 6.48882,2.34985 9.05968,2.69058c1.62596,0.21549 6.596,0.23456 12.3541,0c8.26688,-0.33674 18.11936,-0.67265 25.53182,-0.67265c1.64722,0 2.47081,0.67265 9.05968,0.67265c13.17771,0 23.06097,0 28.82624,0c6.58885,0 14.83752,0.37197 23.061,0c7.44667,-0.33683 9.8939,-1.23755 10.70688,-1.34529c5.14167,-0.68144 10.79607,-1.92737 15.64853,-2.69058c4.35523,-0.68501 7.66779,-2.24494 9.88329,-3.36321c0.9908,-0.50011 1.5026,-0.73851 2.47081,-2.01794c0.43299,-0.57218 0.37788,-1.13908 0.82361,-2.01794c0.31518,-0.62143 0,-1.34527 0,-3.36321c0,-2.01794 -0.94246,-3.31891 -1.64722,-4.7085c-0.99668,-1.96517 -2.62752,-3.95618 -4.11802,-6.0538c-1.84875,-2.60179 -4.48905,-5.68417 -6.58885,-7.39909c-2.0998,-1.71492 -3.92127,-2.97033 -6.58885,-4.03586c-2.33965,-0.93454 -8.25684,-2.61075 -12.35412,-3.36323c-3.31308,-0.60845 -6.62075,-0.34941 -9.05966,-0.67265c-2.57086,-0.34073 -7.4325,-0.34125 -11.53051,-0.67265c-4.17915,-0.33796 -7.9421,1.13881 -12.8042,0.15254c-2.52765,-0.51275 -9.14435,0.40914 -14.06916,0.07626c-4.99273,-0.33748 -5.51904,-0.97084 -6.34265,-0.97084c-1.64722,0 -7.14913,-0.74891 -7.97274,-0.74891l-3.7274,0l-3.84628,0.45071"
      fill="none"
    />
  </g>
</svg>
```

The key to the animation are the
[stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
and
[stroke-dashoffset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset)
properties.

The `stroke-dasharray` property defines the **length** of the dashes, and the
`stroke-dashoffset` property defines the **offset** of the dashes.

```css
svg {
  stroke-dasharray: 372;
  stroke-dashoffset: 372;
  animation: draw 0.5s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
```

The `stroke-dasharray` property is set to 372, which means that the dashes are
372px long.

The `stroke-dashoffset` property is also set to 372, which means that the dashes
are offset by 372px, so the dashes are **not visible** at all.

The animation is set to 0.5 seconds, and the `stroke-dashoffset` property is
animated to 0, which makes the dashes **appear one after another**.

That's how we make our SVG look like it's being drawn!

The `stroke-dasharray` property can be set to any value. The higher the value,
the longer the dashes will be. The same goes for the `stroke-dashoffset`
property. The higher the value, the longer the dashes will be offset.

We set it to exactly the length of the path so that the dashes are the same as
the path, and there are no gaps.

Here's great article by CSS-Tricks that explains this technique in more detail:
[How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/).

And here is the result:

<CodePen
  id="PodJEge"
  title="SVG Drawing Animation"
/>

The only drawback is that you need to know the length of the path. That's it, a
simple SVG animation without any JavaScript at all!


Today I learned how to animate SVG drawings using CSS.