Edit in JSFiddle

$(function(){
    
    var paper = Raphael('svg-wrap', 400, 300)
        // twitter icon from Raphaeljs.com
        ,path = 'M23.295,22.567h-7.213c-2.125,0-4.103-2.215-4.103-4.736v-1.829h11.232c1.817,0,3.291-1.469,3.291-3.281c0-1.813-1.474-3.282-3.291-3.282H11.979V6.198c0-1.835-1.375-3.323-3.192-3.323c-1.816,0-3.29,1.488-3.29,3.323v11.633c0,6.23,4.685,11.274,10.476,11.274h7.211c1.818,0,3.318-1.463,3.318-3.298S25.112,22.567,23.295,22.567z'
        ,icon = paper.path(path).attr({ stroke: '#2c77ba', 'stroke-width': '2', fill: '#2c77ba', 'fill-opacity': 0 })
        ;
    
    // zoom in
    paper.setViewBox(0, 0, 50, 30, true);
    
    // set dash length and offset to be the same, and larger than path
    $(icon.node).css({
        'stroke-dasharray': '9999px',
        'stroke-dashoffset': '9999px'
    });
    
    $('#draw').on('click', function(e){
        e.preventDefault();
        
        // the path length
        var len = Raphael.getTotalLength(path)
            ,glow
            ;

        $(icon.node).animate({
            // animate to final value
            'stroke-dashoffset': (9999 - len)+'px'
        },{
            duration: 5000, // 5 sec
            easing: 'linear',
            complete: function(){
                // fill in the path... for style points
                icon.animate({"fill-opacity": .9}, 1000);
                
                icon.attr({'cursor': 'pointer'});
                
                icon.hover(function(){
                    // on hover
                    glow = icon.glow({
                        width: 10,
                        color: '#aa3'
                    });
                    
                },
                function(){
                    // on hover exit
                    glow.remove();
                    
                }).click(function(){
                    
                    // click
                    $('#msg a:first').click();
                });
            }
        });
    });
});

.container {
    width: 400px;
    margin: 2em auto;
}

#svg-wrap {
    margin: 30px 0;
}

<div class="container">
    <button id="draw">Draw It!</button>

    <div id="svg-wrap"></div>
    <div id="msg">follow me on twitter! <a href="https://twitter.com/wellcaffeinated" target="_blank">@wellcaffeinated</a></div>
</div>