JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width='500' height='500'></canvas>

JavaScript

var Vector = function(x, y) {
    this.x= x||0,
    this.y= y||0
};
Vector.prototype.multiply=function(v){
    return new Vector(this.x * v, this.y * v);
};
Vector.prototype.add=function(vec){
    return new Vector(this.x + vec.x, this.y + vec.y);
};
Vector.prototype.subtract=function(vec){
    return new Vector(this.x - vec.x, this.y - vec.y);
};

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

//Linear Bezier curve (http://cubic-bezier.com/#0,0,1,1)
var bezier = {
    p0: new Vector(0,0), //Start point
    p1: new Vector(1,1), //Control point 1
    p2: new Vector(0,0), //Control point 2
    p3: new Vector(1,1)  //End point
};
var t=0;

function render(){
    var p = interpolate(t*0.01);
    ctx.save();
    ctx.translate(p.x*200,p.y*200);
    ctx.beginPath();
    ctx.rect(0,0,2,2);
    ctx.fill();
    ctx.restore();
    
    ctx.save();
    ctx.translate(250, p.y*200);
    ctx.beginPath();
    ctx.rect(0,0,2,2);
    ctx.fill();
    ctx.restore();
    
    ctx.save();
    ctx.translate(250, 0);
    ctx.save();
    ctx.translate(p.y*200, 0);
    ctx.beginPath();
    ctx.rect(0,0,2,2);
    ctx.fill();
    ctx.restore();
    ctx.restore();
}
function interpolate(t){
    /*http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial*/
    var u = 1 - t;
	var tt = t*t;
	var uu = u*u;
	var uuu = uu * u;
	var ttt = tt * t;
    
    var p = bezier.p0.multiply(uuu);
    p = p.add(bezier.p1.multiply(3 * uu * t));
    p = p.add(bezier.p2.multiply(3 * u * tt));
    p = p.add(bezier.p3.multiply(ttt));
    
    return p;
}
(function loop(){
    if(t==100){
        t=0;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    } 
    render();
    t++;
	window.requestAnimationFrame(loop);
})();