A lot of awesome work is being done for Anata behind the scenes. Exciting stuff, but not yet blogable. What we can blog about, is how we made the hand drawing animation for our logo on the homepage. Let’s get to it.
The first step is quite straightforward. Just export your logo to SVG and copy the SVG-code over to your html-document. Clean up all unnecessary clutter and give every path a nice id.
Step 2: Storing the paths inside clip-paths
The next step is to store our paths inside clip-paths for later use. We use clip-paths to make sure that in our next step, the painting animation will be restricted to the bounds of our letters.
We will store the clip-paths in a defs element inside the SVG. Defining our clip-paths inside a defs element promotes understandability of the SVG content and thus promotes accessibility.
Step 3: Create the paths for the animation
Now that we have our clip-paths neatly stored in our SVG, it’s time to draw the path for the animation. We go back to our SVG in Illustrator (or any other editor) and draw a nice path trough our fist letter, in this case the A.
Next remove everything except the path you just drawn.
Then save the file as SVG, but just use the “SVG Code…” button to get the code of the path. You don’t really need to save the file.
If you have done this with Illustrator, the chance is big that you’ll get a polyline instead of a path. No worries though, we can easily convert a polyline to a path just by changing a few things.
First of all, let’s change the name of the element from polyline to path. Next up, we change the points=” attribute to d=”. And for the last step, just place a capital M before the numbers.
Now store your path inside a g element. Add a stroke-width attribute on your g element depending on the width of your graphic. Then define your clip-path on the g element. Point towards the ID of the clippath you stored in your defs corresponding to your current letter.
Add a class to your path. We will use this in the next step to attach some CSS to it. Remove the fill, add a stroke color and define the stroke-miterlimit.
Stroke miterlimit can be unknown for some. The docs state: “The stroke-miterlimit imposes a limit on the ratio of the miter length to the stroke-width. When the limit is exceeded, the join is converted from a miter to a bevel.”
Repeat this step until you have done all the letters. Just place the g elements below the defs closing tag.
Step 4: Add some CSS to the mix
All the animation is done with CSS Animations. We’ll animate the strok-dashoffset of our path from 2600 (just pick a big number) to 0. To enforce the writing effect, we’ll use an animation delay to let the elements wait for each other.
Thats it! Fine-tune your animations until it feels right and enjoy your work!