JSFiddle - React, Tailwind, and code Playground

HTML

<body style="text-align:center">
    <button id="draw">Поехали!</button>
    <div id="holder" style="width:500px; height:400px;"></div>
</body>

JavaScript

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;	

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