About

Repeating geometric patterns require precise control over tiling offsets, shape rotation, and color distribution. Errors in gap calculations or seed-driven randomness produce visible seams or unnatural clustering. This tool generates deterministic SVG tile grids using a seeded PRNG (mulberry32), where each cell's hue shift, rotation jitter, and scale variance derive from a single seed value. Colors operate in HSL space for perceptual uniformity. The pattern remains identical for a given seed regardless of regeneration count. Approximation note: per-cell variation is bounded by user-set amplitude parameters, not true stochastic noise.

Export rasterizes the live SVG to a Canvas element at the specified resolution, producing a lossless PNG. Right-click saving is also supported. Pro tip: small gap values with high rotation jitter create dense textile-like effects, while large gaps with uniform rotation produce clean geometric wallpapers.

Formulas

Each cell's pseudo-random value is produced by the mulberry32 algorithm, a fast 32-bit seeded PRNG:

t = seed + 0x6D2B79F5
t = imul(t ⊕ (t >>> 15), t | 1)
t = t ⊕ (t + imul(t ⊕ (t >>> 7), t | 61))
result = ((t ⊕ (t >>> 14)) >>> 0) ÷ 4294967296

Per-cell color is derived by shifting hue:

h_cell = H_base + r × hueJitter

Where r ∈ [−1, 1] from the PRNG, H_base is the user-set hue (0 - 360°), and hueJitter is the maximum hue deviation. Cell rotation follows the same pattern:

θ_cell = r × rotJitter

Where rotJitter is max rotation in degrees. Cell position offset:

x = col × (shapeSize + gap) + r_x × posJitter

Reference Data

Shape	Vertices	Symmetry Order	Tiles Plane Alone	Best Gap Range	Visual Character
Circle	∞	∞	No	2 - 20px	Polka dot, soft
Square	4	4	Yes	0 - 15px	Grid, rigid
Triangle	3	3	Yes (pairs)	4 - 18px	Tessellation, dynamic
Hexagon	6	6	Yes	1 - 10px	Honeycomb, organic
Diamond	4	2	Yes	2 - 14px	Argyle, classic
Star	10	5	No	6 - 24px	Festive, ornamental
Cross	12	4	Yes	3 - 16px	Swiss, medical
Pentagon	5	5	No (Cairo variant)	4 - 20px	Unusual, eye-catching
Octagon	8	8	No (needs squares)	2 - 12px	Tile floor, classic
Heart	Curve	1	No	6 - 22px	Romantic, playful
Arrow	7	1	No	4 - 18px	Directional, modern
Droplet	Curve	1	No	5 - 20px	Rain, organic

Frequently Asked Questions

The seed controls the pseudo-random sequence, but shape geometry and gap values determine the grid layout (number of columns and rows). Changing these parameters alters how many random values are consumed and which cell each value maps to, producing a visually different pattern even though the underlying random sequence is identical.

The exported PNG matches the canvas size parameter you set (default 600×600 pixels). Increase the canvas width and height sliders for higher resolution output. The maximum is 2000×2000 pixels to prevent browser memory issues. For print at 300 DPI, a 1800×1800 pixel canvas produces a 6×6 inch tile.

HSL separates hue (color wheel position, 0-360°), saturation (color intensity, 0-100%), and lightness (brightness, 0-100%). This makes jittering perceptually meaningful: shifting hue by ±30° produces analogous color harmonies, while the same ±30 shift in RGB channels produces unpredictable muddy tones. The tool operates entirely in HSL to keep randomized palettes visually coherent.

At zero position jitter the pattern tiles perfectly because shapes align to a strict grid. Adding position jitter breaks seamless tiling at edges. For CSS background-repeat usage, keep position jitter at 0 and use gap values that divide evenly into the canvas size. The tool does not currently add SVG pattern element wrapping, so edge-to-edge continuity depends on these parameter choices.

Scale jitter multiplies each shape's base size by a random factor. When the scaled shape exceeds the allocated cell size (shapeSize + gap), it intrudes into adjacent cells. This is intentional for dense, layered effects. To prevent overlap, keep scale jitter below the gap value divided by the shape size. For example, with a 30px shape and 10px gap, scale jitter above 0.33 may cause overlap.

Math.random() is not seedable - you cannot reproduce the same sequence. Mulberry32 is a 32-bit seeded PRNG with a period of 2³² that accepts an integer seed and produces a deterministic sequence. This means seed 42 always generates the exact same pattern, enabling reproducibility, sharing, and undo functionality. The algorithm passes BigCrush statistical tests and is suitable for non-cryptographic randomness.