About

Circular text layout requires precise trigonometric placement of individual glyphs along an arc. Each character must be rotated tangent to the curve at its placement angle θ, computed from the cumulative arc length divided by the circle radius r. Getting the math wrong produces overlapping characters, uneven spacing, or text that drifts off the path. This tool calculates per-glyph advance widths using canvas font metrics and distributes them proportionally around the circumference C = 2πr, handling variable-width fonts correctly.

The generator supports dual arcs (top and bottom text with independent curvature), adjustable letter spacing, radius control, and rotation offset. Output renders at 2× resolution for retina displays. Note: kerning pairs are not accounted for - results approximate professional typesetting but do not replace dedicated vector software for production print work.

Formulas

Each character is positioned along the circle circumference using polar-to-Cartesian conversion. The placement angle for character i depends on the cumulative arc length of all preceding characters.

x_i = c_x + r ⋅ cos(θ_i)

y_i = c_y + r ⋅ sin(θ_i)

The angle for each character is computed from its arc position:

θ_i = θ_start + s_ir

where s_i is the cumulative arc length up to character i, computed as:

s_i = i∑k=0 (w_k + δ)

where w_k is the advance width of character k measured via measureText(), δ is the user-defined letter spacing in pixels, r is the circle radius, c_x and c_y are the center coordinates, and θ_start is the rotation offset. Each glyph is additionally rotated by θ_i + π2 to remain tangent to the arc. For bottom-arc text, the glyph rotation is flipped by π radians and the winding direction reverses.

Reference Data

Preset	Top Text	Bottom Text	Font	Radius	Use Case
Classic Stamp	OFFICIAL SEAL	APPROVED	Serif	140px	Document seals, notary stamps
Badge Design	PREMIUM QUALITY	ESTABLISHED 2024	Sans-serif	130px	Product badges, labels
Logo Arc	MOUNTAIN BREWING CO	CRAFT BEER	Serif	150px	Brand logos, merchandise
Sports Team	THUNDERBOLTS	FOOTBALL CLUB	Sans-serif Bold	120px	Team emblems, jerseys
Vintage Label	HAND CRAFTED	SINCE 1985	Serif	135px	Retro product labels
University Seal	UNIVERSITY OF SCIENCE	KNOWLEDGE IS POWER	Serif	160px	Academic crests, diplomas
Cafe Stamp	ARTISAN COFFEE	ROASTED DAILY	Sans-serif	110px	Coffee shop branding
Minimal Ring	HELLO WORLD		Monospace	100px	Simple decorative text
Event Badge	ANNUAL CONFERENCE	2025 EDITION	Sans-serif	125px	Event passes, tickets
Marine Emblem	OCEAN EXPLORERS	DEEP SEA DIVISION	Serif Bold	145px	Maritime organizations
Fitness Brand	IRON STRENGTH	NO EXCUSES	Sans-serif Bold	115px	Gym logos, apparel
Bakery Seal	FRESH BAKED GOODS	FAMILY RECIPE	Serif	130px	Bakery packaging

Frequently Asked Questions

The total arc length available is C = 2πr. If the sum of all character widths plus spacing exceeds C, glyphs overlap. Increase the radius, reduce font size, reduce letter spacing, or shorten your text. The tool shows a warning when text exceeds available arc space.

Each character's advance width is measured individually using the Canvas measureText() API with the selected font. Variable-width fonts like serif and sans-serif produce uneven angular spacing between characters (correct behavior). Monospace fonts produce perfectly even spacing. The arc distribution adapts automatically.

The canvas renders at 2× the displayed size (devicePixelRatio scaling). A 400×400 displayed circle exports as 800×800 pixels. For print at 300 DPI, this covers approximately 2.7 inches. For larger print formats, increase the radius slider to its maximum before exporting.

Yes. Leave the bottom text field empty. The tool renders only populated arcs. You can also leave the top empty and use only the bottom arc, or use both simultaneously.

Bottom-arc text is intentionally rotated by π radians so characters remain readable (feet pointing toward center). This is the typographic convention for circular seals and badges. The winding direction also reverses (clockwise to counter-clockwise) so left-to-right reading order is preserved.

The letter spacing control (δ in pixels) applies uniformly to both arcs. Each arc computes its own cumulative arc length using the same δ value. To visually balance arcs with different character counts, adjust spacing until both arcs appear proportionally filled.