DEV Community

Patricia C.
Patricia C.

Posted on • Updated on

 

SVG Text Animation

Here are a few steps to create an SVG file with a simple text animation.

To start, setup the SVG file on html within the SVG tags.

Style and Animation

On the CSS file, use @keyframes

@keyframes draw {
    from {
        stroke-dashoffset: -563;
    }
    to {
        stroke-dashoffset: 0;
    }
Enter fullscreen mode Exit fullscreen mode

And lastly, in the JavaScript file select the class attribute, then implement the getTotalLength() function.

let path = document.querySelector('path');
let pathLength = path.getTotalLength();
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another “Coder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.