Generative SVG Art with JavaScript: Algorithms for Digital Artists

Designing by hand is limiting. You can draw ten circles, maybe a hundred. But with code, you can draw ten thousand, each perfectly positioned according to a mathematical rule you define.

This is Generative Art: the intersection of programming and visual aesthetics. And SVG is the perfect medium for it—crisp, scalable, and plot-ready (for pen plotters).

In this guide, we'll explore how to generate beautiful SVG art using JavaScript algorithms.

Why SVG for Generative Art?

Infinite Resolution: Looks perfect on any screen.
Physical Output: Can be sent to pen plotters (Axidraw, etc.) or laser cutters.
Debuggable: It's just DOM nodes; you can inspect them.
Lightweight: A complex pattern is often just a few KB of text.

Basic Randomness: The Grid

The "Hello World" of generative art is a grid where each cell varies slightly.

const width = 800;
const height = 800;
const gap = 40;

let svgContent = `<svg viewBox="0 0 ${width} ${height}">`;

for (let x = 0; x < width; x += gap) {
  for (let y = 0; y < height; y += gap) {
    // Random chance to draw a circle or a square
    if (Math.random() > 0.5) {
      svgContent += `<circle cx="${x + gap/2}" cy="${y + gap/2}" r="${gap * 0.4}" fill="none" stroke="black" />`;
    } else {
      svgContent += `<rect x="${x + gap*0.1}" y="${y + gap*0.1}" width="${gap*0.8}" height="${gap*0.8}" fill="none" stroke="black" />`;
    }
  }
}

svgContent += `</svg>`;

This creates a structured yet chaotic mosaic.

Better Randomness: Perlin Noise

Math.random() is "white noise"—jumpy and disconnected. For organic textures (clouds, terrain, flow fields), you need Perlin Noise (or Simplex Noise).

Noise gives you smooth transitions. A value at x=1 is similar to the value at x=1.1.

Creating a Flow Field

A flow field uses noise to determine the angle of lines across a canvas.

Divide canvas into a grid.
Calculate a noise value for each cell.
Map that value to an angle (0 to 360°).
Draw a short line in that direction.

// Pseudocode assuming a 'noise(x, y)' function exists
for (let x = 0; x < width; x += step) {
  for (let y = 0; y < height; y += step) {
    const angle = noise(x * 0.01, y * 0.01) * Math.PI * 2;
    const length = 20;
    
    const x2 = x + Math.cos(angle) * length;
    const y2 = y + Math.sin(angle) * length;
    
    svgContent += `<line x1="${x}" y1="${y}" x2="${x2}" y2="${y2}" stroke="black" />`;
  }
}

This creates a beautiful, fluid texture that looks like wind or water.

Recursive Geometry: Fractals

Fractals are patterns that repeat at different scales. They are easy to generate with recursive functions.

The Sierpinski Triangle

Draw a triangle.
Split it into 3 smaller triangles.
Repeat for each smaller triangle.

function drawTriangle(x, y, size, depth) {
  if (depth === 0) return;
  
  // Draw the triangle logic here...
  svgContent += `<polygon points="..." />`;
  
  // Recursive calls
  const newSize = size / 2;
  drawTriangle(x, y, newSize, depth - 1); // Top
  drawTriangle(x - newSize/2, y + height, newSize, depth - 1); // Left
  drawTriangle(x + newSize/2, y + height, newSize, depth - 1); // Right
}

Tools for Generative SVG

You don't have to write raw strings like I did above. Use these libraries:

Canvas-Sketch: A framework for making generative artwork in JavaScript. Exports to SVG easily.
P5.js: While pixel-based by default, p5.js-svg allows it to export vector graphics.
D3.js: Not just for charts! D3's math and scale functions are incredible for art.

Exporting for Pen Plotters

If you intend to print your art with a robot (like an Axidraw):

Avoid Fills: Plotters draw lines. Convert fills to hatches (lots of parallel lines).
Optimize Paths: Use "traveling salesman" algorithms to minimize the distance the pen travels in the air.
Layers: Use SVG groups <g id="layer1"> to separate colors if you plan to swap pens.

Getting Started

You don't need a complex setup. Open our SVG Playground, type some JavaScript to log SVG strings to the console, and copy-paste them. Or run a simple Node.js script to write to a file.

Generative art is about exploring the "happy accidents" that occur when math meets code. Tweak a variable, change a sine wave to a cosine, and discover entirely new visual worlds.

Related Articles: