A browser-based dot pattern generator. Create halftone-style patterns with gradients, randomization, and animation — export as SVG or PNG.
Patterns
- Linear, Diagonal, Hex, and Radial grid arrangements
Appearance
- Dot color and background color (with transparent option)
- Dot size and spacing controls
Gradient
- Fades dot size from full to zero across the canvas
- 8 directions via compass rose: cardinal (←→↑↓) and diagonal (↖↗↙↘)
Randomize
- Clusters mode — value noise creates smooth zones of larger and smaller dots (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 | Individual circles — works in Figma, Illustrator, and browsers |
| PNG | Rasterized at canvas size |
| Animated SVG | SMIL-based, one <animate> per dot with phase offset |
MIT © 2026 Kemie Guaida