JSFiddle - React, Tailwind, and code Playground

by devboell

HTML

<div id="draw_button">Draw next</div>

CSS

#draw_button {
		width: 30px;
		height: 10px;
		cursor: pointer;
	}

JavaScript

$.getScript("//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", function(){
    
        var canvas = Raphael(50, 10, 400, 400);
		var delay;
		var paths1 = ["M10 10L200 10",
						"M10 20L200 20"];
		var paths2 = ["M10 30L200 30",
						"M10 40L200 40"];
		
		
		renderPaths(paths1);

		function renderPaths(paths) {
			delay = 0;
			for (var i = 0; i < paths.length; i = i + 1) {
				renderPath(paths[i]);
			}
		}
	
		function renderPath(path) {	
			var line = canvas.path(path).attr({
			    'stroke-width': 0,
			});

			var prevSubline;
			
			var length = line.getTotalLength();
			var duration = length * 10;

			$(line.node).delay(delay);
			$(line.node).animate({
			    'to': 1
			}, {
			    duration: duration,
			    step: function(pos, fx) {
					if (prevSubline != undefined) prevSubline.remove();
			        var offset = length * fx.pos;
			        var subpath = line.getSubpath(0, offset);
			        var subline = canvas.path(subpath).attr({

			            'stroke-width': 2,
			            stroke: "black"
			        });
			
					prevSubline = subline;
			    },
				complete: function() {
					line.attr({
					    'stroke-width': 2,
					});
					
					prevSubline.remove();
				}
			});
			delay = delay + duration;
	    }
	
		$("#draw_button").on("click", function() {
			renderPaths(paths2);
		});

    });