
SVG Line Animation with vivus.js
Today, I would like to share with you on how to create SVG Line Animation with vivus.js.
I was highly inspired by Ryan Yu’ CodePen. Thank you so much.
Table of content
- Export font as SVG from Sketch
- Optimise SVG
- Copy SVG code
- Edit HTML with accessibility in mind
- Write JavaScript with vivus.js
- Add second SVG plus aria-hidden in HTML for accessibility
- Add callback function for animation
- Move second SVG with translate3d()
- Let’s position two SVG objects.
Let’s get started 🔮.
1. Export font as SVG from Sketch

Here is a thank you page I designed for FrontEnd30 website with Sketch.❤️

As you can see from the image above, we need to export two SVG objects.

- Select the object.
- Change the export type to SVG.
- Click the Export button.
2. Optimise SVG
Most likely you will find an issue 👀 with SVG drawing when you directly use the raw SVG exported from Sketch, which you wouldn’t expect to see 😱:

🔎 The problem

As you can see from the above code in the Chrome DevTool, there are several <polygon> elements in the SVG. However, to create the drawing animation, they need to be <path> instead.
🔮 The solution
How could we change it from <polygon> to <path>?
There is a very simply way, Ryan Yu taught me how to do.
① Go to SVG OMG website and drop your SVG asset.
② Make sure Do not tick merge paths ← 💥💥💥important💥💥💥

Check a new SVG code downloaded from SVG OMG in the DevTool.

As you can see, all <polygon> elements have changed to <path> elements. 🎉🎉
SVG OMG also optimise the SVG code for us.
A big shout out to SVG OMG again.❤️❤️❤️
3. Copy SVG code

Copy outlerHTML like above from DevTool.
4. Edit HTML with accessibility in mind

- Paste the code in CodePen (or any text editor you prefer).
① Delete <style>element so we can apply our own styles.
style=" ② For accessibility, add <title> inside <svg>.
<title> element allows screen readers to read out what the SVG is about; in our case, it’s Thank you.
<svg>
<title>Thank you</title>
</svg>5. Write JavaScript with vivus.js
Go to JavaScript setting in the CodePen.
Add vivus.js script.


👀 As you can see from the documentation, add an id to <svg> so Vivus class will detect the <path> inside <svg>.
HTML
Add #id in html.
<svg id="c-text-line">
...
</svg>JavaScript
Add below code in JavaScript.

new Vivus('c-text-line', {
duration: 200,
animTimingFuction: Vivus.EASE,
});
If you got the same animation like the above image, you are almost done!!!🎉🎉
6. Add second SVG plus aria-hidden in HTML for accessibility
Just do the same steps from 1 to 3 as we did above.
<div>
<svg>c-text-line</svg>
<svg>c-text-fill</svg>
</div>Second SVG shouldn’t be read out by the screen readers because it contains same context as the first SVG.
So, We don’t need to add <title> this time but add arial-hidden to <svg>.
<svg class="c-text-fill" aria-hidden="true">
...
</svg>
7. Add callback function for animation

Add JS
const textFill = document.querySelector('.c-text-fill');const showTextFill = () => {
textFill.classList.add('is-active');
};new Vivus('c-text-line', {
duration: 70,
animTimingFuction: Vivus.EASE,
}, showTextFill);
And add SCSS
.c-text-fill {
opacity: 0;
transition: opacity 0.5s ease;&.is-active {
opacity: 1;
}
}

8. Move second SVG with translate3d()
Add SCSS
.c-text-fill {
transition: opacity 0.5s ease, transform 0.5s ease 1s; &.is-active {
transform: translate3d(-10px, 10px, 0);
}
}

Tip) when you animate elements, use tranlate() instead of top/left property.
Check out those two articles for more details.
- Should I do the animation with Left or TranslateX? by Ryan Yu
- Why Moving Elements With Translate() Is Better Than Pos:abs Top/left. by Paul Irish
9. Let’s position two SVG objects.
Add HTML
<div class="c-text-group">
<svg>c-text-line</svg>
<svg>c-text-fill</svg>
</div>Add SCSS
.c-text-group {
position: relative:
}.c-text-fill {
position: absolute;
top: 0;
}
Let’s see how it works.

It’s almost done but could you find something wrong?👀
If you found what is wrong, you must be a good frontend developer or good designer. The answer is below.


As you can see, there is a 2px gap between those two SVG elements because there are 2px borders (stroke) in the first SVG (.c-text-line).
So the second SVG(.c-text-fill) should move to right and down to 1px.
.c-text-fill {
left: 1px;
top: 1px;
}
Congratulation!! We’ve done!!! 🎉🎉🎉🎉

