Creating Circular Text with HTML, CSS, and JavaScript

2 min readOct 16, 2023

Have you ever seen text arranged in a circle on a website and wondered how it is done? In this blog post, we’ll break down the steps to create circular text using HTML, CSS, and JavaScript. You can use this technique for your web projects or create eye-catching design elements.

The Goal

Our objective is to display a given text in a circle. For this example, we’ll use “Hello World!” Let’s use the text. arrange its characters in a circular pattern around a central point.

Step 1: The HTML Structure

We start by setting up the basic HTML structure. We have an outer container called .parent, which will hold our circular text. This container is centered on the webpage for a neat visual effect.


<body>
    <div class="parent">
    </div>
</body>

Step 2: Adding Some Style

Now, let’s add some CSS styles to make the circular text visually appealing. We give the body a background color and center our .parent container using display: grid. The text color, font size, and positioning are also defined in the CSS.


        body {
            display: grid;
            align-items: center;
            height: 100vh;
            background-color: #48075F;
        }
        .parent {
            margin: auto;
            width: 25vw;
            height: 25vw;
            display: flex;
            position: relative;
        }
        .para {
            width: 10px;
            height: 50%;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            transform-origin: bottom center;
            color: #2ad4f9;
            font-size: 50px;
        }

Step 3: JavaScript Magic

The lifeblood of our circular text project is JavaScript code that dynamically generates and processes text. We start by removing spaces from the input text and calculating the angle at which each character should be positioned. Then, we create p (paragraph) elements for each character and use the transform property to rotate them around the center.


    text = "Hellow world !";
    text = text.replace(/\s/g, "");
    const len = text.length;
    const angle = 360 / len;
    const parent = document.getElementsByClassName('parent')[0];
    for (let i = 0; i < len; i++) {
        paragraph = document.createElement("p");
        paragraph.className = "para";
        paragraph.style = "transform:rotate(" + (360 / len) * i + "deg);";
        charNode = document.createTextNode(text.charAt(i));
        paragraph.appendChild(charNode);
        parent.appendChild(paragraph);
    }

The Result

The result is a visually stunning circular text arrangement that you can use to add a unique touch to your web projects. You can easily modify the input text and styles to suit your needs.

In conclusion, creating circular text is a great way to enhance the visual appeal of your web projects. By combining HTML, CSS, and JavaScript, you can create engaging and artistic design elements that capture the attention of your audience.

I hope you found this tutorial helpful, and feel free to experiment with the code to create your own circular text designs! Happy coding!