JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<div class="container">
<p id="text"></p>
<svg viewBox="0 0 500 500">
  <path fill="transparent" id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Dangerous Curves Ahead
    </textPath>
  </text>
</svg>
</div>

CSS

body {

}

.container {
  /*centers in the container*/
  text-align: center;
  font-size: 24px;
}

#text {
  /*allows for centering*/
  display: inline-block;
  /*adjust as needed*/
  margin-bottom: 128px;
}
path {
  fill: transparent;
}

text {
  fill: #FF9800;
}

JavaScript

function circularText(txt, radius, origin=0) {
  txt = txt.split("");

  var deg = 180 / txt.length;

  return txt.map((ea) => {
    ea = `<span style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</span>`;
    origin += deg;
    return ea
  }).join('');
}

console.log(circularText("Welcome ", 70, 290))
document.getElementById('text').innerHTML = circularText("Welcome ", 60, 290);