07 / 07
Tessera
- TypeScript
- SVG
- Perlin noise
https://tessera01.vercel.apphttps://github.com/moritzsalla/tessera
![]()
A browser tool that draws a grid and colours every cell by a function you write.
The field is an SVG of rectangles, sized by a width and height in cells and a zoom factor.
What makes it a tool rather than a sketch is the function input. Each cell’s fill comes from
an expression evaluated per cell and per channel, with the cell’s x and y, the channel’s
own value c, and noise, sin, cos, tan, floor, ceil and round in scope.
The default is noise(x*c, y*c). The result is mapped from 0–1 to 0–255 and written back as
a hex fill. Red, green and blue are evaluated separately, so the same expression produces
three different surfaces that only agree where the channels happen to line up.
Perlin noise rather than random, for the reason it is usually chosen: random values distribute too evenly to read as anything. Seed, octave count and amplitude falloff are all exposed as controls, which means the character of the pattern is adjustable rather than regenerated until something works.

Cells can be deleted by clicking, or by dragging across the field with the mouse held down. The generated grid is a starting point that gets edited by hand — the tool produces a structure, not a finished image.

Output is SVG, downloaded as a file. That was the point of building it in vectors rather than canvas: the pattern leaves the browser as editable geometry and opens in Illustrator as paths, at any size. A grid this dense is not something anyone would place by hand, and a raster export would end the work at the moment it was generated. An export of a few thousand rectangles will still stall a vector editor.


The interface uses 98.css, so it is a draggable Windows 98 window with a title bar.