Как сделать круглые буквы, вращающиеся по оси

Question

Стоит задача сделать такие блоки:

Также должна проигрываться анимация вращения букв оси.

Пробовал сделать так:

// расстояние между словами
const rotateBetweenWords = (value) => {
  const words = document.querySelectorAll('.wheel__word')

  let deg = -20

  for (let word of words) {
    word.style.transform = `rotate(${ deg }deg)`
    deg += value
  }
}

// расстояние между буквами
const rotateBetweenLetters = (value) => {
  const letters = document.querySelectorAll('.wheel__letter')

  let deg = -80

  for (let letter of letters) {
    letter.style.transform = `rotate(${ deg }deg)`
    deg += value
  }

}

rotateBetweenWords(50);
rotateBetweenLetters(12);

.wheel {
    position: relative;
    width: 410px;
    height: 403px;
    color: black;
}

.wheel__text {
    display: none;
    font-weight: 500;
    font-size: 1rem;
    line-height: calc(34 / 28);
}

.wheel__word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wheel__letter {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 0 100%;
    font-family: "Dela Gothic One";
    font-size: 1rem;
    line-height: calc(67 / 46);
    padding-bottom: 150px;
}

<div class="prizes__wheel wheel">
  <div class="wheel__text">
    10 000 ars по счету в баре</div>
  <div class="wheel__word">
    <span class="wheel__letter">1</span>
    <span class="wheel__letter">м</span>
    <span class="wheel__letter">е</span>
    <span class="wheel__letter">с</span>
    <span class="wheel__letter">т</span>
    <span class="wheel__letter">о</span>
  </div>
  <div class="wheel__word">
    <span class="wheel__letter">1</span>
    <span class="wheel__letter">м</span>
    <span class="wheel__letter">е</span>
    <span class="wheel__letter">с</span>
    <span class="wheel__letter">т</span>
    <span class="wheel__letter">о</span>
  </div>
  <div class="wheel__word">
    <span class="wheel__letter">1</span>
    <span class="wheel__letter">м</span>
    <span class="wheel__letter">е</span>
    <span class="wheel__letter">с</span>
    <span class="wheel__letter">т</span>
    <span class="wheel__letter">о</span>
  </div>
  <div class="wheel__word">
    <span class="wheel__letter">1</span>
    <span class="wheel__letter">м</span>
    <span class="wheel__letter">е</span>
    <span class="wheel__letter">с</span>
    <span class="wheel__letter">т</span>
    <span class="wheel__letter">о</span>
  </div>
</div>

Но буквы слипаются между собой.

Answer 1

value должен равняться 360 / ДЛИНА_СТРОКИ

Answer 2

Можно что-то такое сделать с SVG

function svginit(x, y, r, i, text, centralText, spanText) {
  let path = `<path id="textcircle${i}"
                d="
                   M ${x}, ${y}
                   m -100, 0
                   a ${r},${r} 0 1,1 ${r*2},0
                   a ${r},${r} 0 1,1 -${r*2},0
                 ">
                 
              <animateTransform
                  attributeName="transform"
                  begin="0s"
                  dur="30s"
                  type="rotate"
                  from="0 ${x} ${y}"
                  to="360 ${x} ${y}"
                  repeatCount="indefinite" 
              />
   </path>`

  let path_text = `<textPath xlink:href="#textcircle${i}">${text}</textPath>`

  const container = document.querySelector('#container');
  const text_container = document.querySelector('#text_cont');

  container.insertAdjacentHTML('beforeend', path);
  text_container.insertAdjacentHTML('beforeend', path_text);
  
  const svg = document.querySelector('svg');
  
  let svg_text = `
  <text x=${x} y=${y} id='centerText'>${centralText}
    <tspan x=${x} y=${y} id='spanText'>${spanText}</tspan>
  </text>`;
  
  svg.insertAdjacentHTML('beforeend', svg_text);
  
  const tx = document.querySelectorAll('text');
  const ts = document.querySelectorAll('tspan');

  let elText = tx[tx.length - 1];
  let elSpan = ts[ts.length - 1];

  let textBox = elText.getBBox();
  let spanBox = elSpan.getBBox();

  elText.setAttribute('x', x - (textBox.width / 2));
  elText.setAttribute('y', y - (textBox.height / 2));
  
  elSpan.setAttribute('x', x - (spanBox.width / 2));
  elSpan.setAttribute('y', y + (textBox.height / 2));

}

svginit(200, 200, 100, 1, '1 место 1 место 1 место 1 место', 'Central Text','spanText')
svginit(500, 200, 100, 2, '2 место 2 место 2 место 2 место', 'Central Text','spanText')
svginit(800, 200, 100, 3, '3 место 3 место 3 место 3 место', 'Central Text','spanText')
svginit(1100, 200, 100, 4, '4 место 4 место 4 место 4 место', 'Central Text','spanText')

svg {
  width: 100%;
}
#c{
  position: absolute;
  width: 90%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
#centerText{
  fill: red;
  font-size: 2em;
}
#spanText{
  fill: blue;
}
svg textPath {
  font-size: 1.8em;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  fill: #111;
  background: #333;
}

<div id='c'>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1300 400">
    <defs id="container"></defs>
    <text id='text_cont'></text>
  </svg>
</div>

БЛОГ НА HUSL

Как сделать круглые буквы, вращающиеся по оси

Ответы (2 шт):