buncha/design/svg-pattern

SVG Pattern Generator

Tile size40pxStroke2px

FgBg

SVG markup
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 240 120" preserveAspectRatio="xMidYMid slice">
  <defs>
    <pattern id="p1" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" fill="#FFF9F3"/><circle cx="20" cy="20" r="5" fill="#1F1F1F"/>
    </pattern>
  </defs>
  <rect width="240" height="120" fill="url(#p1)"/>
</svg>

CSS background
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%23FFF9F3%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%231F1F1F%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;

Pairs well with

ASCII Art Generator

Image to text-art. Multiple character ramps, squar…

Barcode Generator

Generate Code 128, EAN-13 or UPC-A barcodes. Encod…

Border Radius Generator

Generate CSS border-radius with a visual editor.

Box Shadow Generator

Create and preview CSS box shadows visually.

About SVG Pattern Generator

Eight tileable repeating patterns — polka dots, stripes, grid, checker, triangles, honeycomb, waves, scales — generated as inline SVG. Pick the pattern, tile size, stroke width, and foreground / background colours; copy the SVG markup or a ready-to-paste CSS background-image declaration.

Everything happens on your device. Close the tab and it's gone.