About

Placing text along a circular path requires precise angular distribution. Each character at index i is rotated by θ_i = θ₀ + i ⋅ δ, where δ is the angular step derived from letter spacing and radius. Get the spacing wrong and characters overlap or scatter with uneven gaps. This tool computes the geometry in real time and produces production-ready SVG using <textPath> elements or rasterized PNG via Canvas. It assumes a monospaced angular step. Variable-width fonts will show slight visual unevenness at small radii.

Formulas

Each character is placed at angle θ_i measured from the top of the circle:

θ_i = θ₀ + d ⋅ i ⋅ φn

The Cartesian position of each character center on the canvas:

x_i = c_x + r ⋅ cos(θ_i − 90°)

y_i = c_y + r ⋅ sin(θ_i − 90°)

Where θ₀ = start angle, d = direction multiplier (1 for CW, −1 for CCW), φ = total arc coverage in degrees, n = character count, r = radius, and (c_x, c_y) = canvas center. The −90° offset places index 0 at the top (12 o'clock position). Each character is then individually rotated by θ_i so its baseline is tangent to the circle.

Reference Data

Parameter	Symbol	Range	Default	Effect
Radius	r	40 - 300 px	120	Circle size; smaller radius = tighter curve
Font Size	f	8 - 72 px	20	Character height; must be proportional to r
Letter Spacing	δ	0.3 - 3.0 °/ch	1.0	Angular gap multiplier between characters
Start Angle	θ₀	0 - 360 °	0	Rotation offset for the first character
Direction	-	CW / CCW	CW	Clockwise or counter-clockwise text flow
Arc Coverage	φ	30 - 360 °	360	Total arc span the text occupies
Text Color	-	Any hex	#2D2548	Fill color of each character
Background	-	Transparent / Color	Transparent	PNG background fill
Font Family	-	System fonts	sans-serif	Typeface applied to each glyph
Repeat Text	-	On / Off	Off	Tile the string to fill the entire arc
Canvas Size	-	200 - 800 px	400	Output image dimensions (square)
Kerning Compensation	-	0 - 5 px	0	Extra angular offset per character width

Frequently Asked Questions

The angular step between characters is fixed. When the radius decreases, the arc length per degree shrinks proportionally (arc = r × θ in radians). If the font size exceeds this arc length, glyphs collide. Either reduce font size or increase the radius until the arc gap per character exceeds roughly 1.2× the glyph width.

In clockwise mode the SVG follows the arc in the positive sweep direction. Counter-clockwise reverses the sweep flag in the arc path definition, which mirrors the reading order. The start angle is adjusted accordingly so the first character still appears at the user-specified position.

Not with a fixed angular step. This tool uses uniform angular distribution, which works well for monospace and most sans-serif typefaces. For proportional fonts like Times New Roman, narrow characters (i, l) will appear to have extra space while wide characters (W, M) may crowd. The kerning compensation slider can partially offset this, but true per-glyph metric spacing would require measuring each glyph via Canvas measureText, which adds complexity without guaranteeing visual perfection on curved baselines.

SVG output uses a element referencing a circular arc path. It is resolution-independent and can be scaled to any size without quality loss. PNG output rasterizes the text onto a Canvas at the specified pixel dimensions. Use SVG for print and scalable graphics. Use PNG for social media or applications that do not support SVG.

Yes. Setting arc coverage to 180° distributes all characters across a semicircle. The remaining 180° is blank. If Repeat Text is enabled, the string tiles to fill the entire specified arc. A coverage of 360° with repeat produces a continuous ring of text.

The internal 90° offset rotates the coordinate system so that 0° points to the 12 o'clock position instead of the 3 o'clock position (the mathematical default for cosine). When you set start angle to 0°, the first character appears at the top. A start angle of 90° moves it to the 3 o'clock position. This matches the intuitive clock-face mental model.