Skip to content

Instantly share code, notes, and snippets.

@JustenRickert

JustenRickert/hexagon.js

Created January 15, 2021 17:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JustenRickert/31de669a6bdac06ec47a6875f6109382 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JustenRickert/31de669a6bdac06ec47a6875f6109382 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JustenRickert created this gist Jan 15, 2021.
    64 changes: 64 additions & 0 deletions hexagon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    import React from 'react';

    function HexagonSvg({ attrs = {}, position: [x0, y0], length }) {
    const p1 = [-1 / 3, 0];
    const p2 = [-1 / 6, -1 / 3];
    const p3 = [1 / 6, -1 / 3];
    const p4 = [1 / 3, 0];
    const p5 = [1 / 6, 1 / 3];
    const p6 = [-1 / 6, 1 / 3];
    const M = ([x, y]) => `M ${x0 + length * x} ${y0 + length * y}`;
    const L = ([x, y]) => `L ${x0 + length * x} ${y0 + length * y}`;
    return (
    <path
    {...attrs}
    d={[M(p1), [p2, p3, p4, p5, p6].map(L).join(" ")].join(" ")}
    />
    );
    }

    function hexagonalPlacement(
    [x, y],
    scalar = 21,
    [centerX, centerY] = [50, 50]
    ) {
    if (y % 2) {
    return [
    centerX + (x + 1 / 2) * scalar,
    centerY +
    (y + (y > 0 ? -2 / 3 : 2 / 3)) * scalar -
    (4 * (Math.trunc(y / 2) * scalar)) / 3,
    ];
    }
    return [centerX + x * scalar, centerY + (y / 3) * scalar];
    }

    export function HexagonGrid() {
    return (
    <svg viewBox="0 0 100 100" height={500} width={500}>
    {[
    [0, -5],
    [1, -5],
    [0, -4],
    [0, -3],
    [0, -2],
    [-1, -1],
    [-1, 0],
    [0, -1],
    [0, 0],
    [0, 1],
    [1, 0],
    [1, 1],
    ].map((coord) => (
    <HexagonSvg
    attrs={{
    "data-x": coord[0],
    "data-y": coord[1],
    }}
    position={hexagonalPlacement(coord)}
    length={20}
    />
    ))}
    </svg>
    );
    }