div(id='container')
  canvas(id='bezier', class='canvas', width='600', height='400')
  - for (let i = 0; i < 11; ++i)
    div(id='box'+i,class='box')

body { background-color:#000; overflow: hidden; }
body, html { height: 100%; width: 100%; margin: 0; padding: 0; }
.canvas { position:relative; margin:auto; top:0; left:0; }
#container { position: absolute; }
.box {
  position: absolute;
  pointer-events: none;
  top: -4px; left: -4px;
  height: 8px; width: 8px;
  background-color: red;
  animation: bezier 1s linear infinite;
  transform: translate3d(var(--p9x), var(--p9y), 0);
}

@for $i from 4 to 10 {
  @property --p#{$i}x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }
  @property --p#{$i}y {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }
}

:root {
  --p0x: 50px;
  --p0y: 100px;
  --p1x: 250px;
  --p1y: 50px;
  --p2x: 150px;
  --p2y: 150px;
  --p3x: 30px;
  --p3y: 50px;
}

@keyframes bezier {
  from { --p4x: var(--p0x); --p4y: var(--p0y); }
  to { --p4x: var(--p1x); --p4y: var(--p1y); }
  from { --p5x: var(--p1x); --p5y: var(--p1y); }
  to { --p5x: var(--p2x); --p5y: var(--p2y); }
  from { --p6x: var(--p2x); --p6y: var(--p2y); }
  to { --p6x: var(--p3x); --p6y: var(--p3y); }
  from { --p7x: var(--p4x); --p7y: var(--p4y); }
  to { --p7x: var(--p5x); --p7y: var(--p5y); }
  from { --p8x: var(--p5x); --p8y: var(--p5y); }
  to { --p8x: var(--p6x); --p8y: var(--p6y); }
  from { --p9x: var(--p7x); --p9y: var(--p7y); }
  to { --p9x: var(--p8x); --p9y: var(--p8y); }
}


@for $i from 1 to 11 {
  #box#{$i} { animation-delay: #{-0.1 * $i}s; }
}

var canvas;
var ctx;
var xa = 50;
var ya = 100;
var xca = 250;
var yca = 50;
var xb = 30;
var yb = 50;
var xcb = 150;
var ycb = 150;
var WIDTH = 700;
var HEIGHT = 400;
var dragok = false;
var pointA = false;
var pointControlA = false;
var pointB = false;
var pointControlB = false;

function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.closePath();
 ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
 canvas = document.getElementById("bezier");
 ctx = canvas.getContext("2d");
 canvas.setAttribute('width', WIDTH);
 canvas.setAttribute('height', HEIGHT);
 return setInterval(draw, 10);
}

function draw() {
 clear();
 ctx.fillStyle = "#FAF7F8";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "#444444";
 rect(xa - 5, ya - 5, 10, 10);
 rect(xb - 5, yb - 5, 10, 10);
 ctx.fillStyle = "#0095cd"; 
 rect(xca - 5, yca - 5, 10, 10);
 rect(xcb - 5, ycb - 5, 10, 10);
 
  lerp(xa, ya, xca, yca);
  lerp(xb, yb, xcb, ycb);
  
  bezier();
}

function lerp(pAx, pAy, pBx, pBy){
  ctx.strokeStyle = "#0095cd";
  ctx.beginPath();
  ctx.moveTo(pAx,pAy);
  ctx.lineTo(pBx,pBy);
  ctx.stroke();
}

function bezier(){
  ctx.strokeStyle ="#000";
  ctx.beginPath();
  ctx.moveTo(xa,ya);
  ctx.bezierCurveTo(xca,yca,xcb,ycb,xb,yb);
  ctx.stroke();
  
  const rootElement = document.querySelector(':root');
  rootElement.style.setProperty('--p0x', xa + 'px');
  rootElement.style.setProperty('--p0y', ya + 'px');
  rootElement.style.setProperty('--p1x', xca + 'px');
  rootElement.style.setProperty('--p1y', yca + 'px');
  rootElement.style.setProperty('--p2x', xcb + 'px');
  rootElement.style.setProperty('--p2y', ycb + 'px');
  rootElement.style.setProperty('--p3x', xb + 'px');
  rootElement.style.setProperty('--p3y', yb + 'px');
}
function myMove(e){
 if (dragok){
   if (pointA){
     xa = e.pageX - canvas.offsetLeft;
     ya = e.pageY - canvas.offsetTop;
   } else if (pointB){
     xb = e.pageX - canvas.offsetLeft;
     yb = e.pageY - canvas.offsetTop;
   } else if (pointControlA){
     xca = e.pageX - canvas.offsetLeft;
     yca = e.pageY - canvas.offsetTop;
   } else if (pointControlB){
     xcb = e.pageX - canvas.offsetLeft;
     ycb = e.pageY - canvas.offsetTop;
   }
 }
}

function myDown(e){
  /*var debugX = e.pageX - 5 - canvas.offsetLeft;
  var debugY = e.pageY -5 - canvas.offsetTop;
  console.log('x '+debugX+' y '+debugY);*/
 if (e.pageX < xa + 5 + canvas.offsetLeft && e.pageX > xa - 5 +
 canvas.offsetLeft && e.pageY < ya + 5 + canvas.offsetTop &&
 e.pageY > ya -5 + canvas.offsetTop){
  xa = e.pageX - canvas.offsetLeft;
  ya = e.pageY - canvas.offsetTop;
  dragok = true;
  pointA = true;
  canvas.onmousemove = myMove;
 } else if (e.pageX < xb + 5 + canvas.offsetLeft && e.pageX > xb - 5 +
 canvas.offsetLeft && e.pageY < yb + 5 + canvas.offsetTop &&
 e.pageY > yb -5 + canvas.offsetTop){
  xb = e.pageX - canvas.offsetLeft;
  yb = e.pageY - canvas.offsetTop;
  dragok = true;
  pointB = true;
  canvas.onmousemove = myMove;
 } else if (e.pageX < xca + 5 + canvas.offsetLeft && e.pageX > xca - 5 +
 canvas.offsetLeft && e.pageY < yca + 5 + canvas.offsetTop &&
 e.pageY > yca -5 + canvas.offsetTop){
  xca = e.pageX - canvas.offsetLeft;
  yca = e.pageY - canvas.offsetTop;
  dragok = true;
  pointControlA = true;
  canvas.onmousemove = myMove;
 } else if (e.pageX < xcb + 5 + canvas.offsetLeft && e.pageX > xcb - 5 +
 canvas.offsetLeft && e.pageY < ycb + 5 + canvas.offsetTop &&
 e.pageY > ycb -5 + canvas.offsetTop){
  xcb = e.pageX - canvas.offsetLeft;
  ycb = e.pageY - canvas.offsetTop;
  dragok = true;
  pointControlB = true;
  canvas.onmousemove = myMove;
 }
}

function myUp(){
 dragok = false;
 pointA = false;
 pointControlA = false;
 pointB = false;
 pointControlB = false;
 canvas.onmousemove = null;
}

init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;