JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="80" viewBox="0 0 100% 80">
    <text x="0" y="75">Test text</text>
</svg>

SCSS

svg {
    text {
        font-family: Segoe UI;
        font-weight: 100;
        font-size: 75pt;
        fill: #000;
        stroke: #000;
        stroke-width: 1pt;
        stroke-dasharray: 10;
        stroke-dashoffset: 100;
        animation: draw 4s linear infinite;
		
		x: 50;

		@for $i from 1 through 4 {
            &:nth-child($i) {
                animation-delay: 400ms * $i;
            }
        }
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
        fill: #000;
    }
}

body {
    margin: 0;
}