OneTaskBy Tim King · Updated
Truchet Tile Pattern Generator
Seamless Arc and Diagonal Tiles, Free PNG
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Truchet Tile Pattern Generator works
This Truchet tile pattern generator tiles one shape into many. A Truchet tile pattern is built from one small square tile drawn in two orientations, placed at random on a grid. Because every tile's marks meet its edges at the same points, the arcs join up into looping paths no matter how the coin lands. Pick a style, the number of cells, a line weight and a palette, then save a seamless square tile or a tiled wallpaper as PNG. Nothing leaves your browser.
Truchet tile pattern generator: how the tiles work
Sébastien Truchet described the idea in 1704 using a square split diagonally into two colours. Cyril Stanley Smith later swapped the diagonal for two quarter-circle arcs joining the midpoints of adjacent sides, which is the version most people picture today. In both cases a single tile has two orientations, and since the marks always touch the edges at the midpoints, any random arrangement produces a continuous design. Arcs gives you the Smith tiles: winding paths that close into loops or wander off the edge. Double arcs adds a second, concentric arc at each corner so the paths read as ribbons. Diagonals draws only the straight diagonal, which produces a maze of zig-zag lines, and Triangles fills half of each cell with the ink colour, the original Truchet tile, giving a bold black-and-white block pattern.
Why the export is seamless
The tile you save is a square containing a whole number of cells, and each cell's marks end exactly on the cell boundary. A path leaving the right edge at a midpoint continues from the left edge at the same midpoint on the next copy, so the tile repeats in every direction without a visible seam. The preview shows the tile repeated across the stage, three across by default, so you can check the join before saving; set Preview repeats to 1 to see a single tile at full size, or 6 to see how it reads as a texture from a distance.
Cells, weight and seed
Cells per tile sets how many cells sit along each edge of the tile: 4 gives large, obvious arcs, 16 gives a fine texture. Line weight is a percentage of the cell size, so it scales with the export resolution and looks the same at 256 or 2048 pixels. The seed decides which orientation each cell gets. Regenerate picks a new seed; typing a seed you saved earlier brings that exact layout back, so a tile you liked can be re-exported at a different size or in a new palette with the same arrangement.
Saving
Export as a tile at 256, 512, 1024 or 2048 pixels square for use as a repeating background in CSS, a texture in a 3D scene or a fill in a design tool, or as a tiled wallpaper at 1920 × 1080 or 3840 × 2160 where the tile is repeated at the preview scale to fill the screen. Files are PNG, generated on your machine and saved directly from the browser.
The drawing library is bundled with the site, so the page keeps working offline once loaded.
FAQ
What is a Truchet tile?
A square tile with a simple, asymmetric mark that can be placed in two or four orientations. Arranging many copies at random produces a pattern that looks designed because the marks are laid out to connect at the tile edges. The classic marks are a diagonal split or two quarter arcs.
Can I use the tile as a CSS background?
Yes. Save a tile at 256 or 512 pixels and set it as background-image with the default
repeat. Because the tile is seamless, the browser can repeat it across any element without a
visible grid. For a lighter file, the smaller tile sizes are usually enough.
Why does the pattern look different when I change the number of cells?
The seed feeds a random sequence, one flip per cell in reading order. Changing the cell count changes how many flips are drawn per row, so the same seed lays the flips out differently. Fix the cell count first, then use Regenerate to explore seeds.
How is this different from the CSS pattern generator?
The CSS pattern tool writes stylesheet rules that draw stripes, dots and grids with gradients. This tool produces an image file, so it works anywhere an image does: slide backgrounds, textures, print, or as a wallpaper.
See also: all Generative Art tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Wallpaper Generator
Random abstract backgrounds, six palettes, saved at desktop or phone size.
Perlin Noise Texture
Clouds, marble, wood grain and more from layered Perlin noise; PNG up to 4K.
Abstract Art Generator
Random shapes, lines, blocks and splatter in five palettes, seeded.
Flow Field Generator
Particles traced through a Perlin noise field; the classic generative-art look.
Random Walk Art
Walkers take thousands of random steps; the path becomes the picture.