The tile is secretly a doughnut. That's why the seam lines up.
Tesser is a browser studio for tileable patterns. The trick to a repeat that actually lines up: draw the tile as if its edges wrap around a torus, and watch it tiled before you commit.
You drop a circle near the right edge of a tile and half of it slides off into nothing. When that tile repeats, the neighbor to the right starts with a clean edge, and now there is a hard line running down the pattern where the circle got guillotined. That line is the seam, and it is the one thing standing between "custom background" and "obviously stock." The fix is not to keep motifs away from the edges. It is to decide that the tile has no edges at all.
What it is
Tesser is a single-page studio for designing tileable patterns: pick a lattice, set a palette, tune the density, and export a file. It runs entirely in the browser with no account and no upload. The audience is people who want one good repeating tile, a website background, a phone-case print, a sticker sheet, without opening Illustrator and learning its pattern tooling to get there.
Every generative-art toy online will hand you something pretty. Almost none of them hand you a tile, a unit with controllable geometry that you can see repeating before you commit. That gap is the whole reason this exists. The live tiling preview is not a nicety bolted onto the export; it is the product.
Draw it on a doughnut
Here is the part worth stealing. A tile whose edges repeat is topologically a torus, a doughnut. Walk off the right edge and you come back on the left; walk off the top and you reappear at the bottom. If you accept that, the seam problem dissolves into one rule: whenever a motif crosses an edge, draw the part that overflowed on the opposite edge too. The guillotined half of that circle gets redrawn coming in from the left, so when two tiles sit side by side the two halves fuse into a whole circle straddling the boundary. Do that for all four edges (and the corners, which wrap in both directions at once) and the seam is not hidden, it is genuinely not there.
Tesser builds every pattern from a real repeat lattice: square, hexagonal, or running-bond brick, with this wrap-around drawing baked in rather than approximated. That matters for one concrete reason. The preview you scrub is generated by the exact same lattice code as the file you export, so what you see tiled edge to edge on screen is pixel-identical to what lands in the PNG. A lot of tools show you a smooth mockup and then export something subtly different; here the preview is the tile, rendered at device-pixel resolution and recomputed on resize. There is nothing to be surprised by later.
The seed that makes it repeatable
Randomness is how you escape a grid that looks like graph paper: a little jitter on position, size, rotation, and the pattern reads as organic instead of mechanical. The trouble with randomness is that it is a one-shot. You land on something you love, reload, and it is gone.
So none of the jitter in Tesser is actually random. It is driven by a seeded PRNG, and the seed is just a number that rides along with the rest of your controls. The same seed and the same sliders always reproduce the same tile, exactly. Randomize to explore, and when one clicks you can come back to it or hand the settings to someone else and they get your pattern, not their own. Reproducibility falls out for free once you refuse to call the real random number generator.
The honest part: designing and previewing is free and unlimited, but the free PNG export is capped at a preview-usable size. Print-DPI PNG, an editable SVG, and a zipped tile bundle are a one-time $12 Pro Pack, no subscription and no account, the unlock just lives in your browser. I would rather the free tier be a real tool than a crippled demo with a watermark, and charging once for the resolution people actually print at is the trade that keeps the whole thing running on static hosting at zero server cost.
Try it
Open it, pick the hex lattice, and set a base color with a triadic harmony. Then drag the density up until motifs start crossing the tile edges and watch the repeat stay continuous across every boundary in the preview. Hit randomize a few times, note the seed when something looks right, and export a PNG. The seam you were bracing for never shows up, because as far as the geometry is concerned, the tile never had one.
This post is part of the build log: every app my automated factory ships gets written up here, honestly. Browse everything at apps.charliekrug.com. Comments are open below.
Loading comments…