Javascript Project to Build 2D & 3D Curved Text Generator in Browser Using HTML5 & CSS3

Welcome folks today in this blog post we will be building a curved text generator web app in browser using html5 css3 and javascript. All the full source code of the application is shown below

Get Started

In order to get started you need to make an index.html file and copy paste the following code

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/>

<div>

<label>Radius:</label>

</fieldset>

</div>

<div class="curved-text">CURVED TEXT</div>

<br/>

So here you can see in the html we have a simple label of text and also a input field where we will write the actual text to be converted to curved text and also we will have a slider of radius to increase or decrease the curve angle of the text.

This will look something like this as shown above. Now we need to apply some custom css inside it. Just make a style.css file and copy paste the below styles

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;
}

:root{

background:black;

color:white;

font-family:monospace;

overflow:hidden;

}

footer{

text-align:center;

position:absolute;

bottom:0;

padding:10px;

}

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;

}

Now if you open the application inside the browser you will see the below screenshot

Now we will write the javascript code for this application. For this guys we also need jquery library. Simple include the cdn of jquery as shown below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="app.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="app.js"></script>

Now we will be writing the app.js file to actually make the text curvy

First of all we will be attaching the event listener to both the input field and the slider widget. When the value changes for both the fields we will be executing the settingsChanged() function as shown below in the code

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

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

Now we need to define this method to actually update the values inside the application

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

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

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

function settingsChanged(){

$curvedText.text($(".text").val());

updateCurvedText($curvedText,$(".radius").val());

}

As you can see we are initializing the curvedText value to whatever the user has written inside the input field and also we are calling the function which will actually curved the text for us. In this function of updatedCurveText() we are passing two arguments first is the text and second is the radius which is coming from slider

Now we need to define this function to curve the input text

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)`
    })
  });
}

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)`

})

});

}

Here in this block of code we are also using css transform properties to actually carry out the process of curving the text and also applying the dynamic radius value which the user selects from the slider. And also we are curving to the passed angle. So we are using dynamically changing the css properties not using any third party animation library to do this process of curving the text. If you execute the app it will look something like this as shown below

And also when we load the application for the very first time we can also call this very same function providing static text and static value of radius and the angle to curve the text as shown below

updateCurvedText($curvedText,500);

1	updateCurvedText($curvedText,500);

Full Javascript Code

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);