Как сделать текст по кругу

Question

Мне нужно сделать текст по кругу, как на фото: Нужно, чтобы можно было поставить определёный размер всего блока, текст расширялся автоматически по кругу.

Answer 1

Попробуй этот вариант

svg {
    width: 400px;
    height: 400px;
}

<svg viewBox="0 0 500 500">
    <!-- Круг -->
    <circle cx="250" cy="250" r="150" fill="#e9e9e9" />

    <!-- Текст внутри круга -->
    <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" font-family="Arial" font-size="24" fill="black">Текст внутри круга</text>

    <!-- Кривая для текста по окружности -->
    <path id="textPath" d="M 250 250 m -150, 0 a 150,150 0 1,1 300,0 a 150,150 0 1,1 -300,0" fill="none" />

    <!-- Текст, который обвит -->
    <text font-family="Arial" font-size="18" fill="black">
      <textPath xlink:href="#textPath">
      Здесь может быть ваш текст, который обвит вокруг круга.
      Здесь может быть ваш текст, который обвит вокруг круга.
      </textPath>
    </text>
</svg>

Answer 2

Ну что бы каждое слово не разбивать на span мы используем javascript

После этого в css повернём каждый span на 8.3deg

В итоге код будет такой:

let text = document.querySelector(".item p")

text.innerHTML = text.innerText.split("").map((char, i) =>
  `<span style="transform:rotate(${i * 8.3}deg)">${char}</span>`
).join("")

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.circle {
  width: 260px;
  height: 260px;
  position: relative;
  border-radius: 50%;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: consolas;
}

.item {
  width: 100%;
  height: 100%;
  position: absolute;
}

.item span {
  position: absolute;
  left: 50%;
  font-size: 0.9em;
  transform-origin: 0px 130px;
  text-transform: uppercase;
}

<div class="circle">
  <div class="item">
    <p>Лично отбираю участников отбираю участников</p>
  </div>
</div>

БЛОГ НА HUSL

Как сделать текст по кругу

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