Clipping, Masking, and Patterns

Pattern Tile Fill

A 20-by-20 dot tile lives inside defs as a pattern. A panel then references the pattern as its fill so the tile repeats across the panel.

Program

SVG patterns are tiles that fill another shape. The tile content lives inside a pattern element and the consuming shape references it by id.

pattern_tile_fill.html
Visuals: captured from real browser rendering
<svg class="demo-svg" viewBox="0 0 360 220" role="img" aria-label="Pattern tile">
  <defs>
    <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="20" height="20" fill="#f0f9ff" />
      <circle cx="10" cy="10" r="4" fill="#0ea5e9" />
    </pattern>
  </defs>
  <rect width="360" height="220" fill="#f8fafc" />
  <rect x="36" y="40" width="288" height="140" rx="14" fill="url(#dots)" stroke="#0ea5e9" stroke-width="3" />
</svg>

  1. Paint the viewport background.

    The viewport shows the pale background.
    A background sets the stage for the tiled panel.

  2. Define the pattern tile.

    The viewport is unchanged while the pattern is defined.
    A pattern element holds a small tile that other shapes will reference.

  3. Add the dot to the pattern tile.

    The viewport is still unchanged because pattern contents are not painted on their own.
    A circle inside the pattern becomes part of every tile when the pattern is used.

  4. Fill a panel with the dot pattern.

    A rounded panel filled with a grid of blue dots appears across the viewport.
    fill="url(#id)" repeats the tile across the shape.
pattern element A pattern element holds a small tile of geometry that can be repeated.
url() pattern fill fill="url(#id)" repeats the named pattern across the shape.