JSFiddle - React, Tailwind, and code Playground

by alemarch

JavaScript

function writeInSpiral(phrase, cx, cy, fontSize, aDeg, color) {
    
        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 + aDeg/180*Math.PI
           var x = cx   + (r -i/num*r) *Math.cos(a) 
           var y = cy  + (r -i/num*r)*Math.sin(a)
           $(s).css({"position":"absolute", 
                     left: x + "px", top: y + "px",
                     "fontSize": fontSize - (i/num*20),
                     "transform":"rotate(" + a + "rad)",
                     "color": color})
           console.log(z.charAt(i) + " " + x + "," + y)
        }
    }   
 
z = "Hello, how are you? I hope fine!"
cx = 200
cy = 170
fontSize = 30
$(function(){
    writeInSpiral(z,cx,cy,fontSize,0,"#0000ff")
    writeInSpiral(z,cx,cy,fontSize, 30, "#0000ee")
    writeInSpiral(z,cx,cy,fontSize, 60, "#0000dd")
    writeInSpiral(z,cx,cy,fontSize, 90, "#0000cc")
    writeInSpiral(z,cx,cy,fontSize, 120, "#0000aa")
    writeInSpiral(z,cx,cy,fontSize, 150, "#000099")
    writeInSpiral(z,cx,cy,fontSize, 180, "#000088")
    writeInSpiral(z,cx,cy,fontSize, 210, "#000077")
    writeInSpiral(z,cx,cy,fontSize, 240, "#000066")
    writeInSpiral(z,cx,cy,fontSize, 270, "#000055")
    writeInSpiral(z,cx,cy,fontSize, 300, "#000044")
    writeInSpiral(z,cx,cy,fontSize, 330, "#000033")
})