Polka-dot pattern SVG. Grid ยท staggered ยท random. Print and web backgrounds.
๐ด Preview
How to use
- Pick layout (grid / staggered / random).
- Set width and height.
- Adjust dot size and spacing.
- Pick dot and background colors.
- Optional size variation for hand-drawn feel.
Key features
- 3 layouts (grid / honeycomb / random)
- Dot size 1โ60 px, spacing 6โ200 px
- 5 presets (classic / red / fine / cosmic / pink)
- Size variation toggle (random hand-drawn feel)
- SVG/PNG, infinite scale
Use cases
- Fashion / clothing design โ polka dots are timeless
- Website backgrounds โ soft and friendly
- Event posters โ 1950s vintage vibe
- Kids' design โ storybooks, education
- Wrapping paper โ gift wrap prints
History of polka dots
Polka dots got their name from the 19th-century polka dance craze. The evenly arranged circles became a visual language of friendliness, joy, and innocence. From 1950s American fashion (Minnie Mouse's red dots, Marilyn Monroe) to 1960s Yayoi Kusama's art โ still a graphic-design classic.
FAQ
What's the staggered (honeycomb) layout?
Like a beehive โ even rows shift by half a column. More natural and visually balanced than a grid.
CSS-only dots?
`background: radial-gradient(circle, #0f172a 10px, transparent 10px) 0 0 / 40px 40px` works but SVG is more precise.
Moirรฉ artifacts?
Tiny dots packed closely cause shimmering. Keep spacing โฅ 3ร dot size.
Free?
Yes.