Как центрировать индикатор внутри дуги, JS?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Half-Circle Indicator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 50px;
    }
    .svg-container {
      position: relative;
      display: inline-block;
    }
    .indicator {
      width: 8px;
      height: 40px;
      border-radius: 20px;
      background: black;
      position: absolute;
      transform-origin: center bottom;
      transform: translate(-20%, 0) rotate(0deg);
    }
    .score-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .score-label span {
      display: block;
      font-size: 20px;
      color: #607d8b;
    }
    .score-value {
      font-size: 36px;
      font-weight: bold;
      color: #274344;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <!-- SVG Arc -->
    <svg width="300" height="180" viewBox="0 0 300 150" fill="none" xmlns="http://www.w3.org/2000/svg">

      <defs>
        <linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stop-color="#ade6f1" />
          <stop offset="100%" stop-color="#3e7c85" />
        </linearGradient>
      </defs>
      <path
        id="arcPath"
        d="M10 140 A140 140 0 0 1 290 140"
        stroke="url(#gradient)"
        stroke-width="15"
        fill="none"
      />
    </svg>

    <div class="indicator"></div>

    <div class="score-label">
      <span>Vaše skóre</span>
      <div class="score-value" id="scoreValue">0.0</div>
    </div>
  </div>

  <script>
    function moveIndicator(percentage) {
      const path = document.getElementById("arcPath");
      const indicator = document.querySelector(".indicator");
      const scoreValue = document.getElementById("scoreValue");

      const pathLength = path.getTotalLength();

      const distance = pathLength * percentage;
      const point = path.getPointAtLength(distance);
      const tangent = path.getPointAtLength(distance + 1);

      const angle = Math.atan2(tangent.y - point.y, tangent.x - point.x) * (180 / Math.PI);

      indicator.style.left = `${point.x}px`;
      indicator.style.top = `${point.y}px`;
      indicator.style.transform = `translate(-50%, -100%) rotate(${angle}deg)`;


      const score = (percentage * 10).toFixed(1);
      scoreValue.textContent = score;
    }

    let progress = 0;
    function animate() {
      moveIndicator(progress);
      progress += 0.002; 
      if (progress > 1) progress = 0;
      requestAnimationFrame(animate);
    }
    animate();
  </script>
</body>
</html>

Должно быть так