How to Make a Circular Text in React using react-curved-text

In HTML, you can curve text around a circle or inside a circle by using <path>, <text> and <textPath> tags, inside a <svg> element.

For example, this SVG element:

<svg viewBox="0 0 500 500">
  <path id="curve" d="m 20 20 a 30 30 30 1 1 50 50" style="fill: red" />
  <text width="500">
    <textPath xlink:href="#curve">
      curved text
    </textPath>
  </text>
</svg>

will produce this graphics:

In this example, the only real obstacle for the developer is to find the suitable value for the d attribute of the path tag.

d="m 20 20 a 30 30 30 1 1 50 50"

If you are using React.js, curved texts can easily be created using react-curved-text add-on:

To install the library;

using npm:

npm install react-curved-text

Or using yarn:

yarn add react-curved-text

And then you need to import ReactCurvedText component and use it like:

import ReactCurvedText from "react-curved-text";

const MyComponent = () => {
  return (
    <ReactCurvedText
      width={370}
      height={300}
      cx={190}
      cy={120}
      rx={100}
      ry={100}
      startOffset={100}
      text="curved text"
    />
  );
};

export default MyComponent;

It will give you the output:

You can also reverse the curving direction by simply adding reversed prop:

reversed={true}

It will give you the output:

For more information and live examples, you can visit react-curved-text demo page.

You can also try a live example on StackBlitz.

As you can see in the example code, there is no need to find or define any d attribute for an svg path. All you need to do is; define and pass rx (x radius), ry (y radius), cx (center position of x), cy (center position of y), width (width of the SVG), height (height of the SVG), text (the text to be curved) props.