[smat]

Если еще актуально - попробуйте вот так.
Работает в том числе и в IE8.
Суть этого способа в добавлении к элементам "path" нового атрибута "length" с последующей его анимацией:

window.onload = function(){
	var paper = Raphael(document.getElementById("holder"), "100%", "100%");	
	
	var p1 = "M38 27c14,83 82,173 184,114 102,-60 -97,-44 -73,-82 25,-37 196,-37 259,-1 63,36 64,63 64,63",	
		p2 = "M23 157c0,-42 -34,-135 102,-118 136,17 -34,89 -22,128 12,39 87,51 225,-8 137,-58 51,-81 -27,-97 -77,-17 -143,28 -110,67 34,38 279,35 279,35",  
		line1,
		line2; 	
	
	// для элементов "path" добавляем новый атрибут "length", который может быть от 0 до getTotalLength
	// кроме того в каждом элементе "path" в параметре data("total-length") будет указана его длина, которая может понадобиться для анимации атрибута "length" 
	paper.customAttributes.length = function (value) {
		if (!this.data("full-path")) { this.data("full-path", this.attrs.path) }; 		
		if (!this.data("total-length")) { this.data("total-length", Raphael.getTotalLength(this.data("full-path"))) };
    	return {
    		path: Raphael.getSubpath(this.data("full-path"), 0, value)   
    	}
    };	
	
	// при загрузке страницы задаем нулевую длину для обеих линий
	line1 = paper.path(p1).attr({"length": 0});
	line2 = paper.path(p2).attr({"length": 0});

	document.getElementById("draw").onclick = function(){		
		line1.animate({ 
			"length": line1.data("total-length"), 
			"stroke": "red",
			"stroke-width": 10 
		}, 1000);
					
		line2.animate({ 
			"length": line2.data("total-length"),
			"stroke": "green",
			"stroke-width": 5  
		}, 2000);   
	};
};

архив прикрепляю, посмотреть в работе можно тут:
http://jsfiddle.net/yncwpry1/1/