Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on October 8, 2022

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

 

 

1
2
3
4
5
6
7
8
9
10
<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/>

 

 

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

 

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
: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;
}

 

 

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

 

 

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

 

 

JavaScript
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

 

 

JavaScript
1
2
3
4
5
6
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 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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

 

 

JavaScript
1
updateCurvedText($curvedText,500);

 

 

Full Javascript Code

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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);

Recent Posts

  • Node.js Tutorial to Export All Pages of PDF Document to Images and Save it in Javascript
  • Node.js OfficeGen Example to Add Text & Images in Powerpoint Presentation in Javascript
  • Node.js OfficeGen Example to Generate Excel Files By Adding Data inside Cells & Sheets in Javascript
  • Node.js OfficeGen Example to Create Word Docx Files & Add Text Images inside it Using Javascript
  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme