Here’s how to create a hex Grid of Point Anchors in a Container.
Adjust the constant values for tileWidth, tileHeight, countAcross, and yAdjust to fit your particular grid. For the yAdjustEven and yAdjustOdd constants, one of them needs to be 0 and the other 0.5.
function updateAnchor(anchor, index) {
const tileWidth = 45;
const tileHeight = 51;
const countAcross = 7;
const yAdjust = -37.5;
const yAdjustEven = 0;
const yAdjustOdd = 0.5;
let xvalue = -(tileWidth * (countAcross/2-.5)) +
(tileWidth * ((index-1) % (countAcross))) - 1;
let yvalue = 0;
if (((index % countAcross) !== 0) && ((index % countAcross) % 2 == 0)) {
yvalue = -(tileHeight * (countAcross/2-yAdjustEven)) - yAdjust + (tileHeight * Math.floor((index-1)/(countAcross)))
} else {
yvalue = -(tileHeight * (countAcross/2-yAdjustOdd)) - yAdjust + (tileHeight * Math.floor((index-1)/(countAcross)))
};
return {
"x": xvalue,
"y": yvalue
}
}