Tiles Mosaic Tool
Click to playA type + image mosaic tool that maps real glazed tiles onto anything, with quadtree or grid tiling.
Type
Side projectWeb tool
Started from
Glazing course, Sem 4IDC School of Design
Built with
React 19 + ViteHTML5 Canvas
Thanks
Akash & Karthikayfor the documentation
Where it started
I started out wanting to make a typeface from the glazed tiles we made in semester 4, in an epic glazing course at IDC. (Thank you Akash and Karthikay for the documentation.)
Getting annoyed with OTF files, I vibe-coded a tool to map the tiles by colour and gradient instead… and then kept adding everything I was imagining. It became a much bigger thing than I had planned.
Type mode: tiles fill the letterforms, and the whole thing animates.
“I love glazing”
honk, with a shadow
serif, in small tiles
01
Glaze types & mosaics
Images, gradients, animation, borders and what not.
How it maps
Every region of the input is matched to the closest real tile, either directly by colour or along a gradient line drawn across the 8 × 8 palette of glazes. A Bézier curve reshapes brightness before matching, and vibrant tiles can be pinned to exact spots on the gradient.
Grid mode lays tiles out evenly. QuadTree mode splits the image by detail: small tiles where things are busy, big tiles where they’re flat, and it can scale them along a direction too.
Image mode with QuadTree: detail where it matters, big tiles where it’s flat.
Devanagari lettering, tiled
With a tiled border
A framed scene, rebuilt in glaze
A painting, re-tiled
02
Update: GIFs
tiles-mosiac now processes GIFs.
Frame by frame
Upload an animated GIF and every frame runs through the same mosaic pipeline, then exports as a new animated GIF. Wave, looping-gradient and resolution-zoom animations can be exported too.
नमस्ते, frame by frame
Play with it
It’s live at kshtj11.github.io/tiles-mosiac if you want to play. The UX is rough for now (I kept iterating as I wanted more features); I’ll make it more user-friendly later :>
More play