<canvas height="600" width="800"></canvas>
<input type="checkbox" id="show-css-animation" checked/>
<label for="show-construction">Show CSS Animation</label>
<div>😸</div>

canvas { 
  border: 1px solid black; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
:root {
  --p0x: 100;
  --p0y: 150;
  --p1x: 254;
  --p1y: 55;
  --p2x: 244;
  --p2y: 259;
  --p3x: 80;
  --p3y: 100;
  --q1x: calc(3 * var(--p1x) - 3 * var(--p2x) + var(--p3x));
  --q1y: calc(3 * var(--p1y) - 3 * var(--p2y) + var(--p3y));
  --q2x: calc(3 * var(--p2x) - 2 * var(--p3x));
  --q2y: calc(3 * var(--p2y) - 2 * var(--p3y));
}
div {
  position: absolute;
  user-select: none;
  pointer-events: none;
  top: -16px;
  left: -16px;
  font-size: 24px;
  animation-name: move1, move2, move3, progress;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: calc(-0.6s * var(--num, 0));
}

@keyframes move1 {
  from { transform: translate3d(calc(1px * var(--p0x)), calc(1px * var(--p0y)), 0px); }
  to { transform: translate3d(calc(1px * var(--q1x)), calc(1px * var(--q1y)), 0px); }
}
@keyframes move2 {
  to { transform: translate3d(calc(1px * var(--q2x)), calc(1px * var(--q2y)), 0px); }
}
@keyframes move3 {
  to { transform: translate3d(calc(1px * var(--p3x)), calc(1px * var(--p3y)), 0px); }
}
@keyframes progress {
  from { z-index: 0; }
  to { z-index: 1000; }
}

const root = document.querySelector(':root');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const div = document.querySelector('div');
const showCssAnimation = document.querySelector('#show-css-animation');

const pointRadius = 5;
let dragging = 'none';

function getVars() {
  const rootStyle = window.getComputedStyle(root);
  const vars = {};
  for (let i = 0; i < 4; ++i) {
    for (const xy of ['x', 'y']) {
      const varName = 'p' + i.toString() + xy;
      vars[varName] = parseInt(rootStyle.getPropertyValue('--' + varName));
    }
  }
  vars.progress =  parseInt(window.getComputedStyle(div).getPropertyValue('z-index')) / 1000;
  return vars;
}

function drawPoint(x, y, fillStyle) {
 ctx.save();
 ctx.fillStyle = fillStyle;
 ctx.beginPath();
 ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
 ctx.fill();
 ctx.restore();
}

function drawControlPoint(x, y) {
 ctx.save();
 ctx.strokeStyle = 'black';
 ctx.lineWidth = 2;
 ctx.fillStyle = 'white';
 ctx.beginPath();
 ctx.rect(x - pointRadius, y - pointRadius, pointRadius * 2, pointRadius * 2);
 ctx.stroke();
 ctx.fill();
 ctx.restore();
}

function drawLine(x1, y1, x2, y2, strokeStyle) {
 ctx.save();
 ctx.strokeStyle = strokeStyle;
 ctx.beginPath();
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.stroke();
 ctx.restore();
}

function drawBezier(vars) {
 ctx.save();
 ctx.strokeStyle = 'red';
 ctx.lineWidth = 2;
 ctx.beginPath();
 ctx.moveTo(vars.p0x, vars.p0y);
 ctx.bezierCurveTo(vars.p1x, vars.p1y, vars.p2x, vars.p2y, vars.p3x, vars.p3y);
 ctx.stroke();
 ctx.restore();
}

function linearInterpolation(v1, v2, p) {
  return (1 - p) * v1 + p * v2;
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  const vars = getVars(); 
  
  const q1x = 3 * vars.p1x - 3 * vars.p2x + vars.p3x;
  const q1y = 3 * vars.p1y - 3 * vars.p2y + vars.p3y;
  const q2x = 3 * vars.p2x - 2 * vars.p3x;
  const q2y = 3 * vars.p2y - 2 * vars.p3y;
  
  const m1x = linearInterpolation(vars.p0x, q1x, vars.progress);
  const m1y = linearInterpolation(vars.p0y, q1y, vars.progress);
  const m2x = linearInterpolation(m1x, q2x, vars.progress);
  const m2y = linearInterpolation(m1y, q2y, vars.progress);
  const m3x = linearInterpolation(m2x, vars.p3x, vars.progress);
  const m3y = linearInterpolation(m2y, vars.p3y, vars.progress);
  
  drawLine(vars.p0x, vars.p0y, vars.p1x, vars.p1y, '#777');
  drawLine(vars.p2x, vars.p2y, vars.p3x, vars.p3y, '#777');
  
    
  if (showCssAnimation.checked) {
    drawLine(vars.p0x, vars.p0y, q1x, q1y, '#00f');
    drawLine(m1x, m1y, q2x, q2y, '#00f');
    drawLine(m2x, m2y, vars.p3x, vars.p3y, '#00f');
    
    drawPoint(q1x, q1y, '#777');
    drawPoint(q2x, q2y, '#777');   
    drawPoint(m1x, m1y, 'blue');
    drawPoint(m2x, m2y, 'blue');
  }
  
  drawBezier(vars);
  drawPoint(vars.p0x, vars.p0y, 'black');
  drawPoint(vars.p3x, vars.p3y, 'black');
  drawControlPoint(vars.p1x, vars.p1y);
  drawControlPoint(vars.p2x, vars.p2y);
  
  window.requestAnimationFrame(redraw);
}

redraw();

function getMousePositionWithinCanvas(e) {
  const rect = canvas.getBoundingClientRect();
  return [e.clientX - rect.left, e.clientY - rect.top];
}

function canDrag(x, y, x1, y1) {
  return Math.max(Math.abs(x - x1), Math.abs(y - y1)) < pointRadius;
}

canvas.addEventListener('mousedown', (e) => {
  const [mouseX, mouseY] = getMousePositionWithinCanvas(e);
  
  dragging = 'none';
  const vars = getVars();
  for(let i = 0; i < 4; ++i) {
    const pName = 'p' + i.toString();
    if (canDrag(mouseX, mouseY, vars[pName + 'x'], vars[pName + 'y'])) {
      dragging = pName;
      break;
    }
  }
});

canvas.addEventListener('mouseup', (e) => {
  dragging = 'none';
});

canvas.addEventListener('mousemove', (e) => {
  if (dragging === 'none') {
    return;
  }
  
  const [mouseX, mouseY] = getMousePositionWithinCanvas(e);
  root.style.setProperty('--' + dragging + 'x', mouseX);
  root.style.setProperty('--' + dragging + 'y', mouseY);
});