About

Binary circle art encodes information as concentric rings of 0 and 1 characters placed at polar coordinates. Each ring of radius r holds n characters spaced at angular intervals of 2πn radians. Misconfigured density produces illegible overlap. Poorly chosen contrast ratios render output unusable in print or on screens. This tool computes exact placement geometry, enforces minimum spacing constraints, and previews results in real time before export.

You can supply raw binary, random sequences, or convert arbitrary text to its UTF-8 binary representation. The tool maps each bit to a ring position, producing art that is both visually structured and data-faithful. Exported SVG files preserve vector sharpness at any scale. PNG export rasterizes at the canvas resolution you configure. Note: character legibility degrades when ring density exceeds approximately 200 characters at font sizes below 6px.

Formulas

Each character on ring k is placed using polar-to-Cartesian conversion. The radius of ring k is computed as:

r_k = r₀ + k ⋅ s

where r₀ is the starting radius and s is ring spacing. The angular position of character i on ring k with n_k characters is:

θ_i = 2π ⋅ in_k + ω_k ⋅ t

where ω_k is the angular velocity for animation and t is elapsed time. Cartesian coordinates for rendering:

x = c_x + r_k ⋅ cos(θ_i)

y = c_y + r_k ⋅ sin(θ_i)

where (c_x, c_y) is the canvas center. When auto-density is enabled, characters per ring are calculated to maintain minimum arc spacing d_min:

n_k = floor(2π ⋅ r_kd_min)

Text-to-binary conversion encodes each character as its UTF-8 code point in 8-bit binary representation: char → charCodeAt(0).toString(2).padStart(8, "0").

Reference Data

Parameter	Default	Range	Effect
Canvas Size	600px	200 - 2000px	Output resolution and visual area
Number of Rings	5	1 - 30	Concentric layers of binary characters
Ring Spacing	30px	10 - 100px	Radial distance between adjacent rings
Characters per Ring	40	6 - 300	Density of digits on each ring
Font Size	12px	4 - 48px	Character legibility and visual weight
Rotation Mode	Radial	Radial / Tangential / None	How each character is oriented along the ring
Color: Zeros	#6C8EBF	Any hex color	Fill color for 0 characters
Color: Ones	#A3D9A5	Any hex color	Fill color for 1 characters
Background	#FFFFFF	Any hex / transparent	Canvas background fill
Data Source	Random	Random / Text / Custom	How binary string is generated
Animation Speed	0	0 - 100	Ring rotation speed (0 = static)
Starting Radius	40px	10 - 500px	Radius of innermost ring
Auto-Density	On	On / Off	Auto-calculate chars per ring based on circumference
Opacity	1.0	0.1 - 1.0	Global character opacity
Font Family	Monospace	Monospace / Serif / Sans	Typeface for binary digits

Frequently Asked Questions

Auto-density computes characters per ring as floor(2π · r_k / d_min), where d_min equals approximately 1.5× the font size. Inner rings with smaller radii receive fewer characters, maintaining legible spacing. Outer rings with larger circumferences receive proportionally more. This prevents the common problem of fixed character counts creating unreadable clusters near the center.

Each character is converted to its Unicode code point via charCodeAt(0), then rendered as an 8-bit binary string padded with leading zeros. For example, the letter "A" (code point 65) becomes "01000001". Characters with code points above 255 use 16-bit representation. The resulting binary string is distributed sequentially across rings from innermost to outermost.

SVG export reconstructs the artwork as vector text elements rather than rasterizing the canvas. Font rendering differences between the browser's Canvas API and the SVG text engine can cause slight spacing variations. The SVG uses the same polar coordinates and rotation transforms but relies on the viewing application's font metrics. For pixel-perfect fidelity, use PNG export.

Each ring k receives an angular velocity ω_k = baseSpeed × (1 + k × 0.15) × direction, where direction alternates between +1 and −1 for adjacent rings. This creates a counter-rotating visual effect. The animation loop uses requestAnimationFrame with a delta-time accumulator to ensure consistent speed regardless of frame rate. Setting speed to 0 produces a fully static image.

Canvas elements support up to roughly 16,384 × 16,384 pixels in most browsers, though memory constraints may lower this. At 2000px canvas size, a PNG export typically produces a 2-5 MB file depending on complexity. For print at 300 DPI, a 2000px canvas yields approximately 6.7 inches (17 cm) across. Use SVG export for resolution-independent output suitable for large-format printing.

When using Text mode, the binary string faithfully represents the input text in UTF-8 binary. However, this is a visual encoding without error correction or structured framing. It is not a substitute for QR codes or barcodes. The pattern is decorative and educational. Recovering the original text requires knowing the exact ring layout parameters and reading order.