Tile a Plane
Geometric plane filling. Runs entirely in your browser, so your data never leaves your device.
Output
The result appears here as you type.
How to use Tile a Plane
- 1. Pick the tiling pattern. Choose Square, Triangular, Hexagonal, Brick, or Rhombille from the Tiling setting, each producing a different geometric pattern of repeating shapes.
- 2. Set the grid size and colors. Choose Rows and Columns for how many tiles fill the grid, then set Color A and Color B for the two alternating fill colors used across the pattern.
- 3. Set canvas size and outline style. Choose Width and Height in pixels, along with Line color, Background color, and Line width to control the outline around each tile.
- 4. Review or export the tiling. The SVG renders live as you adjust settings. Review the pattern on screen, then download or copy the SVG for a design project or presentation.
When to use Tile a Plane
Tile a Plane generates geometric tessellation patterns, from a simple checkerboard to hexagonal, brick, and rhombille layouts, as a rendered SVG. Use it whenever you need a repeating pattern for design, teaching, or a background asset without drawing each tile manually.
- Generating a checkerboard background asset. A design project needs a classic checkerboard pattern as a background element, and setting Square tiling with two contrasting colors produces it as a ready-to-export SVG.
- Teaching tessellation types in a geometry class. A geometry lesson covers the three regular tessellations, square, triangular, and hexagonal, and generating each side by side gives students a clear visual comparison of how the shapes tile the plane.
- Designing a tumbling-blocks illusion pattern. A design or art project wants the classic tumbling-blocks optical illusion, which the Rhombille tiling produces directly by alternating rhombus shading in a hexagonal arrangement.
- Creating a brick-wall texture for a mockup. A UI or architectural mockup needs a simple brick-pattern texture, and the Brick tiling option generates an offset rectangular grid ready to drop into the design as a background layer.
Examples
An 8×8 checkerboard
Output
An SVG square tiling with alternating colors.
A rhombille (tumbling blocks) tiling
Output
An SVG rhombille tiling shaded like stacked cubes.
About the Tile a Plane tool
Tile a Plane is a free online tool that works entirely inside your web browser. Geometric plane filling. Because the processing happens on your own device, nothing you enter is uploaded, logged or stored anywhere.
This page is one of 234 Math utilities on EditSafely. Each one does a single job well, and all of them follow the same rule: your input stays on your machine.
You can shape the output with 10 settings, including Tiling, Rows, Columns and Color A, and the result refreshes the moment you change one. 2 worked examples further down the page show exactly what the tool produces for real inputs.
Because nothing leaves your device, the tool is suitable for sensitive content such as internal documents, credentials or customer data. It also responds instantly, since every keystroke is handled on your own machine rather than by a remote API.
Frequently asked questions
Does Tile a Plane cost anything?
Yes, it is completely free. All 2,658 tools on EditSafely work without an account, a subscription or usage limits.
Does the generator send anything to a server?
No data leaves your device. The whole tool is JavaScript that runs inside your browser tab, so there is no upload, no server-side processing and no log of what you did. If you disconnect from the internet after the page loads, it keeps working.
How do I get a different result?
Run the generator again. Each run is computed fresh on your device, and any options you change are applied to the next result immediately.
Do I need to sign up or install anything?
Nothing to install and no account needed. Open the page in any up-to-date browser, including on a phone or tablet, and the tool is ready.
Can I save what the tool produces?
Yes. Use the download or copy controls in the output panel to keep the rendered result once it looks the way you want.