JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cnv" width="800" height="800"></canvas>

JavaScript

var cnv = document.getElementById("cnv");
var ctx = cnv.getContext("2d");
var path = [], id = 0, speed = 1;

var point = {
  x: 100, y: -20,
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, 10, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.closePath();
  }
};

function getCurvePath(x0, y0, x1, y1, xdepth, ydepth) {
	var p0 = {x: x0, y: y0}, 
  		p2 = {x: x1, y: y1},
  		p1 = {x: xdepth + (p0.x + p2.x) * 0.5, y: ydepth + (p0.y + p2.y) * 0.5},
   		x, y,	
      t = 0,
      path = [];
  
  for (; t <= 1; t += 0.01) {
  
    x = (1 - t)*(1 - t)*p0.x + 2*t*(1 - t)*p1.x + t*t*p2.x;
    y = (1 - t)*(1 - t)*p0.y + 2*t*(1 - t)*p1.y + t*t*p2.y;
    
    path.push({x: x, y: y});
  }
  return path;
}

function drawCurve(path) {
  ctx.beginPath();
  for (var i = 0; i < path.length; i++) {
    ctx.lineTo(path[i].x, path[i].y);
  }
  ctx.stroke();
  ctx.closePath();  
}

path = getCurvePath(250, 350, 250, 20, 450, 0);
var i = 0;

function render() {
  ctx.clearRect(0, 0, cnv.width, cnv.height);
  
  drawCurve(path);
  
  if (i < path.length)
    point.x = path[i].x, point.y = path[i].y;
  else {
    i = 0;
  }
  
  i += speed;
  
  point.draw();
  id = requestAnimationFrame(render);
}

render();