Four small, separate simulators for the math behind tessellating patterns.
Created by Aditya Peri
1. Image-Trace Tessellation
Upload, paste (Ctrl/Cmd+V while hovering here), or pick an example
below. Both views share the same square tile and grid size, so they
stay in sync.
Line Trace
Color Trace
Or try an example:
Added results — tap one to download/share, × to remove
2. Corner-Block Tile
Upload, paste (Ctrl/Cmd+V while hovering here), or pick an example.
One corner image gets rotated 0°/90°/180°/270° around a shared center
to build one pinwheel-symmetric 2×2 block, then repeated by
translation.
Or try an example:
Added results — tap one to download/share, × to remove
Experimental: Material Map Generator
Hidden A/B experiment, desktop only. Crop a tileable region from an
image, blend its edges for a seamless repeat, then derive a small set
of texture maps from it — base color, normal, height, ambient
occlusion, and opacity. These are image-derived approximations (built
from luminance, contrast, and local gradients), not a physical
material scan — brightness isn't real depth. Everything lines up
pixel-for-pixel since every map is generated from the same blended
base.
Base Color
Height
Normal
Ambient Occlusion
Opacity
Or try an example:
Scroll to zoom, drag the image to pan. Drag the red square to move it, drag its corner handle to resize. The square you choose becomes the tile.
3. Draw Your Own Pattern
Draw one tile by hand. B brushes, E erases, [ /
] resize the brush. The dashed red line always marks the full
tile bounds — this view never zooms. Click "Expand" to draw in a larger
popup version of the same tile; click the X to close it. "Plain" is a
straight repeat; "Corner-block" is section 2's rotational symmetry —
draw near the bottom-right corner, since that's the copy that stays
unrotated; "Mirror" switches to two separate drawing surfaces below —
draw on either one and it paints its own live reflection across the
dashed blue axis line, like an inkblot. Export PNG in Mirror mode
downloads those two canvases directly rather than a tiled grid.
These are their own drawing surfaces — draw on either one directly and it mirrors live across the dashed axis line.
Horizontal mirror
Vertical mirror
4. Thermal Map Tessellation
Click the color view to drop heat points; drag an existing one to move
it, double-click to remove it. Distance wraps around the tile edges
(not just straight-line distance), so a point near one edge also warms
the opposite edge — that's what makes the heat field itself tile
seamlessly. Both views share the same points, and either one is
clickable — drop, drag, or double-click to remove a point on whichever
view you prefer. [ / ] adjust the radius that gets
applied to the next point you place.