JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<svg viewBox="0 0 900 280" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <title>An animated bustrack</title>
    <desc>An animated bustrack</desc>
    <defs>
        <filter id="myGaussianBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
        </filter>
    </defs>
    <g id="route" fill="none" stroke="black" stroke-width="3.5" rotate="auto-reverse">
        <path id="busTrack2" d="M14.055,76.54c0,0,2.003,6.031,5.168,5.868c3.165-0.164,8.64-0.657,8.56,1.886c-0.081,2.543-1.259,4.296,2.08,7.509
    c3.339,3.212,6.235,6.024,6.431,9.823c0.196,3.797,4.525,5.69,5.646,6.903c1.12,1.21,2.251,2.633,5.417,2.47
    c3.165-0.163,2.251,2.635,6.872,1.972c4.62-0.66,4.794,2.714,6.283,2.85c1.487,0.136,4.118,1.903,5.449,3.104
    s3.518,2.569,3.615,4.469c0.098,1.898,3.485,1.936,4.096,1.479c0.611-0.452,4.329,1.893,8.262,0.209
    c3.933-1.684,7.655-3.356,10.507-1.388c2.853,1.968,15.657,12.31,19.353,14.233c3.696,1.926,9.967,4.563,13.339,8.409
    c3.373,3.845,6.078,7.092,7.376,7.658c1.3,0.568,3.188,0.26,3.286,2.159c0.098,1.897,1.808,2.233,3.263,1.735
    c1.456-0.498,3.667-2.729,6.832-2.892c3.165-0.163,2.759-3.95,3.77-4.851c1.011-0.896,3.347-4.826,4.868-4.059
    c1.521,0.769,5.049,3.548,5.173,1.849c0.124-1.698-0.163-3.164,3.57-4.626c3.732-1.463,6.611-3.093,8.164-1.691
    c1.554,1.4,2.285,3.268,4.129,2.115c1.844-1.153,6.173,0.738,9.284-0.48c3.111-1.218,8.667-4.255,10.885-2.255
    c2.219,2.002,7.738,2.353,10.681,1.988c2.943-0.363,4.264,0.627,3.907,1.914c-0.356,1.289-1.514,3.463-0.037,3.388
    c1.478-0.077,5.486-0.284,9.083-0.259c3.599,0.025,10.448,1.577,10.546,3.477c0.098,1.898,3.139,3.434,6.305,3.271
    c3.165-0.163,6.811-3.312,6.811-3.312s6.167-3.492,11.653-3.775c5.486-0.283,11.925,1.5,14.625,0.514
    c2.7-0.984,7.585-0.602,9.251-1.111c1.666-0.509,2.256-1.385,4.621-0.662c2.364,0.726,7.749,2.562,10.492,2.421
   ...

JavaScript

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
busTrack.setAttribute('stroke-dasharray',trackLength+','+trackLength);
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
busTrackAnim.setAttribute('values','-'+trackLength+';0');