Back to Homepage
Interactive Hex Grid Pattern Mock
Construct spatial vector arrays utilizing clean programmatic math foundations.
Hexagonal Vector Array Engine
Configure spatial math vectors, coordinate systems, and regular hexagon geometries.
Spatial Math Vector Canvas61 Total Hex Cells
Parametric Grid Controls
32 px
3 px
4 Rings (61 Cells)
Cube Math Invariant
x + y + z = 0
Distance = max(|x|, |y|, |z|)
Export Programmatic Vector Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="100%" height="100%"> <rect width="100%" height="100%" fill="#0F172A"/> <polygon points="185.2,234.0 185.2,266.0 157.5,282.0 129.8,266.0 129.8,234.0 157.5,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="215.5,286.5 215.5,318.5 187.8,334.5 160.1,318.5 160.1,286.5 187.8,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="245.8,339.0 245.8,371.0 218.1,387.0 190.4,371.0 190.4,339.0 218.1,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="276.2,391.5 276.2,423.5 248.4,439.5 220.7,423.5 220.7,391.5 248.4,375.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="306.5,444.0 306.5,476.0 278.8,492.0 251.0,476.0 251.0,444.0 278.8,428.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="215.5,181.5 215.5,213.5 187.8,229.5 160.1,213.5 160.1,181.5 187.8,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="245.8,234.0 245.8,266.0 218.1,282.0 190.4,266.0 190.4,234.0 218.1,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="276.2,286.5 276.2,318.5 248.4,334.5 220.7,318.5 220.7,286.5 248.4,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="306.5,339.0 306.5,371.0 278.8,387.0 251.0,371.0 251.0,339.0 278.8,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="336.8,391.5 336.8,423.5 309.1,439.5 281.4,423.5 281.4,391.5 309.1,375.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="367.1,444.0 367.1,476.0 339.4,492.0 311.7,476.0 311.7,444.0 339.4,428.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="245.8,129.0 245.8,161.0 218.1,177.0 190.4,161.0 190.4,129.0 218.1,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="276.2,181.5 276.2,213.5 248.4,229.5 220.7,213.5 220.7,181.5 248.4,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="306.5,234.0 306.5,266.0 278.8,282.0 251.0,266.0 251.0,234.0 278.8,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="336.8,286.5 336.8,318.5 309.1,334.5 281.4,318.5 281.4,286.5 309.1,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="367.1,339.0 367.1,371.0 339.4,387.0 311.7,371.0 311.7,339.0 339.4,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="397.4,391.5 397.4,423.5 369.7,439.5 342.0,423.5 342.0,391.5 369.7,375.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="427.7,444.0 427.7,476.0 400.0,492.0 372.3,476.0 372.3,444.0 400.0,428.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="276.2,76.5 276.2,108.5 248.4,124.5 220.7,108.5 220.7,76.5 248.4,60.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="306.5,129.0 306.5,161.0 278.8,177.0 251.0,161.0 251.0,129.0 278.8,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="336.8,181.5 336.8,213.5 309.1,229.5 281.4,213.5 281.4,181.5 309.1,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="367.1,234.0 367.1,266.0 339.4,282.0 311.7,266.0 311.7,234.0 339.4,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="397.4,286.5 397.4,318.5 369.7,334.5 342.0,318.5 342.0,286.5 369.7,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="427.7,339.0 427.7,371.0 400.0,387.0 372.3,371.0 372.3,339.0 400.0,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="458.0,391.5 458.0,423.5 430.3,439.5 402.6,423.5 402.6,391.5 430.3,375.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="488.3,444.0 488.3,476.0 460.6,492.0 432.9,476.0 432.9,444.0 460.6,428.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="306.5,24.0 306.5,56.0 278.8,72.0 251.0,56.0 251.0,24.0 278.8,8.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="336.8,76.5 336.8,108.5 309.1,124.5 281.4,108.5 281.4,76.5 309.1,60.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="367.1,129.0 367.1,161.0 339.4,177.0 311.7,161.0 311.7,129.0 339.4,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="397.4,181.5 397.4,213.5 369.7,229.5 342.0,213.5 342.0,181.5 369.7,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="427.7,234.0 427.7,266.0 400.0,282.0 372.3,266.0 372.3,234.0 400.0,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="458.0,286.5 458.0,318.5 430.3,334.5 402.6,318.5 402.6,286.5 430.3,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="488.3,339.0 488.3,371.0 460.6,387.0 432.9,371.0 432.9,339.0 460.6,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="518.6,391.5 518.6,423.5 490.9,439.5 463.2,423.5 463.2,391.5 490.9,375.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="549.0,444.0 549.0,476.0 521.2,492.0 493.5,476.0 493.5,444.0 521.2,428.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="367.1,24.0 367.1,56.0 339.4,72.0 311.7,56.0 311.7,24.0 339.4,8.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="397.4,76.5 397.4,108.5 369.7,124.5 342.0,108.5 342.0,76.5 369.7,60.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="427.7,129.0 427.7,161.0 400.0,177.0 372.3,161.0 372.3,129.0 400.0,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="458.0,181.5 458.0,213.5 430.3,229.5 402.6,213.5 402.6,181.5 430.3,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="488.3,234.0 488.3,266.0 460.6,282.0 432.9,266.0 432.9,234.0 460.6,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="518.6,286.5 518.6,318.5 490.9,334.5 463.2,318.5 463.2,286.5 490.9,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="549.0,339.0 549.0,371.0 521.2,387.0 493.5,371.0 493.5,339.0 521.2,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="579.3,391.5 579.3,423.5 551.6,439.5 523.8,423.5 523.8,391.5 551.6,375.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="427.7,24.0 427.7,56.0 400.0,72.0 372.3,56.0 372.3,24.0 400.0,8.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="458.0,76.5 458.0,108.5 430.3,124.5 402.6,108.5 402.6,76.5 430.3,60.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="488.3,129.0 488.3,161.0 460.6,177.0 432.9,161.0 432.9,129.0 460.6,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="518.6,181.5 518.6,213.5 490.9,229.5 463.2,213.5 463.2,181.5 490.9,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="549.0,234.0 549.0,266.0 521.2,282.0 493.5,266.0 493.5,234.0 521.2,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="579.3,286.5 579.3,318.5 551.6,334.5 523.8,318.5 523.8,286.5 551.6,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="609.6,339.0 609.6,371.0 581.9,387.0 554.2,371.0 554.2,339.0 581.9,323.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="488.3,24.0 488.3,56.0 460.6,72.0 432.9,56.0 432.9,24.0 460.6,8.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="518.6,76.5 518.6,108.5 490.9,124.5 463.2,108.5 463.2,76.5 490.9,60.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="549.0,129.0 549.0,161.0 521.2,177.0 493.5,161.0 493.5,129.0 521.2,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="579.3,181.5 579.3,213.5 551.6,229.5 523.8,213.5 523.8,181.5 551.6,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="609.6,234.0 609.6,266.0 581.9,282.0 554.2,266.0 554.2,234.0 581.9,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="639.9,286.5 639.9,318.5 612.2,334.5 584.5,318.5 584.5,286.5 612.2,270.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="549.0,24.0 549.0,56.0 521.2,72.0 493.5,56.0 493.5,24.0 521.2,8.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="579.3,76.5 579.3,108.5 551.6,124.5 523.8,108.5 523.8,76.5 551.6,60.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="609.6,129.0 609.6,161.0 581.9,177.0 554.2,161.0 554.2,129.0 581.9,113.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="639.9,181.5 639.9,213.5 612.2,229.5 584.5,213.5 584.5,181.5 612.2,165.5" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> <polygon points="670.2,234.0 670.2,266.0 642.5,282.0 614.8,266.0 614.8,234.0 642.5,218.0" fill="rgba(59,130,246,0.1)" stroke="#3B82F6" stroke-width="1.5" /> </svg>
About This Tool
The Interactive Hex Grid Pattern Mock is a procedural geometry and spatial vector generator for game developers, UI designers, graphic artists, and web developers working with hexagonal grid math.
Hexagonal grids are widely used in strategy games, isometric map design, UI dashboards, and procedural tileable patterns. This tool builds regular hexagons using formal Axial $(q, r)$ and Cube $(x, y, z)$ coordinate math ($x + y + z = 0$), supports both Pointy-topped and Flat-topped orientations, provides custom pulse animation shaders, and exports vector graphics as clean SVG code or JSON mesh data.
How to Use
- Choose Hexagon Orientation: Toggle between Pointy-Topped and Flat-Topped hexagon math geometry.
- Adjust Radius & Padding: Use the sliders to customize Hexagon Radius (px), Gap Padding (px), and Map Ring Radius ($R$).
- Select Shader Theme: Choose a color shader theme like Neon Cyberwave, CAD Blueprint, or Amber Honeycomb.
- Inspect Vector Coordinates: Hover or click on any hexagon tile to inspect its Axial $(q, r)$, Cube $(x, y, z)$, and pixel center coordinates.
- Export SVG Vector Graphic or JSON Mesh: Copy full resolution SVG vector code or structured JSON mesh array to your clipboard.
Common Use Cases & FAQ
Related Tools
CSS Flexbox & Grid Generator
A visual playground to build CSS Flexbox and CSS Grid layouts interactively. Configure flex directions, alignments, grid templates, and gaps without writing a single line of CSS. Instantly copy the generated HTML structure and corresponding CSS code.
CSS Animation Generator
Visually create and customize CSS animations. Select a preset, adjust properties like duration and timing, and get the generated @keyframes and CSS code instantly.
CSS Border Generator
Visually create and customize CSS borders with styles, radius, and gradients. This tool provides a live preview and generates the corresponding CSS code for you to copy and paste.
AI Color Palette Generator
Unleash your creativity with our AI Color Palette Generator. Simply describe a mood, theme, or scene (e.g., "a calm beach sunset"), and our AI will generate a beautiful, harmonious color palette of 5 colors. Perfect for designers, artists, and brand managers looking for color inspiration.