Patterns

A <pattern> is a tile of ordinary SVG content repeated across whatever it fills. x, y, width and height place the first tile; by default they are fractions of the filled shape's bounding box (patternUnits= "objectBoundingBox"), which surprises most people, so set patternUnits="userSpaceOnUse" to size tiles in user units. patternContentUnits does the same for the tile's contents, and patternTransform rotates or scales the whole tiling, which is how diagonal stripes are made from a vertical tile.

Stripes, dots, and a hatched out-of-stock card for Salt and SaffronHTMLLive

<svg width="600" height="120" font-family="Arial" font-size="14">
  <pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse"
    patternTransform="rotate(45)"><rect width="5" height="10" fill="#2a9d8f"/></pattern>
  <pattern id="dots" width="16" height="16" patternUnits="userSpaceOnUse">
    <circle cx="8" cy="8" r="4" fill="#1f5f8b"/></pattern>
  <pattern id="hatch" width="8" height="8" patternUnits="userSpaceOnUse"
    patternTransform="rotate(-45)"><path d="M0 4H8" stroke="#263238" stroke-width="2"/>
  </pattern>
  <rect x="10" y="5" width="150" height="110" fill="url(#stripes)"/>
  <circle cx="240" cy="60" r="55" fill="url(#dots)" stroke="#1f5f8b" stroke-width="2"/>
  <rect x="330" y="5" width="260" height="110" rx="8" fill="#e09a10"/>
  <text x="346" y="36" font-weight="bold">Salt and Saffron</text>
  <text x="346" y="58">Priya Nair, $24.00</text>
  <rect x="330" y="5" width="260" height="110" rx="8" fill="url(#hatch)" opacity="0.35"/>
  <rect x="410" y="76" width="100" height="28" rx="14" fill="#fff"/>
  <text x="460" y="95" text-anchor="middle" font-weight="bold" fill="#b5452f">SOLD OUT</text>
</svg>

Browser output of 18

Salt and Saffron is the one BookNest title with inStock: false, and a hatch pattern laid over its card says so without hiding the details. The dots stay put while the circle's edge cuts through them, because user-space tiles are anchored to the canvas, not to the shape.

MENU