What the dot scatter generator makes
A canvas full of dots, squares, diamonds or triangles placed by one of four rules. Random scatter spreads them evenly with a minimum distance, like a confetti throw that never clumps. Jittered grid starts from neat rows and nudges every dot. Size fade keeps the grid and lets the dots grow toward the center, an edge or one side, the way a halftone fades out. Noise clusters keeps dots only where a seeded noise field is high, so they gather in patches with empty space between. Every position, size and opacity comes from the seed, and the canvas can be a seamless tile.
How designers use scattered dots
- Textures and overlays: a fine stipple or a starfield at low opacity over a gradient or a photo adds grain with more character than plain noise. Make it a seamless tile and let CSS repeat it.
- Halftone fades: a size fade from one side reads as a printed halftone. Use it along the edge of a hero section or behind a quote, in one color on a solid background.
- Decorative backgrounds: bubbles with a two-color blend and opacity variation, or large confetti in brand colors, make a lively but light backdrop for landing pages, posters and social posts.
- Maps and data looks: noise clusters mimic population density or terrain; the SVG pattern generator makes the regular grids that go with them.
How the seamless tile works
With the tile switched on, the canvas is treated as one repeat. A dot that crosses the right edge is drawn again on the left, and one that crosses the bottom is drawn again at the top, with corner dots drawn four times. The random scatter measures distances across the edges, so a dot never lands on the copy of another. Grid modes make the spacing divide the canvas exactly, and the noise field of the cluster mode wraps around after one canvas. A fade from one side to the other would jump at the seam, so in tile mode the size fade and the color blend follow a wave that is the same at both edges: Left and Right put the largest dots along the side edges and the smallest in the middle, Top and Bottom do the same from the top and bottom edges. Center and Edges already match at the seams and stay as they are. The repeated preview shows what a browser will show as a background, and the tile edges overlay marks where one canvas ends and the next begins.
SVG, PNG and CSS
The SVG holds one element per dot with coordinates rounded to two decimals, so a scatter of 200 dots is a few kilobytes and scales without loss. Download it for design programs and websites. The PNG is rendered at the width you choose, with the height following the canvas aspect, and is transparent unless a background color is set. Copy CSS writes the SVG tile as a background-image data URL with its size, for a page or section background. The counter warns above 5,000 elements, where an SVG starts to feel heavy in a browser.
How to use the dot scatter generator
- 1Choose a mode and a shape, or start from a preset such as Confetti or Halftone fade.
- 2Set the number of dots and the smallest and largest size. Pick where the largest dots sit, add jitter in the grid modes, and set the cluster size for noise clusters.
- 3Choose the dot color, an optional second color for a blend, opacity variation and a background. Pick the canvas aspect or type a width and height, and shuffle the seed until the spread looks right.
- 4Keep the seamless tile on for backgrounds, then download the SVG or a PNG, export a repeated area, copy the SVG code, or copy the CSS for your stylesheet.
Frequently asked questions
How does the random scatter keep dots apart?
It throws seeded random positions and keeps a candidate only when it is at least a minimum distance from every dot placed so far, a quick form of Poisson disk sampling. The distance comes from the canvas size and the dot count, so the dots spread evenly without touching. When the canvas is very full, the generator stops after a fixed number of tries, and the count can end up a little below the slider.
What does the tile mode change?
Four things. A dot that crosses an edge is drawn again on the opposite edge, so the picture continues when the canvas repeats. The scatter measures distances across the edges, so no dot lands on top of a copy. The grid spacing and the density noise are made to fit the canvas exactly. And a size fade from one side, or a two-color blend, runs from the edges to the middle and back, so it continues across the seams instead of jumping from one end to the other. Switch on Show tile edges to check the joins in the repeated preview.
Why do some dots disappear in the size fade?
Dots shrink toward the small end of the fade. With a minimum size of 0 they vanish there completely, which is how a halftone fade runs out. Raise the minimum size to keep tiny dots all the way across.
What does the second color do?
With a second color set, each dot gets a blend of the two colors by position. The blend follows the size fade when one is set, so small dots get the first color and large dots the second. Otherwise it runs from the left edge to the right edge, or in tile mode from the side edges to the middle and back, so the tile stays seamless. Clear the field for one color only.
SVG or PNG?
SVG keeps every dot as a vector shape, so the file scales to any size and stays small for a few hundred dots. PNG is a fixed image; export it at the pixel size of the place it goes, or larger. For CSS backgrounds use the SVG tile from Copy CSS.
Can I reproduce a scatter later?
Yes. Everything comes from the seed and the settings, and Copy link puts all of them in the address. The same link always gives the same dots, down to the last pixel.