HexGrid is a lightweight web-based tool designed to procedurally generate customizable hexagonal grid patterns using dynamic relaxation algorithms and triangle grouping. It's ideal for creating TTRPG maps such as towns, roads, sewer systems, or even entire countries.
This tool is inspired by and based on code from kchapelier’s JavaScript port of Cédric Guillemet’s implementation of Oskar Stålberg’s irregular grid algorithm within a hexagon.
The generated grids can be exported as .png images with filenames that include the relevant generation parameters, ensuring easy reproducibility and version control.
HexGrid uses a combination of procedural generation, triangle pairing, and point relaxation to form irregular patterns inside a hexagon. The process follows these steps:
Users can customize various grid parameters:
- Side count: Number of sides the base hexagon will use.
- Seed: Determines random generation (user-defined or randomly generated).
- Relaxation type:
none,standard, orweightedsmoothing of point positions. - Grouping iterations: Controls how many attempts are made to combine triangles into quads.
- Line width & color
- Canvas size: Determines resolution of the output image.
- JavaScript listens for UI changes and updates the grid preview in real time.
- Clicking the Generate button triggers the full grid construction and rendering pipeline.
- A hexagonal grid is subdivided into triangles and optionally grouped into quads.
- Each point is repositioned using the chosen relaxation method:
- Standard: Averages neighboring point positions.
- Weighted: Weighted average based on distance to neighbors (produces tighter patterns).
- Side enforcement ensures that the outer boundary maintains a near-circular hexagon if enabled.
- The entire structure is rendered on an HTML5
<canvas>. - The drawing respects line thickness, color, and hex geometry.
- Users can download the final result as a
.pngfile. - Filenames are auto-generated with all relevant parameters
- 🔷 Generate complex hexagonal grid layouts
- 🎚️ Customizable parameters:
- Sides, seed, iterations, relaxation, canvas size, line styles
- 💾 PNG export with parameter-based filename
- 💡 Random seed generator for endless variations
- 🔁 Lightweight and self-contained—runs in any modern browser
- Procedural TTRPG map generation
- Stylized town or dungeon layouts
- World-building tools
- Pattern design or abstract visualization
.pngimages via canvas- Auto-labeled filenames for easy organization
- Future plans may include
.svgexport
- Inspired by Oskar Stålberg's irregular grid algorithm
- JavaScript port by kchapelier
- C++ version by Cedric Guillemet
- Modified and extended by this project
- Licensed under the MIT License
✨ Feel free to fork, adapt, and extend this tool for your creative projects, games, or design experiments!