A browser-based dot pattern generator. Create halftone-style patterns with gradients, randomization, and animation — export as SVG or PNG.
Patterns
- Linear, Diagonal, Hex, Circles (concentric rings), Sunflower (phyllotaxis / golden angle), and Wave
- Wave pattern has Amplitude and Wavelength controls (both in multiples of spacing)
Appearance
- Dot color and background color (with transparent option)
- Dot size, spacing, and canvas size controls
Gradient
- Fades dot size across the canvas
- 8 directional modes: cardinal (←→↑↓) and diagonal (↖↗↙↘)
- Radial mode — fades outward from center or inward from edges
Randomize
- Clusters mode — value noise creates smooth zones of size variation (organic, not per-dot)
- Per dot mode — each dot gets an independent random size
- Amount slider + Reshuffle button
Animation
- Linear — a size wave sweeps across in any of 8 directions
- Radial — rings pulse outward or inward from center
- Random — each dot oscillates independently (organic shimmer)
- Speed, Amplitude (how far dots shrink toward zero), and Wavelength (distance between wave peaks) controls
- Easing: None, In, Out, In/Out
Open index.html directly in a browser, or serve it locally:
python3 -m http.server 3456Then visit http://localhost:3456.
No build step, no dependencies.
| Format | Notes |
|---|---|
| SVG | Flat individual circles — works in Figma, Illustrator, and browsers |
| PNG | Rasterized at canvas size |
| Animated SVG | SMIL-based, one <animate> per dot with phase offset |
Current
- Wave pattern — each row follows a sine curve; Amplitude and Wavelength controls
- Sunflower pattern (phyllotaxis / golden angle arrangement)
- Radial gradient mode (outward / inward)
- Renamed old Radial pattern to Circles (concentric rings)
- Gradient, Randomize, and Animation controls now hidden when toggled off
- Canvas size moved into Appearance section
- SVG export always uses flat individual circles (Figma-compatible)
v3 — Animation
- Linear, Radial, and Random animation types
- Speed, Amplitude, Wavelength, and Easing controls
- Animated SVG export (SMIL)
- 8-direction compass rose for gradient and animation (diagonal directions added)
v2 — Gradient & Randomize
- Directional gradient with 4 cardinal directions
- Clusters and Per dot randomization modes
v1 — Initial release
- 4 pattern types: Linear, Diagonal, Hex, Radial
- Dot color, background color, dot size, spacing, canvas size
- SVG and PNG export
MIT © 2026 Kemie Guaida