Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Curved Text Generator JS

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.

<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>
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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
: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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment