JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/walkway/0.0.1/walkway.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="427.826px" height="197.152px" viewBox="0 0 427.826 197.152" enable-background="new 0 0 427.826 197.152"
	 xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="3" d="M11.797,56.248h4.537V25.789H11.63V14.033H34.73
	c7.644,0,13.369,2.287,17.172,6.863c3.803,4.575,5.706,11.271,5.706,20.089c0,3.629-0.511,7.069-1.531,10.32
	c-1.021,3.251-2.487,6.14-4.397,8.667c-1.911,2.526-4.379,4.536-7.403,6.028c-3.024,1.491-6.411,2.237-10.159,2.237H11.797V56.248z
	 M32.532,56.248c1.354,0,2.546-0.317,3.577-0.951c1.029-0.635,1.851-1.447,2.463-2.438c0.612-0.99,1.113-2.182,1.503-3.573
	s0.654-2.756,0.793-4.092c0.14-1.336,0.209-2.75,0.209-4.241c0-1.537-0.056-2.944-0.167-4.226c-0.111-1.28-0.339-2.621-0.682-4.024
	c-0.344-1.402-0.803-2.588-1.378-3.557c-0.575-0.969-1.374-1.771-2.394-2.405c-1.021-0.635-2.217-0.951-3.59-0.951h-1.308v30.459
	H32.532z"/>
    </svg>

CSS

svg{
    position:absolute;
    left:-10px;
    width:102%;
    top:10%;
    }
path { 
    transition: fill 2.0s !important;
    }
html {
    height:100%;
    overflow:hidden;
    position:relative;
    }
.testClass {
    fill:black;
    }

JavaScript

var svg = new Walkway({
            selector:"#Layer_1",
            duration:'5000',
            easing: 'linear'
            });

        svg.draw(function(){
            $('path').attr('class','testClass');
        });