Circle Text Generator

“Circle text” means two different things. This page bends a line of words around a circle, the way a coin, a cork stamp or a coffee-shop logo does. That layout is a picture: you can download it and place it, but you cannot paste it into a text box and keep the curve.

The other kind puts each letter inside its own little circle, like Ⓗⓔⓛⓛⓞ. Those are Unicode characters, so they paste into bios, usernames and messages. For that, use the text bubble generator.

Text on a circle is measured in degrees. A line of text L pixels long, laid along a circle of radius r, covers L ÷ r radians, which is L ÷ r × 57.3 degrees. The status line under the preview shows that number for your text, so you can see how close you are to the 180° of a top half or the 360° of the whole circle.

Worked example. Say the top line of a seal measures 420 px and the bottom line 190 px, on a circle with a radius of 150 px. The top covers 420 ÷ 150 = 2.8 radians, or 160.4°. The bottom covers 190 ÷ 150 = 1.27 radians, or 72.6°. Together that is 233°, which leaves 127° spare: about 63.5° on each side, plenty of room for a star between the two lines.

If a 600 px line has to fit across the top half of that same circle, the half circle is π × 150 = 471.2 px long. Either shrink the letters by 471.2 ÷ 600, so 30 px type becomes 23.6 px, or grow the circle until its half is 600 px long: a radius of 600 ÷ π = 191 px.

“Circle size” on this page is the radius of the middle of the lettering, not the outer edge, so the sums above work directly with it. The outer ring sits a little further out, and the downloaded image is sized to fit everything with a small margin.

If you write all the way round a circle in one direction, the words at the bottom end up upside down. That is fine for a ring of repeated words, but a seal with a name across the top and a date across the bottom needs both lines to read normally.

The fix is to run the two lines in opposite directions. The top line goes clockwise with the feet of the letters pointing at the centre. The bottom line goes anticlockwise with the tops of the letters pointing at the centre, so it reads left to right.

There is a second, quieter problem. Letters stand on their baseline. If both lines used the same circle as their baseline, the top letters would sit outside it and the bottom letters would hang outside it too, so the bottom line would sit a whole letter height further out. This page puts the top baseline half a capital height inside the circle and the bottom baseline half a capital height outside it, so both lines fill the same band and the rings fit neatly round both. The capital height is measured from the font you pick, which is roughly 0.7 of the letter size for most fonts.

Side marks (★ by default) go in the middle of each gap between the two lines. They are left out when the gaps are too narrow to hold them.

“All the way round” spreads the text over the whole circle with equal gaps, including the gap where the end meets the start. The spare length is shared out evenly: extra space per letter = (circumference − text length) ÷ number of letters, with spaces and separators counting as letters.

Worked example. Suppose “SCROLL DOWN • ” measures 260 px at your letter size and the circle has a radius of 120 px. The circumference is 2 × π × 120 = 754.0 px. 754 ÷ 260 = 2.9, so with Repeat to fill on, two copies fit (520 px). The remaining 234.0 px is shared between 28 slots (14 per copy), so each letter gets 8.4 px of extra space.

Many circle text tools fit a phrase to a circle by stretching it. SVG has a textLength setting that, with lengthAdjust="spacingAndGlyphs", widens or squashes the letters themselves until the text fills the path. Short words end up fat and long ones skinny. This page only ever changes the space between letters, so the letters keep the proportions the font designer gave them.

With “Letters face the centre” ticked, the ring runs anticlockwise instead, so the words read the right way up along the bottom and upside down at the top. Use it when the bottom of the badge is where people will look first, such as a sticker on the lower corner of a page.

The SVG keeps your words as real text, one <text> element per letter, each turned to its place on the circle. Placing letters one by one is what lets the bottom line read upright and keeps every app showing the same layout, because it does not rely on each program’s own text-on-a-path support. The catch is that the font has to be on the computer that opens the file. The four fonts here are ones most Windows and Mac computers already have (Georgia, Arial, Impact and Courier New); on a phone or Linux machine without them, a similar font is used instead and the spacing can shift slightly.

For a cutting machine or a print shop, turn the letters into outlines so the font no longer matters. In Inkscape, open the SVG, select everything and choose Path › Object to Path. In Adobe Illustrator, choose Type › Create Outlines. The PNG does not have this problem: it is drawn by your browser with the font it has, then saved as pixels.

300 pixels per inch is a common target for print. The largest PNG here, 4096 px, prints sharply up to 4096 ÷ 300 = 13.6 inches (347 mm) wide. For anything bigger, send the SVG.

Rotating rings of text (“SCROLL • DOWN •”, “OPEN • 7 DAYS •”) are a common website decoration. Tick “Spin slowly” and the SVG carries its own CSS animation: one turn every 20 seconds, with a prefers-reduced-motion rule that stops it for visitors who have asked their device for less motion. Only the ring turns; the centre text and the rings stay still. Because it is CSS rather than script, it keeps working when the file is used as a plain <img>. The PNG is always still.

Reduced motion is not the whole story. WCAG 2.2 success criterion 2.2.2 says moving content that starts by itself, lasts more than five seconds and sits alongside other content needs a way for the user to pause, stop or hide it. A spinning badge never ends, so if your site follows WCAG, download it without spin and turn the image with CSS on your page instead, where you can add a pause button:

A button that toggles is-paused on the image gives everyone, including keyboard users, the control the criterion asks for. Pausing on hover alone does not, because it only helps people using a mouse.