SVG “Drawing/Writing animation.”

Recently I’ve been searching on the internet how to use SVG animation, or how to imitate the “drawing effect” without using Javascript. I found out that there is a lot of information about SVG, and most of it only helped me to know how to do it with CSS, so i wanted to share what i learned and how to do the famous “drawing effect” using SMIL or inline SVG.

First things first, there are 3 ways you can animate SVG, you can do it with CSS, SMIL (inline SVG), or Javascript. I will focus on animating it with SMIL, i think this is the best way to animate it since it gives you total freedom to manipulate each path, you can even delay the animation to wait for the page to load first, or you can tell one path to start after another one finishes.

Creating SVG

The first thing you need to do is create the SVG, you can use any program you feel comfortable with, I use Illustrator, for instance, you can draw anything you like, remember that it has to be in vectors and it has to be a single path with no fill, when you’re done you can set the color to no color or just leave it like that and in the HTML change the fill color to none, once you finish save it as SVG, or if you want just go ahead and copy the example I will put below ☺.

Animating svg

Once you already have the svg all you need to do is open it in any text editor, such as Sublime Text, and it will display the svg code.

Now we can start animating it, check out the example I’ll let below, basically what we’ll do is work with the stroke-dasharray and stroke-dashoffset, I will explain what each property do and how it does it.

The stroke-dasharray property is used to create dashed lines, so what you need to do is set the stroke-dasharray to a value that makes each dashed line looks like it is the whole line.

The stroke-dashoffset property specifies the distance into the dash pattern to start the dash, you need to set this value to the same value you set the stroke-dasharray.

First you have to give each path the style you want to and create an <animate> tag for each path you want to have the animation.

It should look like this:

<path style= fill=”none” stroke=”white” stroke-width=”5" stroke-dasharray=”1000px” stroke-dashoffset=”1000px” stroke-linejoin=”round” stroke-linecap=”round” d=”M56.78,21.883C57.932,46.8,59.66,74.312,53.325,98.71c-2.303,9.864–17.853,39.452–31.675,21.803 c-11.519–14.536,4.607–31.667,20.732–33.224c23.037–3.115,47.225,3.634,69.686–5.191"> <animate begin=”2s” attributeName=”stroke-dashoffset” from=”1000px” to=”0px” dur=”2s” fill=”freeze” id=”first”/> </path>

In the style set the fill to none, and give a stroke color and width for the svg, here’s where you set the stroke-dasharray and stroke-dashoffset.

Begin is the time it will wait after the page loads for the animation to start, attributeName is the attribute you’ll be animating, in this case the dashoffset, dur is how much you want the animation to last.

Like you already saw, playing around with this properties can create the “drawing/writing effect”, the only thing you need to do is set the stroke-dasharray to a value that creates the effect of each dashed line being the only line and the stroke-dashoffset to the exact same value, and then in the <animate> tag you set the dashoffset from the value you just gave it to 0 for it to create that effect.

I find this to be the easiest way for me to imitate the drawing effect, i hope you find it that way too.

The key is setting one path to start after another one, all you have to do is give an id to each path and set it to begin after another one like this: begin=”first.begin + 1s”.