the math behind random patterns

understanding the algorithms that generate unique, mathematically beautiful backgrounds

seeded random generation

each pattern uses a deterministic seed based on its index, ensuring reproducibility while maintaining visual variety.

seed = index × π
random = sin(seed × 12.9898 + seed × 78.233) × 43758.5453

color generation

HSL colors are generated using seeded randomness with configurable saturation and lightness ranges.

hue = floor(random(seed × 1.23) × 360)
saturation = base + (random(seed × 1.45) - 0.5) × 20
lightness = base + (random(seed × 1.67) - 0.5) × 15

patternn types

21 different pattern algorithms create diverse visual effects, from gradients to geometric shapes.

gradientlinear gradients with random angles
meshmultiple radial gradients overlay
noiseperlin-like noise patterns
geometricdots, grids, hexagons, triangles

SVG generation

vector patterns use mathematical functions to create scalable, crisp graphics at any size.

size = 15 + floor(random(seed) × 50)
spacing = 25 + floor(random(seed + 1) × 35)
position = random(seed + 2) × 100%

every refresh generates new random seeds, creating infinite unique combinations

start creating