Hexagonal Architecture
Theory
It's not trivial to build interfaces using hexagonal (triangular) grids. Our digital world is build on rectangles.
This project is the beginning of something much bigger, an entire system for building hexagonal interfaces.
I know it could/should be organized better, but I'm letting expand organically as I use it to build my hexagonal things.
Capapibilites
HexProps
-
w→ width -
h→ height -
x→ translate X -
y→ translate Y -
s→ length of a side (radius of circumcircle) -
m→ mid point -
a→ length of tip -
b→ length of tip + body
Property builders
verticalHexagonConstrained(...)verticalHexagonFromWidth(...)verticalHexagonFromHeight(...)
Path builders
createPathVerticalHexagonFull(hexProps)createPathVerticalHexagonTipTop(hexProps)createPathVerticalHexagonTipBottom(hexProps)createPathVerticalHexagonBevelLeft(hexProps, bevelWidth)createPathVerticalHexagonBevelRight(hexProps, bevelWidth)
Development
yarn start
yarn build
yarn publish
Changelog
v0.2 bevelled hexagons
- create hexagonal bevels for a neat look
- reorganize code
v0.1 vertical hexagons
- create the properties of vertical hexagons constrained by width, height, or both
- using those properties create the SVG paths for a full hexagon, or just the tips (top & bottom)