<canvas id="canvas"></canvas>

html {
  height: 100%;
  background: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 880px;
  min-height: 880px;
}

body {
  margin: 0;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const canvasSize = 900;
const ratio = window.devicePixelRatio || 1;
canvas.width = canvasSize * ratio;
canvas.height = canvasSize * ratio;
canvas.style.width = canvasSize + "px";
canvas.style.height = canvasSize + "px";
ctx.scale(ratio, ratio);

const animationInterval = 400;
const canvasPadding = 100;
const bezierPadding = 400;
const lineWidth = randomNum(4, 20);

const colors = [
  "#dec0c4",
  "#c5f621",
  "#f4e113",
  "#b83dab",
  "#92ced1",
  "#8dcc41",
  "#864299",
  "#963376",
  "#ef42bf",
  "#FD4659"
];

let startX = randomCoord();
let startY = randomCoord();

draw();

function draw() {
  let endX = randomCoord();
  let endY = randomCoord();

  let start = {
    x: startX,
    y: startY
  };

  let cp1 = {
    x: randomNum(startX + bezierPadding, startX - bezierPadding),
    y: randomNum(startY + bezierPadding, startY - bezierPadding)
  };

  let cp2 = {
    x: randomNum(endX + bezierPadding, endX - bezierPadding),
    y: randomNum(endY + bezierPadding, endY - bezierPadding)
  };

  let end = {
    x: randomCoord(),
    y: randomCoord()
  };

  ctx.beginPath();
  ctx.moveTo(start.x, start.y);
  ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
  ctx.lineWidth = randomNum(2, 10);
  ctx.strokeStyle = colors[0];
  ctx.stroke();

  startX = end.x;
  startY = end.y;

  let lastColor = colors.pop();
  colors.unshift(lastColor);
  setTimeout(() => requestAnimationFrame(draw), animationInterval);
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomCoord() {
  return randomNum(canvasPadding, canvasSize - canvasPadding);
}