About — evolveSVG

Origin

Where this came from

evolveSVG was directly inspired by Emergent Garden and his hyperdimensions project — an interactive genetic art explorer that uses the same core idea: present a grid of variants, let the user pick a favorite, and evolve the next generation from it.

The original project worked with a high-dimensional parameterized image renderer. evolveSVG takes the same selection-based evolution loop and applies it to procedurally-generated scalable vector graphic (SVG) images, using a layer-based genome system with shapes, tiling patterns, blend modes, and SVG filter effects.

Emergent Garden — hyperdimensions

The original generative art evolution explorer. Highly recommended watching his various youtube videos about many different generative coding projects.

Picbreeder by Emergent Garden YouTube channel hyperdimensions on GitHub (picbreeder and more)

How it works

Evolution through selection

Every pattern in evolveSVG is encoded as a genome — a structured description of colors, shapes, and effects. Clicking a pattern generates eight mutated offspring and places them around the original parent in a 3×3 grid. You steer evolution by choosing which one to breed from next.

🎲

Random Start

Nine patterns are generated from scratch with random genomes

›

▶

Select

Click a pattern once to select it (blue border)

›

✨

Evolve

Click it again — eight mutations appear around it as the new parent

›

★

Bookmark

Star any pattern to save it, then keep exploring

The genome

What each pattern is made of

Each pattern is fully described by a JSON genome. When you download an SVG, the genome is embedded in its metadata — meaning you can load it back later and continue evolving from exactly where you left off.

Genome structure

palette

3–5 HSL colors that all layers draw from. Mutations drift hue, saturation, and lightness. Structure mutations can add or remove colors.

background

A solid color or gradient fill that anchors the composition. Type can be solid, linear, or radial.

layers[ ]

Up to 15+ composited layers. Each has a type, arrangement, fill, stroke, blend mode, opacity, transform, and optional effects.

↳ type

Shape types: circle ellipse rect polygon path
Tiling types: dots_grid stripes crosshatch checkerboard waves zigzag hexgrid

↳ arrangement

single — one centered instance grid — N×M tiled repetition radial — rotated around center scatter — random placements

↳ blendMode

normal multiply screen overlay color-dodge difference hard-light

↳ effects

Optional per-layer SVG filter effects: displacement, blur, color shift, and gradient mask. Each effect has its own evolvable parameters.

Mutations

How patterns change

Each generation applies a mix of mutations to the parent genome. Basic mutations adjust numeric parameters or swap structural elements. Advanced effects add SVG filter operations per layer. The Mutations slider in the sidebar controls how many are applied per child.

Select any mutation type to see it demonstrated →

Core

Parametric

Shifts values for size, position, opacity, rotation. Mutations remain recognizable.

Structural

Shape types, blend modes, and arrangements can swap entirely. Layers may be added or removed.

Color

Palette hues, saturations, and lightnesses drift in HSL space. Colors can be added or removed from the palette.

Displacement ★

feTurbulence fractal noise warps pixels organically. Frequency, scale, and octave count all evolve.

Blur

Gaussian blur per layer before compositing. Pretty self explanatory.

Color Shift ★

feColorMatrix rotates hue and scales saturation independently from the palette.

Mask

A radial or linear gradient mask fades a layer in or out, creating vignettes and directional reveals.

Dashes

Stroke dash patterns on tiling layers. Turns stripes and grids into dotted or dashed textures.

Experimental

Morphology

feMorphology dilates or erodes layer edges, fattening shapes outward or carving them inward.

Drop Shadow

A coloured shadow offset from the layer, blurred and composited behind it using palette colours.

Channel Curves ★

feComponentTransfer applies an independent gamma curve to each RGB channel, creating tonal shifts.

Diffuse Light

feDiffuseLighting simulates a distant light source shining on the layer surface, giving a 3D embossed look.

Convolve

feConvolveMatrix applies a 3×3 kernel — emboss, sharpen, or edge-detect — directly to the layer pixels.

before

↓

after

Expand view

Exploring a pattern up close

Hover over any cell in the grid and click the ⛶ button in the top-right corner to open the expand view — a fullscreen, zoomable canvas for examining a pattern in detail.

1

Open & navigate

The pattern fills the screen. Scroll to zoom, drag to pan, double-click to fit it back to the window. Press Esc to close.

2

Progressive LOD rendering

As you zoom in, the pattern is re-rasterized at increasing resolution across four LOD tiers (up to 1920×1080 native). The bar indicator at the bottom shows which tier is cached and which is currently rendering. Once rendered, zooming back out reuses the cached result instantly.

Resolution tiers

The tallest lit bar is the current tier — shorter bars are cached lower resolutions. An orange pulsing bar means a higher-res render is in progress.

3

Save as PNG

Click the ↓ button to save the current view as a full-resolution PNG. For a lossless vector export, use Download SVG from the main grid sidebar instead.

Gallery

Built-in templates

These templates are included with evolveSVG as starting points for exploration. Load any of them via Load SVG… in the sidebar, then begin evolving from there. Each genome is embedded in the file so the full structure is preserved.