Skip to content
Musterli
Support
Backgrounds

Dot Wave Grid

A grid of dots, squares or dashes that swell and shrink with a wave or noise field. Animated with a GPU shader, as PNG up to 8K, seamless GIF loop or live code for your website.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Dot Wave Grid

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A dot wave grid is a regular grid of small shapes whose size follows an invisible field. Where the field is high, the dots grow; where it is low, they shrink or vanish. That gives the calm, technical look you know from AI and developer websites. Musterli computes the field with a shader in your browser, so the grid can move smoothly and nothing leaves your device.

What you can use it for

  • Hero sections for tech products

    A quiet, moving dot grid behind a headline signals precision without stealing attention. Paste it as a Web Component, React component or HTML.

  • Slides and keynotes

    As a dark background with light dots, the grid frames charts and quotes. Export it in the exact slide size.

  • Print and posters

    With a fixed moment and squares or crosses, the grid looks like a modern halftone, sharp up to 8K.

How it works

Pick a field (noise, waves or ripple) and a shape such as dot, square or ring. Set the spacing and the smallest and largest size, then shape the motion with frequency, angle and warp. Edge fade lets the grid dissolve toward the borders. Press Space for a new variant. Export a PNG, JPG or WebP up to 8K, a seamless GIF loop, or live code for your website.

Try the Dot Wave Grid now

Tips

  • Set the smallest size to 0 so dots in the troughs disappear completely. The wave then looks lighter.
  • Ripple with a high frequency gives rings like a drop in water; Waves with a low frequency gives broad bands.
  • Two colors are often enough: dots run from the first to the last color depending on their size.

FAQ

Can I use the dot grid as an animated website background?
Yes. In the export dialog, choose Web Component, React component or HTML embed and paste the code into your site. The shader runs live, pauses off screen and stands still for people who prefer reduced motion.
Are the dots sharp in large exports?
Yes. The shapes are computed per pixel with soft edges, so they stay crisp up to 8K. Spacing scales with the canvas, so the picture looks the same at every size.
Can I get the grid as SVG?
Not from this tool, because the dots come from a shader. For static dot patterns as SVG, use the Polka Dots or Dieter Dots tool.
Does the same grid always look the same?
Yes. The field depends only on the seed and your settings. A share link or a saved design gives the same picture on every device.

Related generators

All generators in Backgrounds