AbraCalc

SVG Pattern Generator

Generate seamless, tileable SVG patterns (dots, stripes, grid, diagonal) with custom size and colors. Copy the SVG.

Pure browser JavaScript — generates tileable SVG patterns locally.

Embed this tool on your site

How to use this tool

  1. Pick a pattern style.
  2. Adjust tile size, line thickness, and the two colors.
  3. Copy the SVG or download it as a seamless tile.

Generate seamless, tileable SVG patterns (dots, stripes, grid, diagonal) with custom size and colors. Copy the SVG.

Frequently asked questions

Are the patterns seamless?
Yes — they use SVG with patternUnits="userSpaceOnUse", so the tile repeats perfectly at any size.

References & sources