Generating SVG Patterns That Look Handcrafted, Not Random
Procedural SVG patterns are easy to generate and easy to do wrong. Here is how I generate patterns that feel intentional. I started generating SVG patterns a couple of years ago for backgrounds, textures, and decorative elements. The first patterns I produced looked like static, not design. They were technically patterns, mathematically valid, and aesthetically wrong. After enough iterations, I learned that the difference between a generated pattern that looks handcrafted and one that looks random is mostly a small set of constraints. Apply the constraints and the pattern becomes intentional. Skip them and you have noise. Here are the constraints I use to generate SVG patterns that look like design rather than randomness. Limit the Color Palette Tightly The single biggest improvement to generated patterns comes from limiting the palette. Three colors is enough for most patterns. Two colors is often better. When I generate patterns with a palette of eight, the result looks like a paint store exploded. The variation the pattern provides is already a lot of visual information. Adding color variation multiplies the complexity in a way that overwhelms the eye. I pick a palette before generating and feed only those colors into the generator. More guides are on the Spark Blog.