let canvas = document.querySelector('.circle-zazz')

let myCircle = {
  size: 40
}

gsap.to(myCircle, {
  duration: 1,
  size: 0,
  repeat: -1,
  repeatDelay: 0.25,
  yoyo: true,
  onUpdate: () => draw(canvas)
});

function draw(canvas) {
  const ctx = canvas.getContext("2d");
  const circleSize = 80; // Size of the circles
  const padding = 3; // Padding between circle and square

  const canvasWidth = window.innerWidth + 6;
  const numRows = 2; // Number of rows

  // Calculate the square size based on the available width and padding
  const squareSize =
    (canvasWidth - 2 * padding) /
    Math.ceil(canvasWidth / (circleSize + 2 * padding));

  // Calculate the number of circles that can fit in a row
  const numCirclesPerRow = Math.floor(canvasWidth / squareSize);

  // Calculate the total width of the circles and padding
  const totalWidth = numCirclesPerRow * squareSize;

  // Calculate the left margin to center the circles
  const marginLeft = (canvasWidth - totalWidth) / 2;

  // Calculate the canvas height based on the number of rows
  const canvasHeight = numRows * squareSize;

  // Set the canvas dimensions
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Loop through the rows and columns to draw the circles
  for (let row = 0; row < numRows; row++) {
    for (let col = 0; col < numCirclesPerRow; col++) {
      // Calculate the x and y coordinates for the current circle
      const x = marginLeft + col * squareSize;
      const y = row * squareSize;

      // Determine the starting color combination for each row
      const isBlueCircle = (row + col) % 2 === 0;

      // Set the fill color and draw the square
      ctx.fillStyle = isBlueCircle ? "blue" : "white";
      ctx.fillRect(x, y, squareSize, squareSize);

      // Draw the circle
      ctx.beginPath();
      ctx.arc(
        x + squareSize / 2,
        y + squareSize / 2,
        myCircle.size,
        0,
        2 * Math.PI
      );
      ctx.fillStyle = isBlueCircle ? "white" : "blue";
      ctx.fill();
    }
  }
};

draw(canvas)