Question

If I have an animating circle as in this example, is there a way in which it can leave a permanent trail on the canvas, of 1px solid white?

I have tried dynamically building a path, but could not get this to work.

Thanks in advance, any help would be much appreciated

Answer 1

I don’t know why SVG gets such a bad rap compared to its country cousin, the canvas element. It is amazing how many times SVG is dismissed as inadequate or inappropriate before any serious attempt is even made to explore its capabilities.

Please take a look at this fiddle.

Most of this is driven by dynamic evaluation of a moving point on a path, as follows:

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

I challenge anyone to find a solution with HTML canvas that is more economical than this. If you are planning to add any interactivity to this widget, please consider how easy event binding is in SVG in your evaluation of economy.