Spiral Halftone SVG From Image Tone

A spiral halftone SVG can turn a photograph's tone into one continuous line whose thickness gathers in shadows and opens into light. This tutorial samples an Archimedean spiral, bounds the tonal mapping, converts variable width into editable vector geometry, and stores a reproducible edition receipt.

Spiral halftone SVG begins with one line

Choose an Archimedean spiral r = a + bθ so successive turns remain evenly spaced. The path begins outside the composition and moves inward, or reverses depending on the desired drawing gesture. A spiral halftone SVG uses local stroke mass to reproduce tone while the unbroken trajectory remains visible as the piece's central idea.

Set page size, center, outer radius, turn spacing, direction, and crop before sampling the image. Keep enough gap for the maximum dark stroke plus fabrication tolerance. The harmonograph poster tutorial is an adjacent continuous-line practice, but its oscillating curve follows time rather than image luminance and physical spacing.

Synthetic plate geometry (not fabricated output): define 240×240 millimeters, a 112-millimeter outer radius, eight-millimeter turn spacing, clockwise travel, and a six-millimeter terminal radius. A 0.6-millimeter clearance leaves a 7.4-millimeter maximum ribbon budget. Fixing these example dimensions before tone sampling prevents the image from silently rewriting the geometry constraint.

Prepare the image as a tonal instrument

Decode orientation, crop deliberately, composite alpha against the intended paper, and convert pixels into a declared luminance field. Add a mild blur at a scale related to spiral spacing so tiny pixel noise does not whip stroke width on every sample. Preserve important edges with masks or a limited local contrast curve rather than global over-sharpening.

The MDN getImageData reference documents pixel access and current color-space options. Image tone vector art must record source hash, crop, transform, color handling, and license. A beautiful vector does not erase the provenance of the photograph beneath it.

Synthetic plate fixture (not an archived production image): prepare a 720×720 linear-light field, composite transparent pixels onto an intended cream paper, and apply a 2.4-millimeter output-space blur. Its example manifest carries a crop matrix and placeholder source SHA-256. Under the stated rules, a different crop becomes a new plate rather than a rendering preference, and an implementation should retain both prepared-source dimensions.

Sample by arc length, not angle alone

Equal angle steps produce points that spread farther apart near the outer radius because arc length grows with r. Estimate or integrate arc length and choose points at roughly constant physical spacing along the curve. That creates stable geometry for tone sampling, width changes, simplification, and plotting. Increase resolution only until the narrowest intended feature survives.

At each point, map SVG coordinates back into the prepared luminance field with a documented interpolation method. Spiral halftone SVG sampling should clamp outside-image coordinates to paper white or an authored border rule. Store θ, position, tangent, luminance, and width so diagnostics can trace any dark knot back to a source sample.

Synthetic numerical fixture (not measured plate data): the generator advances by a 0.7-millimeter arc-length target. At each step it estimates ds/dθ = √(r²+b²), proposes Δθ = 0.7/ds, and corrects once at the midpoint. A constructed expected output contains 50,418 samples with segment lengths from 0.6996 to 0.7004 millimeters, demonstrating the invariant that an implementation should check against fixed-angle sampling.

Map darkness to a bounded width curve

Convert darkness d into width using a curve such as minWidth + pow(d, gamma) × range. Choose gamma by reviewing shadow separation, midtone recognition, and highlight survival at final size. Clamp width below the turn spacing minus clearance so neighboring loops do not merge unintentionally. A hard black region may still need a local cap.

Smooth width along arc length with a bounded filter that preserves strong edges but removes single-sample chatter. Continuous halftone path tone should feel responsive, not electrically noisy. A spiral halftone SVG gains character from the balance between recognizable image structure and the visible rhythm of the spiral itself.

Synthetic width fixture (not observed plate geometry): use width = 0.7 + d^1.35·5.8 millimeters and cap width slope at 0.18 millimeter per millimeter of travel. The constructed expected maximum is 6.47 below the 7.4-millimeter budget, with an illustrative highlight width of 1.06. The runnable artifact checks the bounded-width principle for its own samples.

Choose a variable-width vector strategy

Ordinary SVG stroke-width is constant per element; varying it along one path needs a representation choice. The simplest approximation splits the centerline into many short paths grouped into a limited set of width buckets, with round caps and overlap to hide seams. A more exact method constructs left and right offset outlines from local normals and joins them into a filled ribbon.

The SVG 2 painting specification defines stroke properties, while renderer behavior at dense joins still needs testing. Variable-width SVG spiral exports should keep an optional centerline layer. Spiral halftone SVG editions remain editable when width data and geometry are not flattened into one opaque bitmap.

Synthetic export comparison (not observed file data): designate a filled ribbon as the master and a 24-bucket stroked form as the browser preview. Example budget values assign 86 KB and a 0.8-percent raster difference to the preview, versus 412 KB to the ribbon. These are teaching thresholds for discussing smooth pressure-like transitions; an actual export must report its own sizes and pixel comparison.

Build offset outlines without self-intersections

For each sampled center point, compute a normalized tangent, perpendicular normal, and half-width. Offset to left and right boundaries, then join adjacent segments. At rapid turns or steep width changes, miter joins can spike and inner offsets can cross. Use round or bevel joins, limit width slope, detect segment intersections, and split or locally repair the ribbon when needed.

Near the center, curvature rises while available circumference shrinks. Stop at a minimum radius or transition into a designed terminal mark instead of forcing unstable geometry to the exact center. Spiral halftone SVG should make this endpoint an artistic choice documented in the edition, not a floating-point accident.

Synthetic collision fixture (not a captured test result): seed three offset intersections before repair—two at a dark hair edge and one 9.2 millimeters from the center. The expected repair sequence limits local width slope to remove the hair crossings, then terminates one turn earlier with a round six-millimeter dot for the remaining inner crossing. The artifact should assert that the resulting fixture collision list is empty.

Run the bounded teaching fixture before adapting the pattern to production.

Runnable artifact — spiral-width-sampler.test.mjs

import assert from "node:assert/strict";const spacing=8,min=0.7,max=6.5,gamma=1.4;const width=d=>min+Math.pow(d,gamma)*(max-min);const samples=Array.from({length:101},(_,i)=>width(i/100));assert.ok(samples.every(w=>w>=min&&w<=max&&w<spacing));assert.ok(samples.every((w,i)=>i===0||w>=samples[i-1]));console.log("PASS: spiral widths remain inside turn clearance");

Run node spiral-width-sampler.test.mjs. Expected receipt: PASS: spiral widths remain inside turn clearance.

Simplify while protecting tone and closure

Simplify the centerline or outlines in physical output units, not arbitrary screen pixels. Protect extrema, high-curvature points, strong width changes, crop intersections, and the terminal shape. After simplification, recompute intersection tests and compare raster previews at target size. Fewer path commands can improve editing and load time, but an aggressive tolerance can erase the face the line is meant to reveal.

The SVG Paths specification defines path data and grammar. Compare with SVG path morphing when command topology must animate; this edition instead optimizes a static continuous line. Spiral halftone SVG proof includes both geometry size and visual difference from the unsimplified reference.

Synthetic simplification fixture (not a rendered proof): Douglas–Peucker tolerance begins at 0.08 millimeter, while protected samples at width extrema and high curvature bypass removal. Its expected counters fall from 100,836 outline points to 28,440. The example acceptance targets at 240 millimeters are at most a 0.12-percent changed-pixel ratio and no new intersections; postcard recognizability remains a proposed review question, not a completed blind A/B result.

Design diagnostics as part of the piece

Show the prepared grayscale source, raw spiral centerline, luminance samples, width plot over arc length, collision overlay, width-bucket preview, final ribbon, and a one-color fabrication view. Let reviewers scrub a point to see its source pixel and output segment. These views make the translation legible without claiming tone error alone determines beauty.

Compare guilloche SVG patterns for another line-density language with different mathematical intent. SVG spiral engraving should be tested at thumbnail, article, social, and intended physical scale. Fine lines that sing at zoom may disappear in print or merge under a cutter.

Synthetic scrubber fixture (not archived diagnostic output): select sample 18,204 at arc length 12,743 millimeters with source coordinate (431, 288), luminance 0.18, width 5.91, local clearance 2.09, and collision false. The expected interface shows that chain beside a rendered eye so a reader can inspect where tone becomes geometry, with the selected segment remaining highlighted during zoom.

Archive one continuous-line edition

Export the editable SVG, centerline coordinates, width samples, prepared source thumbnail, source hash and license, page geometry, spiral equation, sample spacing, tone curve, smoothing, join policy, simplification tolerance, palette, renderer version, and collision report. Hash the final file and include a raster proof from the supported browser and any fabrication software.

Revisit spiral halftone SVG when the source, crop, output size, renderer, or physical process changes. The edition succeeds when the image reads through changing line mass, the spiral remains perceptible as one deliberate gesture, dense regions stay technically valid, and another artist-engineer can recover every transformation without copying a mystery export.

Synthetic manifest specification (not an existing archive): require 50,418 center samples, a width array, repaired ribbon, collision JSON, a 240-millimeter raster check, postcard preview, and plotting preview. Their generated hashes should form one manifest. A future palette change may reuse geometry; a new width curve may not, because it changes the continuous-line edition rather than its presentation.