<div class="circular-text" id="circularText">
  <svg viewBox="0 0 200 200">
    <defs>
      <path id="circlePath" d="M 100, 100
           m -75, 0
           a 75,75 0 1,1 150,0
           a 75,75 0 1,1 -150,0" />
    </defs>
    <text>
      <textPath href="#circlePath" startOffset="0%">
       * WREIZH * conception de site web
      </textPath>
    </text>
  </svg>
</div>
<script>
  const circularText = document.getElementById('circularText');
  const svg = circularText.querySelector('svg');

  let angle = 0;
  let speed = 0.2;
  let hoverSpeed = 0.1;
  let currentSpeed = speed;

  function rotate() {
    angle += currentSpeed;
    svg.style.transform = `rotate(${angle}deg)`;
    requestAnimationFrame(rotate);
  }

  circularText.addEventListener('mouseenter', () => {
    currentSpeed = hoverSpeed;
  });

  circularText.addEventListener('mouseleave', () => {
    currentSpeed = speed;
  });

  rotate(); // Lancer la rotation
</script>