Question

I’m wanting to animate the cursive text below, from left to right.

An example of want i’m trying to acheive can be found on the slaveryfootprint.org site.
Select an electronic item in the link below, and watch the cables animate;
http://slaveryfootprint.org/survey/#gadgets

I’m unfamiliar with SVG and SVG libraries like Raphaël js, so i’m not sure where to start.
I’ve googled around, but not found a tutorial.

EDIT: Find the first tag below, saved from illustrator, depicting the d first character:

<g>
<path fill="none" stroke="#8C3939" stroke-linecap="round" d="M216.615,297.73c9.509,10.697,24.563-12.282,18.444-15.658
    c-6.074-3.351-10.125,5.753-10.125,5.753s-4.297,8.542,2.08,13.137c8.42,6.673,15.817-3.188,15.947-3.43"/>
</g>

Answer 1

If you have the path, you can do almost anything. Another alternative would be to hand the path to an incremental path expander in javascript. Here’s the code I typically use (I’ve posted it as part of other answers and it’s not entirely unique, but this incarnation is mine):

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path;
    if ( typeof( pathstr ) == "string" )
        guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    else
        guide_path = pathstr;
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;        

    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();
             guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}

You’d then feed in the path for your text to this function. Ideally, I’d do it one letter at a time — complicated paths seem to get bogged down in Firefox, though Chrome seems to deal with them just fine.

Here’s a mock-up on my site.