Editable Hex Grid

I needed a grid of hexagons - tiled, but with some of the internal dividing lines removed. This was to make puzzle pieces that tiled to a hexagonal grid.

Whilst LB did allow this (if a bit fiddly), I ended up switching to Affinity Designer – but that was equally unsatisfactory in both creating a tiled grid and removing shared lines.

So I wrote a P5 sketch that did what I wanted.

Editable Hex grid + SVG output

Use is easy.

  1. You can click on any of the lines and they delete. Clicking again brings them back. That way you can create tiles.
  2. You can alter the overall grid size and the size of the hexes at the bottom
  3. You can download an SVG file to edit further - importantly (for me at least) all the line are still separate, so this allows further editing as needed.

If you resize after editing any shapes, the grid resets.

Right clicking on whitespace allows you to copy the image as is.

Use/abuse and comments greatly received.

10 Likes

Works great, and no duplicate lines.

1 Like

Really cool. I think i will use it at some time, since my company has a product with similar shapes and it might be cool to design some graphics with it.

2 Likes

Thanks for the feedback.

Updated to also draw squares and equilateral triangles.

2 Likes