About

A word spiral maps characters along an Archimedean spiral path defined by r = a + bθ, where the gap between successive turns is controlled by the growth factor b. Each glyph is rotated to align with the local tangent vector, producing the illusion of text flowing naturally along a curve. Getting the character spacing wrong causes either unreadable overlap at inner turns or wasteful gaps at outer turns. This tool solves that by computing adaptive angular steps: the increment Δθ at each point is proportional to the measured character width divided by the current radius, so density stays visually uniform from center to edge.

The renderer operates entirely on an HTML Canvas element. No server processing, no font rasterization service. The spiral supports both clockwise and counter-clockwise winding, variable turn counts, and arbitrary repetition of the source text to fill the available path length. Results export as lossless PNG at the canvas resolution. Note: glyph metrics depend on the browser's font engine, so minor visual differences may appear across operating systems.

Formulas

The Archimedean spiral in polar coordinates:

r=a+bθ

Converting to Cartesian coordinates for canvas placement:

x=r⋅cos(θ) y=r⋅sin(θ)

The tangent angle at any point, used to rotate each glyph so it follows the curve:

φ=atan2(dydθ, dxdθ)

Adaptive angular step to maintain uniform visual density:

Δθ=w_char+sr

Where a is the initial radius, b is the growth factor per radian, θ is the current angle, w_char is the measured pixel width of the current character, and s is the user-defined extra letter spacing.

Reference Data

Parameter	Symbol	Range	Default	Effect
Initial Radius	a	5 - 80 px	20	Distance from center to first character
Growth Factor	b	2 - 30 px/rad	8	Spacing between successive spiral arms
Number of Turns	n	1 - 20	5	Total revolutions of the spiral
Font Size	-	8 - 48 px	16	Glyph height along the path
Letter Spacing	s	0 - 20 px	2	Extra gap inserted between characters
Direction	-	CW / CCW	CW	Clockwise or counter-clockwise winding
Canvas Size	-	300 - 1200 px	600	Output image dimensions (square)
Text Color	-	Any hex	#3C3654	Fill color for all glyphs
Background	-	Any hex / transparent	Transparent	Canvas background fill
Font Family	-	5 options	Georgia	Typeface used for rendering
Max Theta	θ_max	2π - 40π	10π	Derived from turn count
Tangent Angle	φ	Computed	-	Each character rotated to path tangent

Frequently Asked Questions

At small values of θ, the radius r is very small, so the arc length per radian is tiny. The adaptive step Δθ = (w + s) / r compensates, but if the font size exceeds the initial radius a, physical overlap is unavoidable. Increase the Initial Radius or decrease the Font Size to resolve this.

The growth factor b controls the gap between adjacent arms of the spiral measured in pixels per radian. A value of 8 means each full revolution adds roughly 50 px (8 × 2π) to the radius. Setting b too low causes arms to merge; setting it too high wastes canvas space with few turns visible.

Yes, but glyph width measurement depends on the browser's Canvas measureText API. Most modern browsers handle emoji correctly. However, composite emoji (flags, skin-tone modifiers) may render as multiple glyphs. Monospaced fonts produce the most predictable results with special characters.

The PNG matches the Canvas Size parameter exactly, pixel for pixel. For print at 300 DPI, a 1200 px canvas yields a 4-inch square image. The export uses lossless PNG compression with an alpha channel if the background is set to transparent.

Font metrics vary between rendering engines. Chrome and Firefox may report different values from measureText for the same font at the same size, causing slight differences in character placement. The spiral geometry itself is deterministic; only glyph widths introduce variation.

The renderer loops through the input string cyclically. When it reaches the last character, it wraps to the first. A separator space is inserted between repetitions to prevent words from merging. The loop terminates when θ exceeds θ_max = n × 2π.