What is it
four20 is a browser-based SVG tracing library that converts raster images and text into clean, scalable vector paths. It's built on Peter Selinger's potrace algorithm — the same foundation behind Inkscape's bitmap tracing — extended with path post-processing and typographic utilities.
Type something above, pick a font, and watch it trace to SVG in real time. Or switch to draw mode and sketch anything freehand.
Why it exists
Three.js can extrude any 2D shape into a 3D solid via ExtrudeGeometry.
But it requires outer paths to wind clockwise and holes to wind counter-clockwise —
otherwise faces invert, surfaces disappear, and the geometry breaks.
Every potrace port I found at the time outputs paths in arbitrary winding order. four20 runs a geometric post-pass that detects containment relationships between paths and re-orders winding so the output is always compatible with Three.js — no manual cleanup, no special cases.
How it works
- Raster input is traced using the potrace algorithm — a sequence of thinning, polygon fitting, and curve optimisation steps that finds the minimal set of Bézier curves describing each shape boundary
- SVG output paths are analysed with point-in-polygon tests to determine which paths contain which
- Containment depth determines winding: even depth → clockwise (outer), odd depth → counter-clockwise (hole)
- Text is rendered to a canvas using the browser font engine, then the pixel data is fed to the tracer — any web font works