Introduction:
Welcome to this tutorial on creating circular text using SVG and JavaScript! If you have ever wanted to spice up your web projects with dynamic and visually appealing text effects, you are in the right place. This guide will walk you through the process of making text follow a circular path, adapting dynamically to the length of the input.
Things You Will Learn:
By the end of this tutorial, you will have learned:
- How to set up an HTML structure for user input and SVG display.
- How to style your project using basic CSS.
- How to manipulate the DOM and SVG elements using JavaScript.
- How to make text follow a circular path dynamically based on user input.
Video Tutorial:
Do not forget to subscribe to my YouTube channel where I will be sharing my knowledge and expertise to help you master the basics of web development. From writing your first line of HTML to creating beautiful and responsive web pages with CSS and JavaScript, I have got you covered. So, if you’re ready to take your web development skills to the next level, hit the subscribe button and join me on this exciting journey.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. Finally, Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Circular Text</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<textarea
placeholder="Enter some sentence"
maxlength="50"
id="input-text"
></textarea>
<button id="submit">Submit</button>
<div class="container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #3c50e0;
}
.hide {
display: none;
}
.wrapper {
background-color: #ffffff;
width: min(90vw, 500px);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 2em;
}
.container {
border: 1px solid #000000;
text-align: center;
padding: 1em;
width: 100%;
}
.wrapper textarea {
width: 80%;
border: 1px solid #000000;
}
.wrapper button {
position: relative;
width: 18%;
padding: 0.5em 0;
bottom: 10px;
background-color: #3c50e0;
border: none;
color: #ffffff;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
let container = document.querySelector('.container');
let inputText = document.getElementById('input-text');
let submitBtn = document.getElementById('submit');
submitBtn.addEventListener('click', () => {
container.innerHTML = '';
let sentence = inputText.value.trim();
let textLength = sentence.length;
let circleRadius = Math.max(10, textLength);
let containerSize = circleRadius * 2 + 40;
let viewBoxSize = containerSize - 20;
container.innerHTML = `
<svg viewBox = "0 0 ${viewBoxSize} ${viewBoxSize}" width="${containerSize}" height="${containerSize}">
<defs>
<path id="circle" d="M ${viewBoxSize / 2} ${
viewBoxSize - 10
} a ${circleRadius} ${circleRadius} 0 1 1 1 0"/>
</defs>
<text font-size="16">
<textPath xlink:href="#circle" id="text">
${sentence}
</textPath>
</text>
</svg>
`;
});
Conclusion:
Congratulations! You have just created a dynamic circular text effect using SVG and JavaScript. This project not only enhances your understanding of SVG paths and JavaScript DOM manipulation but also gives you a creative tool to add flair to your web projects. Don’t forget to check out the video tutorial for a more detailed walkthrough. Happy coding!
