SVG pattern generator

Create a checkerboard, dot or stripe pattern as SVG source.

Graphics Stateless

Maximum input length per field: 7 Unicode code points. See the operation limits in the instructions.

Quick guide

Try it with your own data when you’re ready.

Try an example

You enter

Background color (HEX)
#fff
Second color (HEX)
#000
Tile size (pixels)
16
Pattern
Checkerboard

You get

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><pattern id="tile" width="16" height="16" patternUnits="userSpaceOnUse"><path d="M0 0h16v16H0z" fill="#FFFFFF"/><path d="M0 0h8v8H0zM8 8h8v8H8z" fill="#000000"/></pattern></defs><path d="M0 0h256v256H0z" fill="url(#tile)"/></svg>
How it works & limits

Use two opaque hex colors and a tile size from 16 to 128 pixels. The output is a 256×256 SVG with a repeating pattern and an image preview.

The generated source contains only fixed shapes and validated colors/numbers, with no scripts or external resources. Copy it into an .svg file to reuse it.