About

Generative circle compositions underpin everything from data visualization scatter layers to abstract digital art and texture synthesis. The placement algorithm distributes n circles across a canvas of width W and height H, sampling coordinates from a uniform distribution x ∈ [r, W − r] and y ∈ [r, H − r] to keep every circle fully visible. When non-overlap mode is active, each candidate is tested against all previously placed circles using the Euclidean distance condition d > r₁ + r₂; rejected candidates are re-sampled up to a configurable attempt limit. This rejection sampling approach is O(n²) in the worst case, so extremely dense non-overlap fills will naturally hit the attempt ceiling. The tool does not fake randomness with fixed seeds - each generation pulls from Math.random() and produces a unique composition.

Color modes operate in HSL space because hue rotation in HSL produces perceptually even palettes, unlike raw RGB where random channels skew toward muddy browns. Pastel mode clamps saturation to 50 - 80% and lightness to 70 - 90%. Monochromatic mode locks hue and varies only lightness. Export produces a lossless PNG via Canvas toBlob() or a resolution-independent SVG string. Note: non-overlap mode with high circle counts and large radii on a small canvas will place fewer circles than requested - the tool reports the actual count placed.

Formulas

Each circle is defined by a center coordinate and radius sampled uniformly within the canvas bounds, ensuring the entire circle remains visible:

x = r + rand() ⋅ (W − 2r)

y = r + rand() ⋅ (H − 2r)

r = r_min + rand() ⋅ (r_max − r_min)

where W = canvas width, H = canvas height, r_min and r_max = minimum and maximum radius bounds, and rand() returns a value in [0, 1).

Non-overlap collision detection uses Euclidean distance between two circle centers:

d = √(x₁ − x₂)² + (y₁ − y₂)²

No overlap condition: d > r₁ + r₂

Pastel color generation constrains HSL channels to produce soft tones:

H = rand() ⋅ 360°, S ∈ [50, 80]%, L ∈ [70, 90]%

where H = hue, S = saturation, L = lightness.

Reference Data

Color Mode	Hue Range	Saturation	Lightness	Description
Random RGB	0 - 360°	40 - 100%	30 - 80%	Full spectrum, vivid, high contrast
Pastel	0 - 360°	50 - 80%	70 - 90%	Soft, muted tones suitable for backgrounds
Monochromatic	Fixed base hue	30 - 90%	40 - 90%	Single hue with lightness/saturation variation
Analogous	Base ± 30°	50 - 90%	50 - 85%	Harmonious neighboring hues
Complementary	Base or Base + 180°	50 - 90%	50 - 85%	Opposite hues for maximum contrast
Warm	0 - 60°	50 - 90%	55 - 85%	Reds, oranges, yellows
Cool	180 - 270°	50 - 90%	55 - 85%	Blues, cyans, teals
Grayscale	N/A	0%	20 - 90%	Black to white, no chroma
Custom Single	User-defined	User-defined	User-defined	All circles use one chosen color
Common Canvas Sizes
Instagram Post	1080 × 1080 px
Twitter Header	1500 × 500 px
HD Wallpaper	1920 × 1080 px
4K Wallpaper	3840 × 2160 px
A4 Print (300 DPI)	2480 × 3508 px
Facebook Cover	820 × 312 px
YouTube Thumbnail	1280 × 720 px

Frequently Asked Questions

When non-overlap is enabled, each new circle must satisfy the Euclidean distance condition d > r₁ + r₂ against every already-placed circle. As the canvas fills, finding valid positions becomes exponentially harder. The algorithm allows up to 1000 random attempts per circle before giving up. To place more non-overlapping circles, reduce the maximum radius, increase the canvas size, or both. The tool reports the actual number of circles placed.

Analogous mode restricts hue to a 60° arc around a random base hue (base ± 30°), producing harmonious, low-contrast palettes. Complementary mode alternates between the base hue and its opposite (base + 180°), creating high visual contrast. Both vary saturation and lightness independently.

Opacity (alpha channel) is sampled uniformly between the minimum and maximum values you set, independently of the color mode. At low opacity (0.1 - 0.3), overlapping circles create layered translucent effects. At full opacity (1.0), later circles fully occlude earlier ones. For watercolor-style art, use pastel colors with opacity range 0.15 - 0.4.

Yes. The SVG export produces vector <circle> elements with exact coordinates and radii. Unlike the PNG export which rasterizes at the canvas pixel dimensions, the SVG can be scaled to billboard size without pixelation. Each circle retains its fill color and opacity as inline attributes. The SVG uses a viewBox matching your canvas dimensions.

The tool caps at 10000 circles. Canvas 2D can render this count in under 200ms on modern hardware. With non-overlap mode, practical limits depend on circle sizes and canvas area. A 1920 × 1080 canvas with radius range 5 - 15px can typically fit 3000 - 5000 non-overlapping circles before saturation.

Yes. The chosen background color is painted as the first layer on the canvas before any circles. PNG export captures this. SVG export includes a background <rect> element. If you want a transparent background, select the transparent option; PNG will use alpha transparency and SVG will omit the background rect.