Image for post
Image for post

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.

Image for post
Image for post

Step 2:

Create outline of your text.

Image for post
Image for post

Step 3:

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

Image for post
Image for post

Step 4:

Remove the group layer and rename the layer accordingly.

Image for post
Image for post

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.

Image for post
Image for post

Step 6:

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

Image for post
Image for post

Step 7:

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

Image for post
Image for post

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:

Image for post
Image for post
Image for post
Image for post
clipPath of the letter h created above
Image for post
Image for post
animation path of letter h

Step 10:

It is time to animate the SVG path.

.animate{
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

Ta-Da hit refresh and see the magic.

Image for post
Image for post

Written by

Full-Stack Web Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store