Create Animate SVG Signature with CSS
Hello readers!
In this blog, we’ll discuss how to create animate SVG Signature with CSS. Our final result will look like following-
Prerequisites -
- Knowledge of — HTML and CSS.
- Abode Illustrator or figma software should be installed on your PC.
So, now we are ready to initiate our project. Let’s dive in.
Step 1 — First of all let’s create SVG Signature. I am using Illustrator to make SVG path by letters.
- Write down the signature on piece of paper and click a photo of it.
2. Open Illustrator. Import the image in Illustrator — File>Open or you can directly paste the image into illustrator.
3. Use the pen tool and use your image as a guide to create the path for your signature.
4. After creating the path you can delete or hide the image.
5. Now add stroke width to all paths you have. Here I have two paths — one path represents “ss”and other path represents underline.
6. Group all the paths in single selection and export it as SVG.
Step 2 — Now it’s time to add animation to SVG using CSS. For this copy and paste SVG code inside HTML code. Add a unique class to every path. I have two paths, so I have two different classes — signature-base and signature-underline.
The index.html file will contain the following code-
Now let’s write the CSS file. For adding animations I have used two dash properties:
stroke-dasharray: this property is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.
stroke-dashoffset: this property defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin.
1. First we’ll animate the base. Add stroke-dasharray property to the signature__base class, experiment and figure out a value for property stroke-dasharray such that the entire word is written in a single dash with no space in between. I tired different values like 1000, 1500, 2000,2500. Finally figured that 2500 was good enough for me.
2. Now, add an animation to it which makes the stroke-dashoffset go from 2500 (this should be equal to the stroke-dasharray value) to 0.
3. Add the same animation to all your paths class.
4. Now, we have to sync the animations such that the dash is drawn after the base word is drawn.
5. To achieve that, I set the animation for my base word to finish by 80% of the time i.e. it is drawn from 0% of 5s to 80% of 5s.
6. Next, set the animation of the second path, the underline path to start after 80% of 5s and finish by 100% of 5s.
The signature.css file will contain the following code-
And voila, We have created an animated SVG signature.
