Designing Generative SVG Patterns

Generate a single-file SVG pattern driven by parameters (seed, scale, stroke width, color) using simple math (trig, noise, grids) rather than hand-placed shapes:

JavaScript
function generatePattern({ size = 400, cols = 8, rows = 8, seed = 1, stroke = '#111', bg = '#fff' }) {
  let rng = mulberry32(seed);
  const cell = size / cols;
  let shapes = '';
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const cx = x * cell + cell / 2;
      const cy = y * cell + cell / 2;
      const r = cell * 0.3 * (0.5 + rng());
      shapes += `<circle cx="${cx.toFixed(2)}" cy="${cy.toFixed(2)}" r="${r.toFixed(2)}" fill="none" stroke="${stroke}" stroke-width="1"/>`;
    }
  }
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">
  <rect width="${size}" height="${size}" fill="${bg}"/>
  ${shapes}
</svg>`;
}

function mulberry32(a) {
  return function() {
    a |= 0; a = (a + 0x6D2B79F5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

Progress:

• Step 1: Pick a category (grid, radial, noise, flow, isometric, organic, distortion, physics) — this determines the coordinate system and base algorithm.
• Step 2: Choose a generative primitive (grid iteration, polar/radial loop, Perlin/simplex noise field, particle/flow simulation, isometric projection, L-system/organic growth).
• Step 3: Parametrize everything that could vary: seed, density, scale, rotation, stroke width, color palette, animation toggle.
• Step 4: Render using only basic SVG primitives (line, circle, path, polygon) — avoid raster/filters unless the category is "noise" or "distortion" and truly needs feTurbulence.
• Step 5: Keep the viewBox square (e.g., 0 0 400 400) so patterns tile/preview consistently as thumbnails.
• Step 6: Verify visual balance — no clipped shapes at edges, consistent stroke weight, no overlapping labels/artifacts.
• Step 7: Export/minify — strip unnecessary precision (2 decimal places), remove default attributes, inline as <svg> or save as .svg file matching kebab-case pattern name.
• Step 8: Name the pattern (Title Case, 2-3 words, descriptive of visual result, e.g., "Flow Dots", "Iso Cube Wireframe") and tag with its category.