Generative tools
for the analogue world

14 self-contained, single-file HTML tools for pen plotting, camera experiments and social visuals. No build step, no server — every tool is one .html file that runs anywhere. Inspired by Simon Willison's HTML tools.

Plotting & Print

4 SVG and PDF generators for pen plotters and paper — single-stroke fonts, calibration, page formats

Camera & Vision

6 Webcam experiments with in-browser ML — segmentation, depth, landmarks, generative output
Camera Depth Performance Tool

Event-focused camera compositor combining MediaPipe face/hand landmarks with Depth Anything v2 small depth masking, view modes, threshold controls, and performance metrics.

webcammediapipetransformers.jsdepthfacehandsperformanceart
MediaPipe Vision inspector

Webcam sandbox for Google MediaPipe Tasks Vision — face, hands, pose, holistic, gestures, selfie multiclass segmentation, timing and JSON summaries. Uses @mediapipe/tasks-vision from CDN.

mediapipewebcamfacehandsposesegmentationinspector
Transformers depth lab

Chrome laptop lab: webcam or image → monocular depth via Transformers.js (@huggingface/transformers). Swap HF Hub ONNX models (Xenova / onnx-community), WASM or WebGPU, timings and JSON summaries. Models load from Hugging Face CDN.

transformers.jsdepthwebgpuwasmwebcamhuggingfaceinspectoronnx
Webcam adaptive Voronoi hatch

Webcam → body segmentation → Voronoi hatch; optional gradient relief or TensorFlow.js AR portrait depth for shading; spacing min/max mm; A6–A3 SVG export.

webcamp5body-segmentationtensorflow.jsvoronoihatchingsvgdepth
Webcam adaptive Voronoi hatch (conference)

Conference mode wrapper: opens adaptive Voronoi hatch with stage/fullscreen controls and MIDI mapping enabled.

webcamconferencemidifullscreenvoronoihatchingsvg
Webcam Silhouette Mosaic

Webcam + ml5 BodyPix person mask, grid or Voronoi planes, hatch pattern fills, and SVG export for pen plotters.

plottersvgml5webcambody-pixgenerative

Design & Social

4 Banners, reels and visuals for meetups and social media

Single-file HTML tools — bookmark them, copy them, host them anywhere. The SvelteKit shell only adds this landing page and a viewer.

colophon open source · MIT type: IBM Plex Mono · Hershey · EMS icons: generative, seeded per tool