What is the difference between a tile and an exported pattern image?

The tile is the small repeatable source unit. Export Pattern Image repeats that unit across the chosen dimensions to create a finished PNG or JPG background.

Can the generated pattern have a transparent background?

Yes. Generated SVG and PNG tiles can preserve transparency. JPG cannot, so its export uses the selected solid JPG background color.

What does Test Your Pattern change in an uploaded file?

Nothing. It repeats the local tile in a preview and lets you vary scale and X/Y offset. It does not edit or rewrite the uploaded SVG or raster image.

Why would I show tile boundaries?

Boundaries expose the exact repeat unit, making seams, unexpected spacing and offset behavior easier to diagnose before the pattern is used in CSS or exported at a larger size.

How large can the raster export be?

The interface offers presets through 4000×4000 pixels plus validated custom dimensions. Very large or intricate patterns can still be limited by the browser's available canvas memory.

Back to Design & Color Tools

SVG Pattern Generator

Design a seamless vector tile, test an existing pattern and export repeat-ready code or large raster backgrounds.

Pattern controls

Pattern preset

Foreground color

Background color

Transparent background

Tile size / scale64pxDot size6pxOpacity100%Rotation0°

Show tile boundaries

Live Preview

64 × 64px repeated tile

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="100%" height="100%" fill="#F1F0EF"/><g color="#384D37" opacity="1"><g transform="translate(-128 -128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-64 -128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(0 -128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(64 -128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(128 -128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-128 -64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-64 -64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(0 -64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(64 -64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(128 -64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-128 0) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-64 0) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(0 0) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(64 0) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(128 0) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-128 64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-64 64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(0 64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(64 64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(128 64) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-128 128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(-64 128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(0 128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(64 128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g><g transform="translate(128 128) rotate(0 32 32)"><circle cx="32" cy="32" r="6" fill="currentColor"/></g></g></svg>

CSS Background

background-color: #F1F0EF;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23F1F0EF%22%2F%3E%3Cg%20color%3D%22%23384D37%22%20opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28-128%20-128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-64%20-128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%20-128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2864%20-128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28128%20-128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-128%20-64%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-64%20-64%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%20-64%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2864%20-64%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28128%20-64%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-128%200%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-64%200%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%200%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2864%200%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28128%200%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-128%2064%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-64%2064%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%2064%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2864%2064%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28128%2064%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-128%20128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-64%20128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%20128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2864%20128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28128%20128%29%20rotate%280%2032%2032%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 64px 64px;

Export Pattern Image

Export sizeFormat

How to use SVG Pattern Generator

1
Stay in Generate Pattern and choose one of the available geometric Pattern presets.
2
Adjust foreground and background colors, transparency, tile size, pattern detail, opacity and rotation.
3
Inspect the repeating Preview and enable Show tile boundaries when checking whether edges meet cleanly.
4
Copy the SVG or CSS background, download the SVG or PNG tile, or configure Export Pattern Image for a larger PNG or JPG.
5
To inspect your own tile, switch to Test Your Pattern, upload SVG, PNG, JPG or WebP and adjust scale, offsets and preview background.

Frequently asked questions

About SVG Pattern Generator

SVG Pattern Generator combines creation and verification in one workspace. Its geometric library ranges from simple dots and grids to waves, herringbone, isometric forms and ornamental repeats, with preset-specific detail controls instead of one generic slider.

Generated patterns remain vector tiles whose colors, opacity, scale and rotation can be changed without degrading edges. The same tile drives the preview, downloadable SVG, PNG tile and CSS data URI, so code and visual output stay aligned. Larger raster exports repeat it across exact dimensions for mockups or image-based workflows.

Test mode serves a different purpose: it reveals how an existing local tile repeats before deployment. Scale, offsets, background and boundary guides affect inspection only, leaving the uploaded asset unchanged and on the device.