Heerich.js

A tiny, zero-dependency JavaScript engine that builds 3D voxel scenes and renders them to crisp, infinitely-scalable SVG — no WebGL, no canvas. CSG boolean ops, oblique/perspective cameras, per-face styling, DOM-interactive output.

By meodai (David Aerne, creator of the color-names/farbvelo/poline projects). MIT, single-file core, 592 GitHub stars and npm heerich@0.16.0 as of 2026-07-01. Launch tweet: 2,503 bookmarks, 2,679 likes. Source: X/@meodai, 2026-03-28 · Source: GitHub meodai/heerich and npm registry, 2026-07-01

What it is

heerich.js represents geometry as a sparse integer voxel grid and projects it to 2D SVG polygons — depth-sorted back-to-front, with hidden faces culled. Because the output is vector (not raster like Three.js/canvas), it scales to any resolution, prints cleanly, and every face is a real DOM element you can hook events onto. Named after Erwin Heerich, the German sculptor of geometric cardboard constructions whose additive/subtractive method maps directly onto voxel art. Source: GitHub meodai/heerich, 2026-06-12 · Source: DEV Community, https://dev.to/jqueryscript/heerichjs-svg-voxel-engine-for-3d-scenes-14ji, 2026-06-12

npm install heerich   # zero dependencies, UMD + ESM

import { Heerich } from 'heerich'
const h = new Heerich({ tile: 40, camera: { type: 'oblique', angle: 45, distance: 15 } })
h.addGeometry({ type: 'box', position: [0, 0, 0], size: 5 })
document.body.innerHTML = h.toSVG({ padding: 40 })

Capabilities

Source: GitHub meodai/heerich, 2026-06-12

Where it fits

The vector-not-raster choice makes heerich.js a different tool than WebGL voxel engines: ideal for print-quality isometric illustrations, generative art, technical diagrams, landing-page hero marks, and lightweight interactive 3D where you want selectable/animatable faces and zero GPU dependency. Contributors include creative coders Varun Vachhar (winkerVSbecks) and Liam Egan (liamegan). At launch, the author flagged it as v0.1.0 and wanted to see Minesweeper, crosswords, and Tetris built on it. Source: X/@meodai thread, 2026-03-28

For raster/GPU 3D or shader materials, reach for Three.js/R3F or Shader Effects Libraries instead; for decorative micro-3D see Frontend and Design Skills. heerich.js sits alongside the SVG/vector side of the Frontier Stack 2026 toolbox. Demo video on the launch tweet. Source: X/@meodai, 2026-03-28

Source snapshot

Version check on 2026-07-01: npm heerich latest 0.16.0, MIT, unpacked size 231,038 bytes, modified 2026-06-21. The GitHub repo had 592 stars, 15 forks, 188 commits, no GitHub releases, no public tags returned by git ls-remote --tags, and default-branch HEAD ae80777feae920b5c23bd223e01ccbf2719ff821. The reviewed video/contact sheet shows the interactive guide, not only the launch text: camera controls, code panels, voxel boxes, coordinate sections, and live SVG examples. Source: npm registry, GitHub, and local contact sheet /tmp/xreview-frames/2038027659209224689.jpg, 2026-07-01

---

Timeline

• 2026-03-28 | @meodai releases heerich.js v0.1.0: "a tiny voxel engine that renders 3D scenes to SVG — Boolean ops, oblique & perspective, zero dependencies, pure vector output, infinite scaling." Named after Erwin Heerich. 2,503 bookmarks, 2,679 likes; demo video attached. Source: X/@meodai, 2026-03-28
• 2026-06-12 | Wiki page created from bookmark absorption — researched GitHub repo + npm + DEV writeup (MIT, zero-dep, CSG booleans, oblique/perspective/orthographic/isometric cameras, occlusion culling, decals, JSON serialize, DOM-interactive faces). Source: GitHub meodai/heerich, 2026-06-12
• 2026-07-01 | Deep-reviewed local video frames and refreshed source snapshot to npm 0.16.0, GitHub HEAD ae80777, no release tags, and interactive guide evidence. Source: npm registry, GitHub, 2026-07-01