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

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let canvasSize = 900;
let canvasCenter = canvasSize / 2;

let 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);

// https://coolors.co/f72585-b5179e-7209b7-560bad-480ca8-3a0ca3-3f37c9-4361ee-4895ef-4cc9f0
const colors = [
  "#f72585",
  "#b5179e",
  "#7209b7",
  "#560bad",
  "#480ca8",
  "#3a0ca3",
  "#3f37c9",
  "#4361ee",
  "#4361ee",
  "#4895ef",
  "#4cc9f0"
];

let piSegment = 0.025;
let start = 1.5;
let end = 1.6;
let startAngle = start * Math.PI;
let endAngle = end * Math.PI;

setTimeout(() => {
  draw();
}, 400);

function draw() {
  arcCount = 76;

  for (let i = 0; i < arcCount; i++) {
    ctx.beginPath();
    ctx.arc(canvasCenter, canvasCenter, canvasCenter / 2, startAngle, endAngle);
    ctx.lineWidth = i + 2;
    ctx.strokeStyle = colors[i % colors.length];
    ctx.stroke();

    start = end;
    end = end + piSegment;
    startAngle = start * Math.PI;
    endAngle = end * Math.PI;
  }

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