Создание анимации круга JS от курсора, когда кто-то щелкает в определенной области

Я пытаюсь создать раздел своего сайта, который позволит пользователям нажимать на него. Когда они щелкают, должна появиться анимация, исходящая от кончика курсора, визуально обозначающая щелчок.

У меня он работает только с размером экрана 1920, когда я изменяю его размер даже на одно число вниз, жесткий код разрывается, круг больше не появляется там, где я хочу.

Поэтому я пытаюсь найти лучший способ сделать так, чтобы этот кружок появлялся на кончике курсора при каждом щелчке мыши. Он должен работать на любом размере экрана без жесткого кодирования.

Я пробовал добавить кнопку в тестовую область и жестко запрограммировать одно место, в котором она будет появляться после каждого щелчка. Я пытался создать код в различных форматах, но не смог заставить его работать.

HTML:

    <div class = "testArea" id = "blankBox">
      <div class = "centered-text" id = "clickText">Click here to start test</div>
    </div>

ЯС:

  function handleBlankBoxClick(event) {
    // If the countdown has ended, return early
    if (testDuration <= 0) {
      return;
    }

    if (!countdownStarted && testDuration > 0) {
      countdownStarted = true;
      startCountdown();
    }

    if (testDuration > 0) {
      clickText.style.display = "none"; // Hide the click text

      // Create a div element for the blue circle
      var circle = document.createElement("div");
      circle.classList.add("click-circle");
      blankBox.appendChild(circle);


      // Calculate the offset between the cursor position and the container position
      var rect = blankBox.getBoundingClientRect();
      var offsetX = event.clientX - 625;
      var offsetY = event.clientY - 335;
      
      // Set initial position of the circle to the cursor position
      circle.style.left = offsetX + "px";
      circle.style.top = offsetY + "px";

      // Add animation class to start the animation
      circle.classList.add("click-animation");

      // Remove the circle after animation completes
      setTimeout(function () {
        blankBox.removeChild(circle);
      }, 500); // Adjust this time according to your animation duration
    }
  }

CSS:

/* CSS for the click circle animation */
.click-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #8a26fc;
  border-radius: 50%;
  pointer-events: none; /* Ensure the circle doesn't interfere with clicks */
}

.click-animation {
  animation: click-effect 0.33s ease-out forwards; /* Decreased animation duration and added "forwards" to keep the final state */
}

@keyframes click-effect {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3); /* Increased scale for larger circles */
    opacity: 0;
  }
}