* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  width: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

const colorTable = [
  // ease in
  [0.0, 0xf15a31],
  [0.2, 0xffd31b],
  [0.33, 0xa6ce42],
  [0.4, 0x007ac1],
  [0.45, 0x007ac1],
  // ease out
  [0.55, 0x007ac1],
  [0.6, 0x007ac1],
  [0.67, 0xa6ce42],
  [0.8, 0xffd31b],
  [1.0, 0xf15a31]
];

function lerp(x, x0, x1, y0, y1) {
  const t = (x - x0) / (x1 - x0);
  return y0 + t * (y1 - y0);
}

function lerpColor(x, x0, x1, y0, y1) {
  const b0 = y0 & 0xff;
  const g0 = (y0 & 0xff00) >> 8;
  const r0 = (y0 & 0xff0000) >> 16;

  const b1 = y1 & 0xff;
  const g1 = (y1 & 0xff00) >> 8;
  const r1 = (y1 & 0xff0000) >> 16;

  const r = Math.floor(lerp(x, x0, x1, r0, r1));
  const g = Math.floor(lerp(x, x0, x1, g0, g1));
  const b = Math.floor(lerp(x, x0, x1, b0, b1));

  return "#" + ("00000" + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
}

function lerpTable(vIndex, tValue, table, canExtrapolate, lerpFunc = lerp) {
  const rowCount = table.length;

  for (let i = 0; i < rowCount; ++i) {
    let a = table[i][0];

    if (i === 0 && tValue < a) {
      if (canExtrapolate) {
        return lerpFunc(
          tValue,
          a,
          table[i + 1][0],
          table[i][vIndex],
          table[i + 1][vIndex]
        );
      }
      return table[i][vIndex];
    }

    if (i === rowCount - 1 && tValue >= a) {
      if (canExtrapolate) {
        return lerpFunc(
          tValue,
          table[i - 1][0],
          a,
          table[i - 1][vIndex],
          table[i][vIndex]
        );
      }
      return table[i][vIndex];
    }

    if (tValue >= a && tValue <= table[i + 1][0]) {
      return lerpFunc(
        tValue,
        a,
        table[i + 1][0],
        table[i][vIndex],
        table[i + 1][vIndex]
      );
    }
  }

  return 0;
}

function lerpStroke(t) {
  return lerpTable(1, t, colorTable, false, lerpColor);
}

function lerpOffset(min, max, t) {
  return (max - min) * t + min;
}

const path = new Path2D(
  `M 85 85 C -5 16 -39 127 78 30 C 126 -9 57 -16 85 85 C 94 123 124 111 85 85 Z`
);

const size = 115;
const width = window.innerWidth * window.devicePixelRatio;
const height = window.innerWidth * window.devicePixelRatio;
const scale = width / size;

const canvas = document.getElementById("canvas");
canvas.height = height;
canvas.width = width;

const ctx = canvas.getContext("2d");

ctx.scale(scale, scale);
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.miterLimit = 10;

const speed = 2;
const baseSpeedDashoffset = 6000;

let stroke = "#ededed";
let offset = 445;
let pathWidth = 372;
let startTime = 0;

const tick = () => {
  const speedDashoffset = baseSpeedDashoffset / speed;

  const now = performance.now();
  const dtOffset = ((now - startTime) % speedDashoffset) / speedDashoffset;

  stroke = lerpStroke(dtOffset);
  offset = lerpOffset(pathWidth, 0, dtOffset);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.restore();
  ctx.strokeStyle = "rgba(0, 0, 0, 0.05)";
  ctx.stroke(path);
  ctx.save();
  ctx.strokeStyle = stroke;
  ctx.lineDashOffset = offset;
  ctx.setLineDash([60, 310]);
  ctx.stroke(path);

  requestAnimationFrame(tick);
};

tick();