JSFiddle - React, Tailwind, and code Playground

HTML

<div id="graphics">
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="800">
<path d="M100 205 l420,0
         M520,205 A200,200,460 1 1 520,610
         M520,610 A200,200,460 1 1 520,205 
         
"></path>
<g id="duplicate"></g>
</svg>
<canvas width="1000" height="800"></canvas>
</div>

CSS

p { text-align:center; font-style:italic; margin:1em; }
		path { fill:#eee; stroke:#ccc; stroke-width:20 }
		#duplicate path { pointer-events:none; stroke:#23ccdc; fill:none; }
		#graphics { width:800px; height:800px; margin:1em auto; position:relative; }
		#graphics * { position:absolute; top:0; left:0; width:1000px; height:800px }

JavaScript

var distancePerPoint = 10;
var drawFPS          = 20;

var orig = document.querySelector('path'), points, timer,
    canvas = document.querySelector('canvas'),
    ctx=canvas.getContext('2d');

canvas.addEventListener('mouseover',startDrawingPath,false);
canvas.addEventListener('mouseout', stopDrawingPath, false);

function startDrawingPath(){
	points = [];
	ctx.lineWidth = 20;
	ctx.strokeStyle = '#23ccdc';
	timer = setInterval(buildPath,1000/drawFPS);
}

function buildPath(){
	var nextPoint = points.length * distancePerPoint;
	var pathLength = orig.getTotalLength();
	if (nextPoint <= pathLength){
		points.push(orig.getPointAtLength(nextPoint));
		redrawCanvas();
	}
}

function redrawCanvas(){
	clearCanvas();
	ctx.beginPath();
	ctx.moveTo(points[0].x,points[0].y);
	for (var i=1;i<points.length;i++) ctx.lineTo(points[i].x,points[i].y);
	ctx.stroke();
}

function clearCanvas(){
	ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
}

function stopDrawingPath(){
	clearInterval(timer);
	clearCanvas();
}