Create a Lightweight SVG Dot Pattern Background

A dotted background can give a diagram or empty state some texture without needing a large image. In SVG, one circle inside a repeating tile is enough. We’ll use that small tile to control the spacing, dot size, and contrast.

Start with one tile

A subtle dot field can give a diagram or empty state a little structure. You do not need to draw every dot manually. Define one tile, repeat it across a rectangle, and keep the contrast quiet enough that foreground labels remain easy to read.

Set the tile size

With patternUnits set to userSpaceOnUse, the width and height below describe a 20 by 20 tile in the drawing’s coordinate system. One dot sits in its center. Increase both dimensions for wider spacing, or change the circle radius for heavier dots. The viewBox gives the example a clear canvas.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200" aria-hidden="true">
  <defs>
    <pattern id="diagram-dots" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="1.5" fill="#a3bac5"/>
    </pattern>
  </defs>
  <rect width="400" height="200" fill="url(#diagram-dots)"/>
</svg>

Check repetition at the final size

Review the pattern at actual display size instead of judging only a zoomed drawing. Dense dots can become distracting behind small text. Keep IDs unique if several inline patterns appear on the same page, and place a solid surface behind essential content if the pattern competes with it. Decorative patterns should stay out of the accessibility tree.

Technical reference

Related reading SVG tips