Polka-dot pattern SVG. Grid · staggered · random. Print and web backgrounds.
🔴 Preview

How to use

  1. Pick layout (grid / staggered / random).
  2. Set width and height.
  3. Adjust dot size and spacing.
  4. Pick dot and background colors.
  5. 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.