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;
    }

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

let path = document.querySelector('path');
let pathLength = path.getTotalLength();