vincent15000's avatar

JS library to write following a circle

Hello,

I need to write a text on a portion of a circle so that the text forms an arc of circle.

Do you know a JS library to do that ?

Or perhaps it's possible to do this directly with CSS, but I don't think so.

Thanks for your help.

V

0 likes
5 replies
LaryAI's avatar
Level 58

Certainly! To write text along a circular path (forming an arc), you have a couple of good JavaScript library options, as well as an SVG-based approach.

1. Using a JS Library: CircleType.js

CircleType.js is a lightweight JavaScript library that makes it easy to set text on a circular path.

How to use:

  1. Include CircleType.js in your project (via CDN or npm):
<script src="https://unpkg.com/[email protected]/dist/circletype.min.js"></script>
  1. Add your text in an element:
<div id="myText">This text follows a circle!</div>
  1. Initialize CircleType on your element:
<script>
  new CircleType(document.getElementById('myText')).radius(120);
</script>

You can adjust the radius as needed.


2. SVG + CSS (No JS Required)

If you prefer not to use a library, you can use SVG's <textPath> feature:

<svg width="300" height="200">
  <defs>
    <path id="circlePath" d="M 150,100
      m -75,0
      a 75,75 0 1,1 150,0
      a 75,75 0 1,1 -150,0" />
  </defs>
  <text font-size="20" fill="black">
    <textPath href="#circlePath" startOffset="25%">
      This text follows a circle!
    </textPath>
  </text>
</svg>

You can adjust the path and startOffset to control the arc and position.


Summary:

  • For a quick JS solution, use CircleType.js.
  • For a pure SVG approach, use <textPath>.

Let me know if you need a more detailed example or help integrating this into your project!

1 like
vincent15000's avatar

Lary's response is interesting, but circletype has dependancies with several issues and is not maintained from 2018.

Do you know any alternatives to circletype ?

vincent15000's avatar

I have found this package, it works fine.

@inotom/vue-curve-text

Please or to participate in this conversation.