Gridfinity Picto

A web application that turns pictograms into 3D-printable Gridfinity storage blocks with embossed artwork.

Try it live: https://pacdaemon.github.io/gridfinity-picto/

What it does

Gridfinity Picto lets you search the ARASAAC pictogram database, extract colors from the selected image, and generate a Gridfinity-compatible block with the pictogram embossed on top — ready to export and 3D print.

Workflow

1. Search for a pictogram (e.g. "apple", "bathroom")
2. Select a pictogram from the results
3. Extract colors — adjust the palette size (2–16 colors)
4. Map colors to filament names, or skip colors you don't want embossed
5. Configure the block — type (tile/bin), height, magnet holes, emboss depth
6. Preview the 3D model in real time
7. Export as 3MF (multi-color) or STL (ZIP with one file per color)

How it works

The pipeline converts a raster pictogram into 3D geometry through these stages:

1. Color quantization — median-cut algorithm reduces the image to a configurable palette
2. Mask tracing — for each color, a binary mask is vectorized using potrace (WASM)
3. Polygon conversion — SVG paths are converted to polygon coordinates with proper hole detection (EvenOdd fill)
4. 3D assembly — polygons are extruded and placed on a parametric Gridfinity base built with Manifold

Development

npm install
npm run dev

License

MIT