Overview
Curve a line of text along the top or bottom arc of a circle using native SVG text-on-a-path (a circular `<path>` paired with `<textPath>`), rather than rendering to a canvas and exporting a flat image. Controls cover the circle's radius, the font size and letter spacing of the curved text, a start-offset percentage for rotating where the text begins along the arc, which half of the circle it follows (top arc or bottom arc), and which way it reads around the circle (clockwise or counter-clockwise). Because the output stays as real SVG markup, it scales to any size without pixelation, the underlying text remains selectable and accessible rather than baked into a bitmap, and the exact markup is shown as plain, escaped text for you to copy or download as a standalone .svg file - never dropped into the page unsanitized. Useful for circular logos, badge or stamp designs, album art text, or any circular layout that needs curved lettering without opening a full design tool. Runs entirely client-side.
Best for: Creating curved text for a circular logo, badge, or stamp design
How to use this tool
- Type your text. Enter the text you want curved around a circle.
- Adjust radius, spacing, and arc. Set the circle's radius, font size, letter spacing, start offset, arc half, and direction with live preview.
- Copy or download the SVG. Copy the raw SVG markup, or download it as a standalone .svg file.
Frequently asked questions
Real SVG markup - a circular `<path>` element with the text following it via `<textPath>`. That means it scales to any size without pixelating, the text stays selectable rather than being baked into a bitmap, and you can copy the exact markup or download it as a standalone .svg file rather than a flat PNG.
Yes - toggle between "Top arc" and "Bottom arc" to choose which half of the circle the text follows, and between "Clockwise" and "Counter-clockwise" to control which way it reads along that arc.
Yes - the live preview renders your text through React's own SVG text rendering, which always escapes it, and the copyable SVG markup shown below the preview has the same escaping applied. Your text is never inserted as raw, unescaped markup.