let gridVisible = true;

    // Function to draw the grid of dots
    function drawGrid() {
      const svgContainer = document.getElementById('svgContainer');
      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

      const containerWidth = svgContainer.offsetWidth;
      const containerHeight = svgContainer.offsetHeight;

      console.log("X : ", containerWidth);
      console.log("Y : ", containerHeight);

      // Compute scaling factors
      const scaleX = containerWidth / 100; // Scale based on width
      const scaleY = containerHeight / 100; // Scale based on height


      svg.setAttribute("viewBox", `0 0 ${containerWidth} ${containerHeight}`);
      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

      const positions = [25, 50, 75];
      positions.forEach(x => {
        positions.forEach(y => {
          const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          circle.setAttribute("cx", x * scaleX);
          circle.setAttribute("cy", y * scaleY);
          circle.setAttribute("r", 10); // Small radius for dots
          circle.setAttribute("fill", "red");
          svg.appendChild(circle);
        });
      });

      svgContainer.appendChild(svg);
    }

    // Function to toggle the grid visibility
    function toggleGrid() {
      const svgContainer = document.getElementById('svgContainer');
      const existingGrid = svgContainer.querySelector('svg');

      if (existingGrid) {
        svgContainer.removeChild(existingGrid); // Remove the grid if it exists
      } else {
        drawGrid(); // Draw the grid if it doesn't exist
      }
    }

    document.addEventListener('DOMContentLoaded', () => {
      drawGrid();
    });