Hand Writing Effect through CSS3 and Adobe Illustrator

You can put this effect on your HTML pages. It does not limits to text but can be any svg image or an icon.

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

Step 1:

Open Illustrator and write a text.

Step 2:

Create outline of your text.

Step 3:

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

Step 4:

Remove the group layer and rename the layer accordingly.

Step 5:

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.

Step 6:

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)

Step 7:

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

Step 8:

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.

Step 9:

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.