Curved Text Generator JS

curved-text-generator-js.markdown

Curved Text Generator JS

JS function to generate curved text from a HTML text element. This technique make a span element for each letter and rotates it slightly. Generate a circle text by adjusting the font site and circle radius.

Check out MockoFun Online: curved text generator

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<div>
  <fieldset>
    <label>Text:</label>
<input type="text" class="text" value="CURVED TEXT">
    <label>Radius:</label>
<input class="radius" type="range" min="100" max="1000" value="500">
    </fieldset>
</div>
<div class="curved-text">CURVED TEXT</div>
<br/>
<footer>
Check out MockoFun Online: <a href="https://www.mockofun.com/tutorials/curved-text-generator/">Curved Text Generator</a>
</footer>

script.js

import jquery from "https://cdn.skypack.dev/jquery@~3.5.1";
function updateCurvedText($curvedText, radius) {
  $curvedText.css("min-width", "initial");
  $curvedText.css("min-height", "initial");
  var w = $curvedText.width(),
    h = $curvedText.height();
  $curvedText.css("min-width", w + "px");
  $curvedText.css("min-height", h + "px");
  var text = $curvedText.text();
  var html = "";

  Array.from(text).forEach(function (letter) {
    html += `<span>${letter}</span>`;
  });
  $curvedText.html(html);

  var $letters = $curvedText.find("span");
  $letters.css({
    position: "absolute",
    height:`${radius}px`,
    // backgroundColor:"orange",
    transformOrigin:"bottom center"
  });
  
  var circleLength = 2 * Math.PI * radius;
  var angleRad = w/(2*radius);
  var angle = 2 * angleRad * 180/Math.PI/text.length;
  
  $letters.each(function(idx,el){
    $(el).css({
        transform:`translate(${w/2}px,0px) rotate(${idx * angle - text.length*angle/2}deg)`
    })
  });
}

var $curvedText = $(".curved-text");
updateCurvedText($curvedText,500);

function settingsChanged(){
  $curvedText.text($(".text").val());
  updateCurvedText($curvedText,$(".radius").val());
}

$(".radius").on("input change",settingsChanged);
$(".text").on("input change",settingsChanged);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

style.css

:root{
  background:black;
  color:white;
  font-family:monospace;
  overflow:hidden;
}
footer{
  text-align:center;
  position:absolute;
  bottom:0;
  padding:10px;
}
a{
  font-weight:bold;
  color:orange;
}

.curved-text{
  position:relative;
  display:inline-block;
  margin:0 auto;
  font-size:100px;
}

.curved-text span{
  min-width:0.5em;
  text-align:center;
  padding:0;
  margin:0;
}