Circular text made with CSS trigonometric functions

Circular Text with CSS

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…