Hand Writing Effect through CSS3 and Adobe Illustrator

This effect can be created with any font and you can write any text you want.

Open Illustrator and write a text.

Create outline of your text.

Set the fill to none and give it a slight stroke.

Remove the group layer and rename the layer accordingly.

Draw path inside each word according to the way you want to animate, with the help of pen tool.Remember to start and end little outside the letter.

Rename the path created (as h-path) and move its layer just below its corresponding letter.

Select both the letter and path, then create a clipping mask and rename it (h-grp)

Now, increase the stroke size of the path till it completely fills the mask.

Do this for all the letters i.e draw path and make their clipping mask.Not to make this repetitive i will do it for the letter h only and proceed further.

Now, you have done all the letters and made their clipping mask.All you have to do next, is to create SVG and animate it over the path created.

Go to file>Export>Export As>(svg). Hit OK

You have to choose the above options shown in the photo.

Now press the show code button and copy the code.

A clip path and corresponding path will be created for every letter. We have to animate the path.

It is time to animate the SVG path.

You can learn more about SVG animation here.

First, we have to increase stroke-dashoffset to a value and animate it to zero.

Now, add a class {class = "animate"}to your path which is to be animated in your code editor. Now we can write the following code for the above talked animation.

Ta-Da hit refresh and see the magic.