JSFiddle - React, Tailwind, and code Playground

JavaScript

var canvas = Raphael( 0, 0, 200, 200 );
var pathstr = "M0,0 Q50,50,100,30 Q25,80,100,100 Q150,150,200,50 Q150,50,3,150";

var path = arrowline( canvas, pathstr, 4000, { stroke: 'black', 'stroke-width': 8, 'fill-opacity': 0 } );

path.hover( 
        function() { path.animate( { transform: "S1.3,1.3,100,100" }, 1000 ); },
        function() { path.animate( { transform: "S1.0,1.0,100,100" }, 1000 ) } 
    );

function arrowline( canvas, pathstr, duration, attr, callback )
{    
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var start_time = new Date().getTime();
    var interval_length = 25;
    
    var interval_id = setInterval( function()
        {
            var elapsed_time = new Date().getTime() - start_time;
            var this_length = elapsed_time / duration * total_length;
            var subpathstr = guide_path.getSubpath( 0, this_length );
            attr.path = subpathstr;
            path.animate( attr, interval_length );
                                       
            if ( elapsed_time >= duration )
            {
                clearInterval( interval_id );
                if ( callback != undefined ) callback();
            }                                       
        }, interval_length );  
    return path;    
}