Visualize herringbone, brick, basketweave, and diagonal tile patterns for your floor or wall.
Flooring math hides its own mess: the area divided by the tile area says how many tiles, and the pattern says how they actually land. This tool renders the pattern on your floor or wall - herringbone, brick, basketweave, or diagonal - so the cut tiles, the ones that cost money and patience, are visible before you buy. The surprise is that pattern waste does not follow the area math: a 36 in square in 12 x 6 in herringbone tiles takes 19 tiles, not the 18 the area arithmetic promises, because the pattern repeat cell does not line up with the room edges.
A concrete input and expected output from the current implementation.
Input
Pattern: herringbone; tile: 12 x 6 in; area: 36 x 36 in
Expected output
The layout shows the herringbone repeat: 18 in across by 12 in up, three tiles per cell (two horizontal, one vertical). The 36 in square holds six full cells, and the tile count comes to 19: 17 whole tiles and 2 cut tiles, each cut trimmed to a 6 x 6 in piece with a matching 6 x 6 in offcut - about 5 percent waste before any breakage allowance.
The herringbone repeat cell for a 12 x 6 in tile spans L + W = 18 in across and 2W = 12 in up and holds three tiles. The 36 in square holds six cells exactly, but the pattern's last column of vertical tiles straddles the top and bottom edges, so two of its tiles are cut in half, making 19 tiles instead of 18.
The four patterns differ in their repeat cell. Brick, the running bond, shifts alternate rows by half a tile. Herringbone turns every tile 90 degrees and offsets each column by half a tile length, so a 12 x 6 in tile repeats on an 18 x 12 in cell of three tiles. Basketweave pairs two rectangles into a square block that repeats exactly. Diagonal rotates tiles 45 degrees to the walls, so every straight boundary meets tile corners rather than edges.
The layout uses whole tiles only where the area is a whole number of repeat cells, and even then the pattern edge can fall mid-tile. In herringbone, columns of vertical tiles are offset half a tile from each other, so the last column typically ends in half tiles at the top and bottom of the area; diagonal adds a triangular cut along every wall. Each partial tile renders as a cut, and its offcut is waste.
Whole tiles appear only where the area is an exact multiple of the pattern repeat cell. A 12 x 6 in herringbone repeats on an 18 x 12 in cell of three tiles; 36 in is exactly two cells across and three up, yet the last column still ends in two half-tile cuts, because each column of vertical tiles is offset half a tile from the next. The division is exact; the pattern is not.
Not directly. The count of tiles that touch the area is the true need, but add 5 to 10 percent on top for tiles broken in shipping or during cutting, and remember that grout drift can force a trim at the far edge. Buy the extra boxes from the same dye lot - tile batches differ in shade, and replacements ordered later may not match.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Create customizable checklists with groups, due dates, and priorities for any project.
Design a printable daily planner with time blocks, goals, and priority sections.
Measure your typing speed in WPM and accuracy with real-time feedback and stats.
Pomodoro timer with built-in ambient noise (rain, cafe, forest) generated via Web Audio API oscillators.
Stay focused with a customizable Pomodoro timer featuring work and break intervals.
A precise stopwatch with lap tracking, split times, and exportable results.