Tile Maker

A single-page static utility that generates a grid of colored tiles.

Features

• Grid size — set columns (X) and rows (Y), 1–60 each.
• Tile ratio — square (1:1), wide (2:1, 3:1), or tall (1:2, 1:3).
• Palette toggling — click any color swatch to turn it off; at least 3 colors must stay active.
• Adjacency toggle — "No identical colors touching" prevents any tile from sharing an edge with a tile of the exact same color. Requires at least 5 active colors (the control disables itself below that).
• Regenerate — re-roll a new random layout with the same settings.
• Animation — toggle "Rotate through 10 variations" to loop 10 layouts (all derived from the current seed), with a speed slider (0.25s–3s per frame).
• Download SVG — export the current static grid as a crisp, scalable SVG.
• Download animation code — exports the looping animation as two files: a self-contained .html (cycles the 10 frames with JS; edit FRAME_MS to change speed) and a standalone CSS-animated .svg.
• Shareable link — grid, ratio, adjacency, animation state, speed, and layout seed are all stored in the URL, so a copied link reproduces the exact same result.

Run locally

It's a single index.html with no build step or dependencies. Either:

• Double-click index.html to open it in your browser, or
• Serve the folder: python3 -m http.server then visit http://localhost:8000.

Deploy to GitHub Pages

1. Push this repo to GitHub.
2. Settings → Pages → Source: Deploy from a branch, branch main, folder / (root).
3. Your site will be live at https://<user>.github.io/tylemaker/.

Palette

Colors are matched to the reference image. To change them, edit the PALETTE array near the top of the <script> block in index.html.