canvas(height="600", width="800")
- for (let i = 0; i < 11; ++i)
  div(style={'--num': i}) 😸
View Compiled
html, body { padding: 0; }
canvas { border: 1px solid black; }
:root {
  --p1x: 50;
  --p1y: 100;
  --cp1x: 204;
  --cp1y: 5;
  --cp2x: 194;
  --cp2y: 209;
  --p2x: 30;
  --p2y: 50;
  --div-offset: -12px;
}

div {
  position: absolute;
  user-select: none;
  pointer-events: none;
  font-size: 24px;
  animation-name: move-x, move-y;
  animation-duration: 2s;
  animation-timing-function: 
    cubic-bezier(
      calc(1 / 3), calc((var(--cp1x) - var(--p1x)) / (var(--p2x) - var(--p1x))),
      calc(2 / 3), calc((var(--cp2x) - var(--p1x)) / (var(--p2x) - var(--p1x)))),
    cubic-bezier(
      calc(1 / 3), calc((var(--cp1y) - var(--p1y)) / (var(--p2y) - var(--p1y))),
      calc(2 / 3), calc((var(--cp2y) - var(--p1y)) / (var(--p2y) - var(--p1y))));
  animation-iteration-count: infinite;
  animation-delay: calc(-0.2s * var(--num));
}

@keyframes move-x {
  from { left: calc(1px * var(--p1x) + var(--div-offset)); }
  to { left: calc(1px * var(--p2x) + var(--div-offset)); }
}
@keyframes move-y {
  from { top: calc(1px * var(--p1y) + var(--div-offset)); }
  to { top: calc(1px * var(--p2y) + var(--div-offset)); }
}
const root = document.querySelector(':root');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

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

function getVars() {
  const rootStyle = window.getComputedStyle(root);
  const vars = {};
  for (const p of ['p', 'cp']) {
    for (const i of ['1', '2']) {
      for (const xy of ['x', 'y']) {
        const varName = p + i + xy;
        vars[varName] = parseInt(rootStyle.getPropertyValue('--' + varName));
      }
    }
  }
  return vars;
}

function drawPoint(x, y) {
 ctx.save();
 ctx.fillStyle = 'black';
 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 drawControlLine(x1, y1, x2, y2) {
 ctx.save();
 ctx.strokeStyle = '#777777';
 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.p1x, vars.p1y);
 ctx.bezierCurveTo(vars.cp1x, vars.cp1y, vars.cp2x, vars.cp2y, vars.p2x, vars.p2y);
 ctx.stroke();
 ctx.restore();
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const vars = getVars();
  
  drawControlLine(vars.p1x, vars.p1y, vars.cp1x, vars.cp1y);
  drawControlLine(vars.p2x, vars.p2y, vars.cp2x, vars.cp2y);
  drawBezier(vars);
  drawPoint(vars.p1x, vars.p1y);
  drawPoint(vars.p2x, vars.p2y);
  drawControlPoint(vars.cp1x, vars.cp1y);
  drawControlPoint(vars.cp2x, vars.cp2y);
}

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();
  if (canDrag(mouseX, mouseY, vars.p1x, vars.p1y)) {
    dragging = 'p1';
  } else if (canDrag(mouseX, mouseY, vars.p2x, vars.p2y)) {
    dragging = 'p2';
  } else if (canDrag(mouseX, mouseY, vars.cp1x, vars.cp1y)) {
    dragging = 'cp1';
  } else if (canDrag(mouseX, mouseY, vars.cp2x, vars.cp2y)) {
    dragging = 'cp2';
  }
});

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

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);
  
  redraw();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.