Skip to content

Instantly share code, notes, and snippets.

@codingdudecom
Created November 18, 2020 12:01
Show Gist options
  • Save codingdudecom/29c9ab69f12c6d72964eb9ce90c87e78 to your computer and use it in GitHub Desktop.
Save codingdudecom/29c9ab69f12c6d72964eb9ce90c87e78 to your computer and use it in GitHub Desktop.
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