Hexagon grid in Javascript

Question

I've been looking around for a hexagon grid solution and can't seem to nail one down which works, although so many come close.

I want it pretty much exactly like the one in this example: http://dabblet.com/gist/3952030 as the hexagons are rotated and positioned perfect for me, but with this example I can't find out how to scale/width the hexagons. It says /* .866 = sqrt(3)/2 */ but that doesn't seem to calculate correctly from the values already in there.

I have this other example https://codepen.io/elbarto84/pen/wrcob which is great, but the hexagons are rotated differently that the first example.

So if anyone can help with either:

Adding more hexagons per row for the first example
Or rotating the hexagons so they are in the same position as the first example

I'd greatly appreciate :)

Thanks

score 1 · Answer 1 · answered Dec 13 '17 at 14:06

If you're fine with just rotating the whole thing, you can apply a transform: rotate(90deg); to the .container. Other than that I don't see any easy way to go about this (maybe start from scratch and lay out the hexagons to your liking yourself, as they are basically just made from 3 differently rotated blocks).

/* ----------------------------------------- */

.container {
  width: 1000px;
  line-height: 1.3;
  transform: rotate(90deg);
  transform-origin: 26% 50%;
}

ol.even {
  position: relative;
  left: 5.45455em;
}

ol.odd {
  position: relative;
  margin-top: -6.5%;
  margin-bottom: -6.5%;
}

.hex {
  position: relative;
  margin: 1em auto;
  width: 6em;
  height: 10.2em;
  border-radius: 1em/.5em;
  background: #ccc;
  transform: rotate(-90deg);
  display: inline-block;
  margin-right: 4.61538em;
  transition: all 150ms ease-in-out;
}

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  transform: rotate(60deg);
}

.hex:after {
  transform: rotate(-60deg);
}

.hex:hover {
  background: #F58787;
  cursor: pointer;
}

<div class="container">
  <ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
  <ol class="odd">
    <li class='hex'></li>
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
  <ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
</div>

rotating the whole container means rotating all it's content ... i think not a good idea we will have some text — Temani Afif, Dec 13 '17 at 14:08
As I said, it's just a suggestion though. I am aware that this may not be the best way to go about this. — Maharkus, Dec 13 '17 at 14:11
yes but we will loose the flow ;) the upper text will be in the left, the bottom in the right an so on. I know and it's sugget a comment :) — Temani Afif, Dec 13 '17 at 14:11
Thanks for the suggestion - you're right it won't work though :) — JamesG, Dec 13 '17 at 14:13

Hexagon grid in Javascript

1 Answers1