Circular text made with CSS trigonometric functions

Circular Text with CSS

Jhey Tompkins
7 min readFeb 18, 2023

--

Have you ever wanted to lay out some text in a circle but it felt like a lot of prodding in the dark? How might you do it today? Could you do it with CSS alone in an accurate way? Let’s take a look at a new way 👀

How you might solve this today

You’ve definitely got options. Before we go down the CSS route, you could use images. The least maintainable route could be creating an image each time you need to change the text. Make sure to use the `alt` attribute to describe the text that’s shown.

Circular text generated in Figma

The SVG generated in Figma, creates a path for each letter individually based on their position.

Or you could use an inline SVG. SVG has a textPath element. For the most part, it’s pretty good. You give it some text and a path to lay that text on.

<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="circlePath"
d="
M 10, 50
a 40,40 0 1,1 80,0
40,40 0 1,1 -80,0
"
/>
<text>
<textPath href="#circlePath">
Your text here!
</textPath>
</text>
</svg>

This route does pose a couple of hurdles. First, you need a path. You can’t pass a reference to a circle. That means converting a circle to a path.

<path
d="
M (CENTER_X - RADIUS),CENTER_Y
a RADIUS,RADIUS 0 1,1 (2 * RADIUS),0
RADIUS,RADIUS 0 1,1 (-2 * RADIUS),0
"
/>

Next, you need to choose whether you use the textLength attribute of textPath. This can spread the text around the path. The value of this will be the circumference.

<textPath
href="#circularPath"
textLength={Math.floor(Math.PI * 2 * RADIUS)}
>
Your text here!
</textPath>

Put everything together and you’ll get something like this.

--

--