About

Placing text along a spiral curve requires solving an arc-length parameterization problem on the Archimedean spiral defined by r = a + bθ. Uniform character distribution demands numerical integration of the arc-length differential, not naive angle stepping. Naive angle increments produce text that clusters near the center and stretches at the periphery. This tool computes per-character placement by inverting the cumulative arc-length function, then rotates each glyph tangent to the curve. Approximation error stays below 0.5px for typical inputs.

The generator handles Unicode, adjusts for variable glyph widths via Canvas measureText, and supports both clockwise and counter-clockwise winding. Export resolution matches the canvas at 1× device pixel ratio. For print use, increase font size above 24px to maintain legibility after rasterization. Note: extremely long strings with tight spacing may overlap near the spiral origin where curvature is highest.

Formulas

The Archimedean spiral in polar coordinates:

r=a+bθ

Converting to Cartesian coordinates for canvas placement:

x=rcos(θ), y=rsin(θ)

The arc-length differential for the Archimedean spiral:

dsdθ=√r² + b²

To place the k-th character, we find θ_k such that the cumulative arc length equals the sum of preceding glyph widths plus gaps:

s_k=k−1∑i=0(w_i+g)

The tangent angle at each point for glyph rotation:

ψ=atan2(rcosθ+bsinθ, −rsinθ+bcosθ)

Where a is the initial radius, b is the expansion rate per radian, θ is the angle parameter, w_i is the measured width of character i, g is the extra character gap, and ψ is the tangent angle used to rotate each glyph.

Reference Data

Parameter	Symbol	Default	Range	Effect
Initial radius	a	20px	0 - 100	Gap at spiral center
Expansion rate	b	8px/rad	2 - 30	Distance between successive turns
Character gap	g	4px	0 - 20	Extra spacing between glyphs
Font size	-	18px	8 - 72	Glyph height
Max turns	N	10	1 - 30	How many revolutions the spiral makes
Direction	-	CW	CW / CCW	Clockwise or counter-clockwise winding
Start angle	θ₀	0°	0 - 360	Rotation offset of entire spiral
Repeat text	-	On	On / Off	Tile text to fill all available arc length
Text color	-	#2D3748	Any	Glyph fill color
Background	-	#FFFFFF	Any / Transparent	Canvas background
Canvas size	-	600×600px	300 - 1200	Output image dimensions
Font family	-	Sans-serif	5 options	Typeface selection

Frequently Asked Questions

Near the origin the curvature radius is small, so each arc segment subtends a large angle. If your font size exceeds the local spacing between turns (controlled by expansion rate b), glyphs will collide. Increase b or a, or reduce font size. A safe rule: keep font size below 2b.

Equal angle stepping places characters at fixed Δθ increments. Because the radius grows linearly, outer segments are physically longer than inner ones, producing uneven letter spacing. Arc-length parameterization integrates dsdθ = √r² + b² numerically to find the θ value that yields a desired path distance, ensuring uniform visual spacing.

The exported PNG resolution equals the canvas pixel dimensions. For 300DPI print at 4in width, set canvas size to 1200px and font size proportionally. The tool supports up to 1200×1200px canvas. For larger outputs, use the PNG in a vector editor and trace.

The spiral path length is finite, determined by max turns N and expansion rate b. Total arc length grows roughly as πbN². If your text (accounting for glyph widths and gaps) exceeds this, it truncates. Enable "Repeat text" off and increase turns, or reduce font size and gap.

The tangent vector to the spiral at angle θ is the derivative of the position vector. For the Archimedean spiral, dx/dθ = bcosθ − rsinθ and dy/dθ = bsinθ + rcosθ. The rotation angle is atan2 of these components. Each glyph is rotated by this angle so its baseline follows the curve.

No. When transparent background is selected, the canvas is cleared without a fill, leaving the alpha channel at 0. Text is rendered with full opacity onto this transparent layer. The exported PNG preserves alpha. Some image viewers show transparent areas as a checkerboard pattern.