About

Repeating background patterns require precise geometric tessellation. A single-pixel misalignment in the unit cell produces visible seams when tiled across large surfaces. This generator computes exact vertex coordinates for 15 pattern types using trigonometric placement. Hexagonal grids use √3 row offsets. Sinusoidal waves evaluate y = A ⋅ sin(ωx + φ) per column. All output tiles perfectly at any scale. Export as SVG for resolution-independent CSS backgrounds or PNG for direct use in design tools.

Limitation: raster PNG export is bound by canvas pixel limits (browser-dependent, typically 16384px max per axis). SVG output has no such constraint. Pro tip: for web use, keep tile dimensions under 200px to minimize HTTP payload when inlined as a data URI.

Formulas

Each pattern is constructed by computing element positions within a unit tile of width W and height H. The tile repeats infinitely in both axes.

Dot grid placement for row i, column j:

x = j ⋅ s + (i mod 2) ⋅ s2
y = i ⋅ s

Hexagon vertex k (0≤k<6):

x_k = cx + r ⋅ cos(2πk6)
y_k = cy + r ⋅ sin(2πk6)

Wave curve:

y(x) = A ⋅ sin(2πT ⋅ x + φ)

Star vertex k (alternating inner/outer radius):

r_k =

{

R if k is evenR ⋅ 0.4 if k is odd

Where s = spacing, r = radius, A = amplitude, T = period, φ = phase offset, R = outer star radius, cx,cy = center coordinates.

Reference Data

Pattern	Geometry	Tile Formula	Best Use Case
Dots	Circle grid	Spacing = s, radius = r	Subtle textures, card backgrounds
Lines	Parallel strokes	Gap = g, angle = θ	Notebook styles, ruled surfaces
Cross-hatch	Perpendicular lines	Two line sets at 90°	Engineering drawings, sketch effects
Waves	Sinusoidal curves	Asin(ωx)	Organic, water-themed designs
Chevrons	V-shaped zigzag	Slope ±m inversion	Fashion, tribal patterns
Hexagons	Honeycomb	Row offset = √32s	Tech, gaming, modern UI
Triangles	Equilateral tessellation	Height = √32a	Geometric art, retro designs
Diamonds	Rotated squares	45° rotation transform	Luxury, playing card motifs
Crosses	Plus signs at nodes	Arm length = l	Medical, Swiss-style graphics
Circles	Concentric rings	Radius step = Δr	Radar, ripple effects
Polka	Offset dot grid	Even rows offset s2	Vintage, playful designs
Zigzag	Continuous V-line	Amplitude = A, period = T	Borders, ribbon patterns
Plaid	Overlapping stripes	H + V stripes, α blend	Flannel, tartan, textile
Stars	5-point at nodes	5 vertices at 2π5 intervals	Festive, decorative backgrounds
Brick	Offset rectangles	Odd rows offset w2	Architecture, wall textures

Frequently Asked Questions

Seams occur when the tile dimensions are not integer multiples of the pattern spacing. The generator enforces this constraint internally: it snaps the tile size to the nearest multiple of the spacing value. If you manually override tile size via CSS, ensure your background-size matches exactly. For guaranteed seamless results, use the SVG export which defines a proper element with patternUnits="userSpaceOnUse".

Browser canvas limits vary. Chrome and Edge support up to 16384×16384 pixels. Firefox allows up to 11180×11180. Safari caps at 4096×4096 on iOS. The generator clamps dimensions to 4096px by default to ensure cross-browser compatibility. For larger needs, export as SVG and rasterize externally.

Copy the generated CSS snippet provided under the preview. It encodes the SVG as a base64 data URI inside background-image. Apply it to any element. The pattern repeats automatically via background-repeat: repeat. For performance, keep tile size under 200px - larger tiles increase the data URI size and slow initial render.

Yes. Brick patterns automatically compute a 2:1 width-to-height ratio for the tile. Hexagonal grids compute the tile height as spacing × √3 to maintain perfect tessellation. The tile dimensions shown in the UI reflect the actual computed values, not arbitrary inputs.

Plaid layers horizontal and vertical stripes with partial opacity (default α = 0.3 per stripe). Where stripes overlap, the effective opacity increases multiplicatively: α_result = 1 − (1 − α₁)(1 − α₂). At α = 0.3 per stripe, intersections reach approximately 0.51 opacity, creating the characteristic darker crossover squares. Adjust foreground opacity to control this effect.

At spacing below approximately 4px, sub-pixel rendering causes aliasing artifacts on raster canvases. Circles may appear as squares, and thin lines may vanish entirely. The generator warns when spacing drops below 6px. For micro-patterns, export as SVG - vector rendering handles sub-pixel geometry correctly at any zoom level.