Текст по кругу

Вращающийся бейдж «scroll down» на SVG textPath, пауза по ховеру.

Наведите на бейдж.

Код

<a class="badge" href="#down">
  <svg viewBox="0 0 120 120">
    <defs>
      <path id="circ" d="M60,60 m-46,0 a46,46 0 1,1 92,0
                        a46,46 0 1,1 -92,0"/>
    </defs>
    <text><textPath href="#circ">ТЕКСТ ПО КРУГУ • ТЕКСТ ПО КРУГУ • </textPath></text>
  </svg>
  <b>↓</b>
</a>

<style>
.badge { position: relative; width: 220px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; }
.badge svg { position: absolute; inset: 0;
  animation: rot 12s linear infinite; }
.badge:hover svg { animation-play-state: paused; }
.badge text { font: 700 10.5px monospace; letter-spacing: .22em; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

Промпт для ИИ

Сделай вращающийся круговой бейдж (студийный штамп «scroll down»): SVG с path-окружностью в defs и <text><textPath href='#circ'> — текст ложится по кругу, длину текста подбери чтобы замкнулся (повтори фразу с • дважды). SVG вращается rotate(360deg) 12s linear infinite, на hover — пауза. В центре — круглая кнопка со стрелкой, растёт по ховеру. При prefers-reduced-motion не вращать.