Generate SVG pattern

Generate a reusable SVG pattern tile for a filled shape.

freeworks offlinenothing uploaded
ToolSVG Pattern Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

A pattern tile is defined in a pattern coordinate system and repeatedly painted across a target shape; patternUnits and transforms determine whether the tile scales with the object or uses user-space coordinates. The same tile can fill paths of different sizes without duplicating its geometry.

  • Reusable tiles keep repeated geometry small while transforms control spacing and orientation.

Worked example

Dot grid pattern on white background
Generate a repeating dots pattern
Input
											Pattern: dots
Width: 400
Height: 400
Tile size: 20
Color: #333333
Background color: #ffffff
Opacity: 0.5
Output

When to use this

Textures, striped illustrations, and reusable design swatches generate SVG patterns.

Edge cases

  • A tile with zero width or height paints nothing.
  • objectBoundingBox units normalize coordinates to each target shape.
  • A pattern transform can rotate the tile without rotating the filled object.

References