hexabounds #

A small SvelteKit + Vite web app: a full-viewport hex grid where clicking hexes outlines them. Click several touching hexes and the outline merges into a single boundary that wraps the whole cluster. A side panel adjusts the hex radius and the grid angle.

Features #

• Click to select a hex (click again to deselect).
• Merged outline around any group of touching hexes — computed as the union boundary (edges shared by two selected hexes are dropped, the rest are stitched into closed loops). Non-touching clusters each get their own outline.
• Hex radius slider.
• Angle slider (0° = flat top/bottom, the default; up to 60°). The whole grid rotates about its center.
• Library — save the current shape (with its radius and angle) and pull it back up later with one click. Items show a live thumbnail, are renameable, and persist in localStorage.
• Export the current shape as SVG (transparent background) or PNG (white background, 2× scale). Exports are tightly cropped to the shape and bake in the current angle.
• Minimal palette: white, black, green, plus a couple of alpha tones.

Run #

This project uses pnpm.

pnpm install
pnpm dev

Then open the printed local URL. Other scripts: pnpm build, pnpm preview, pnpm check.

Where things live #

• src/lib/hex.js — grid generation, the outline (union-boundary) algorithm, and rebuilding hex geometry from saved ids.
• src/lib/export.js — cropping a selection to a standalone SVG and downloading it as SVG or PNG.
• src/routes/+page.svelte — the UI: settings panel, library, and SVG stage.
• src/app.css — color variables and base styles.