JSFiddle - React, Tailwind, and code Playground

JavaScript

function writeInCircle(phrase, cx, cy, fontSize) {
    
        var d = $("<div>").addClass("writeInCircle").appendTo("body")
        
        var num = phrase.length
        var r = num * fontSize / 6
        
        $(d).css({position:"absolute",
                   width: (2*r) + "px",
                  height: (2*r) + "px",
                  left: (cx-r) + "px",
                  top:  (cy-r) + "px"})
        for (var i=0; i < num; i++) {
           var s = $("<span>").html( phrase.charAt(i)).appendTo(d)
           a = i/num *2*Math.PI
           var x = cx   + r*Math.cos(a) 
           var y = cy  + r*Math.sin(a)
           $(s).css({"position":"absolute", 
                     left: x + "px", top: y + "px",
                     "fontSize": fontSize,
                     "transform":"rotate(" + a + "rad)"})
           console.log(z.charAt(i) + " " + x + "," + y)
        }
    }   
 
z = "Dummy Data"
cx = 100
cy = 50
fontSize = 30
$(function(){
    writeInCircle(z,cx,cy,fontSize)
})