How evolveSVG works

These are nudged on every mutation regardless of structure rate:

• → Position cx, cy — nudged at 0.1× scale
• → Fill alpha — nudged at 0.1×
• → Stroke width and alpha
• → Opacity
• → Transform: rotation (Gaussian ±15°), scaleX/scaleY (0.1×)

// Triggered by structRate slider (default 0.3)
if (Math.random() < structRate * 0.15) l.blendMode   = pick(BLEND_MODES);
if (Math.random() < structRate * 0.10) l.type        = pick(TYPES);
if (Math.random() < structRate * 0.10) l.arrangement = pick(ARRANGEMENTS);
if (Math.random() < structRate * 0.10) l.fill.type   = pick(['solid', 'linear', 'radial']);

Every optional effect follows the same three-way logic:

// Pattern repeated for every effect type:
if (l.displace != null) {
    // Mutate existing effect
    l.displace.scale    = clamp(nudge(...), 1, 300);
    l.displace.baseFreq = clamp(nudge(...), 0.0005, 0.13);
    l.displace.octaves  = clamp(Math.round(nudge(...)), 1, 8);
    // ~8% chance to remove it
    if (Math.random() < structRate * 0.08) delete l.displace;
} else if (flags.turbulence && Math.random() < structRate * 0.15) {
    // Spawn if feature flag enabled (~4.5% at default rate)
    l.displace = { scale: rand(10, 150), ... };
}

• Add a layer0.3 × 0.6
• Remove a layer0.3 × 0.4
• Change blend mode0.3 × 0.15
• Change shape type0.3 × 0.10
• Spawn advanced effect0.3 × 0.15
• Remove advanced effect0.3 × 0.08
• Add palette color0.3 × 0.10

Fills all 9 cells with independent random genomes. Each call to randomGenome() creates a palette of 3–5 colors and 1–2 random layers.

const parent = genomes[parentIdx];
newGenomes[4] = deepClone(parent);         // center = unchanged parent
for (let i = 0; i < 9; i++) {
    if (i === 4) continue;
    newGenomes[i] = mutateGenome(parent, opts); // 8 independent mutations
}

Each of the 8 surrounding cells is an independent mutation draw from the same parent. They share no state with each other.

Identical to evolveFrom() but starts from a saved template genome. Also calls enableExperimentalFlagsForGenome() to automatically enable any feature flags the template requires.

A critical constraint: the SVG's viewBox dimensions are always 1280×720. They are never changed. The browser's feTurbulence filter samples noise in SVG user-unit space, so altering the viewBox would change the noise pattern itself, not just the display size. To get more pixels, the SVG width and height attributes are scaled up while the viewBox stays constant.

Each mode adds tiers to the resolution ladder. A tier is selected by the current zoom level inside the Expand View. Once rendered, each tier is cached and reused instantly when zooming back out.

The 16K and Death tiers exceed what any GPU can hold in a single canvas allocation. They use a tiling strategy to work around this limit.

At high scale factors, a single canvas exceeds GPU memory limits and the browser silently produces a blank or corrupt result. The workaround is to divide the full image into a 4×4 grid of 16 tiles, render each tile separately at a manageable canvas size, then composite them back together.

The tricky part is SVG filters. feTurbulence computes displacement based on absolute SVG user-unit coordinates. If you simply clip the viewBox to a tile's region, filter primitives that sample outside the tile boundary (the feDisplacementMap sampling radius can reach ~75 user units at maximum scale) would be clipped to zero — producing a visible seam where tiles meet.

The solution is an overlap margin: each tile's viewBox is expanded by 80 SVG user units on every shared edge. This overlap is larger than the maximum displacement radius, so filter math across tile boundaries is identical to single-pass rendering. After rasterizing each tile, the overlap strip is cropped off via drawImage() before compositing.

// For each tile at (col, tc), (row, tr) in a 4×4 grid:
const OVERLAP = 80;   // SVG user units — covers max displacement radius

// Tile's region in SVG user-unit space (without overlap)
const vx = tc * tileVW;
const vy = tr * tileVH;

// Expanded viewBox includes overlap on shared edges
const vxo = vx - (tc > 0 ? OVERLAP : 0);
const vyo = vy - (tr > 0 ? OVERLAP : 0);
const vwo = tileVW + (tc > 0 ? OVERLAP : 0) + (tc < cols-1 ? OVERLAP : 0);
const vho = tileVH + (tr > 0 ? OVERLAP : 0) + (tr < rows-1 ? OVERLAP : 0);

// Patch SVG viewBox and pixel dimensions, render to canvas
svg.setAttribute('viewBox', `${vxo} ${vyo} ${vwo} ${vho}`);
svg.setAttribute('width',   rawTileW + overlapPxX);
svg.setAttribute('height',  rawTileH + overlapPxY);

// Crop the overlap pixels out before compositing
ctx.drawImage(tileCanvas, cropL, cropT, rawTileW, rawTileH, destX, destY, rawTileW, rawTileH);

Death mode's separate-canvas approach avoids ever allocating a 530+ megapixel composite in memory. The 16 tile canvases are instead piped sequentially into the PNG encoder.

At extreme zoom levels, some GPUs silently produce incorrect renders, usually missing some layers. An automatic detection pass runs after an Extreme-tier render, comparing it against the tier below.

The image is divided into a 16×9 analysis grid of 80×80-pixel tiles, with a 20px border cropped from each to avoid edge artifacts. The central 40×40 region of each tile is analyzed with four independent checks:

• 1. Luminance variance drop — detects missing texture or displacement layers
• 2. Per-channel mean delta > 15 — detects missing tone or color grading layers
• 3. Saturation-amplified color variance drop — detects missing subtle hue-shift layers
• 4. Structured difference variance — detects missing textured detail at any scale

If more than 10% of analysis tiles fail any check, the tier is flagged as a GPU rendering failure.

The exporter opens a save dialog via window.showSaveFilePicker() (File System Access API) and writes directly to the chosen file. This allows sequential writes and lets the encoder seek back to fill in the IDAT chunk length once compression is complete, without holding the whole file in memory.

PNG is a relatively simple format: a fixed signature, a header chunk (IHDR), one compressed data chunk (IDAT), and an end marker (IEND). The exporter builds each part manually:

// 1. PNG signature — 8 magic bytes
write([137, 80, 78, 71, 13, 10, 26, 10]);

// 2. IHDR chunk — width, height, 8-bit RGB (color type 2)
writeChunk('IHDR', [W >> 24, W >> 16, W >> 8, W,
                    H >> 24, H >> 16, H >> 8, H,
                    8,   // bit depth
                    2,   // color type: RGB (no alpha)
                    0, 0, 0]);  // compression, filter, interlace

// 3. IDAT chunk — length placeholder written now, filled in after compression
const idatLenPos = pos;   // remember file offset
write([0, 0, 0, 0]);        // placeholder — seek back later
write('IDAT');

// 4. Pipe scanlines through zlib deflate → directly to file
const cs = new CompressionStream('deflate');
const csWriter = cs.writable.getWriter();
cs.readable.pipeTo(fileStream);   // compressed bytes go straight to disk

// 5. For each tile row, read pixel data from all 4 tiles in that row,
//    then write scanlines by concatenating pixels horizontally
for (let tr = 0; tr < rows; tr++) {
    const pixData = tiles.slice(tr*cols, tr*cols+cols)
                         .map(c => c.getContext('2d').getImageData(0,0,tw,th).data);
    for (let y = 0; y < th; y++) {
        const row = new Uint8Array(1 + W * 3);  // filter byte + RGB
        row[0] = 0;  // PNG filter type: None
        for (let tc = 0; tc < cols; tc++) {
            for (let x = 0; x < tw; x++) {
                // Copy R, G, B from RGBA pixel data (skip A)
                row[di]   = pixData[tc][si];
                row[di+1] = pixData[tc][si+1];
                row[di+2] = pixData[tc][si+2];
            }
        }
        await csWriter.write(row);  // scanline fed to compressor
    }
}

// 6. Close compressor, seek back to fill IDAT length, write IEND
await csWriter.close();
writer.seek(idatLenPos);
write(idatByteCount);           // fill in the placeholder
writeChunk('IEND', []);

Every PNG chunk requires a CRC32 checksum covering the chunk type and data. The encoder pre-computes a 256-entry CRC32 lookup table and processes each chunk's bytes through it before writing. This is a required part of the PNG specification — a PNG reader that validates checksums (most do) will reject a file with a wrong CRC.

Because a Death-mode export can take tens of seconds, a progress overlay appears showing a 4×4 grid of tile status cells. Each cell transitions through three states as processing moves through the 16 tiles:

• Rendering — the tile's SVG is being rasterized
• Streaming — the tile's pixel data is being fed to the PNG compressor
• Done — the tile's scanlines have been written to disk

If tiles are already cached from a previous render in the same session, the rendering phase is skipped and export jumps straight to streaming.

Two entry points:

• → Paste mode — paste SVG code directly into the textarea and click Load SVG (or Cmd/Ctrl+Enter)
• → Auto-load — the main evolveSVG page writes the chosen SVG to sessionStorage under 'evolvesvg_animate' and opens the animation page in a new tab; on load the key is read and cleared automatically

The SVG must contain an <evolvesvg:genome> tag inside a <metadata> block — SVGs exported from evolveSVG always carry this. Plain SVGs without genome data are rejected with an error.

Once an SVG is loaded, the left sidebar builds a scrollable tree of animatable parameters, organized into collapsible sections — one per palette color and one per layer. Palette color sections are collapsed by default; layer sections are expanded.

Each parameter row shows its current value and a fill bar proportional to its position in the valid range. Drag left or right on any row to scrub the value. A 300ms-gated animation chain plays a smooth SMIL transition while you drag; after 2 seconds of inactivity the preview reverts to a static render.

A blue dot on a row indicates the parameter already has a keyframe configured.

Tiling layer types (dots_grid, stripes, crosshatch, checkerboard, waves, zigzag, hexgrid) only expose Opacity and any filter-based parameters — position, rotation, scale, and shape dimensions are not available for tiling layers.

Each "keyframe" is a transition spec for one parameter: a from-value, a to-value, duration, repeat count, direction, and easing. Multiple parameters can be animated simultaneously — each gets its own independent keyframe entry. The keyframe list in the right panel shows all configured specs; clicking one re-opens it for editing.

The genomeToSVGAnimated() function accepts the genome and an array of keyframe specs and compiles them directly into SMIL attributes on the SVG elements. Each spec type is mapped to the appropriate SMIL element:

// Geometric attributes → <animate attributeName="…"/>
smilAnimate('r', fromPx, toPx, spec)
smilAnimate('fill', fromHSLA, toHSLA, spec)
smilAnimate('opacity', 0, 1, spec)

// Transform attributes → <animateTransform type="…"/>
smilTransform('translate', 'x,y', 'x2,y2', spec)
smilTransform('rotate', fromDeg, toDeg, spec)
smilTransform('scale', 'sx sy', 'sx2 sy2', spec)

// Filter params → <animate> embedded inside the filter primitive
smilAnimate('stdDeviation', fromBlur, toBlur, spec)   // feGaussianBlur
smilAnimate('scale', fromScale, toScale, spec)         // feDisplacementMap
smilAnimate('values', fromHue, toHue, spec)            // feColorMatrix hueRotate

Easing is encoded as a SMIL cubic bezier spline via calcMode="spline" and keySplines. For alternate direction, the keySpline string is doubled ("ks;ks") to cover both halves. Linear easing omits calcMode entirely (it is the SMIL default).

When a layer has any transform animation (position, rotation, or scale), its group is split into three nested levels so independent animateTransform elements can coexist on the same layer without conflicting:

<!-- Outer: position -->
<g transform="translate(cx, cy)">
    <animateTransform type="translate" .../>
    <!-- Middle: rotation -->
    <g transform="rotate(θ)">
        <animateTransform type="rotate" .../>
        <!-- Inner: scale + fill + opacity -->
        <g transform="scale(sx, sy)" opacity="…">
            <animateTransform type="scale" .../>
            <animate attributeName="opacity" .../>
            <shape/>
        </g>
    </g>
</g>

When exporting, both the genome and the animation specs are embedded into the SVG's <metadata> block as custom namespace tags. HTML special characters in the JSON payload are escaped before embedding and unescaped on load:

<metadata>
  <evolvesvg:genome xmlns:evolvesvg="https://evolvesvg">
    { …genome JSON… }
  </evolvesvg:genome>
  <evolvesvg:animation xmlns:evolvesvg="https://evolvesvg">
    [ …keyframe specs array… ]
  </evolvesvg:animation>
</metadata>

Both tags are optional when loading: a genome-only SVG is accepted for building a new animation from scratch; an SVG with both tags restores the full editing session.

A hidden WebM export button is available when the animation is running. It renders the animation frame-by-frame to a <canvas> at 30 fps: for each frame it calls buildFrameGenome(tSeconds) to evaluate all keyframe specs at that time offset — applying easing via a binary-search cubic bezier solver — then rasterizes the resulting static genome SVG. A MediaRecorder stream captures the canvas at 8 Mbps. The output is saved as evolvesvg-animated.webm.