diff --git a/src/hexgrid/app.ts b/src/hexgrid/app.ts
new file mode 100644
index 0000000..adacc16
--- /dev/null
+++ b/src/hexgrid/app.ts
@@ -0,0 +1,49 @@
+const canvas = document.querySelector("#mainCanvas");
+const ctx = canvas.getContext("2d");
+
+console.log("hexgrid");
+
+const screenWidth = canvas.width = window.innerWidth;
+const screenHeight = canvas.height = window.innerHeight;
+
+const angle = 2 * Math.PI / 6;
+
+ctx.lineWidth = 3;
+ctx.strokeStyle = "black";
+
+// x and y are center point
+const drawHexagon = (x: number, y: number, radius: number) => {
+ ctx.beginPath();
+ for (let i = 0; i < 6; i++) {
+ ctx.lineTo(x + radius * Math.cos(angle * i), y + radius*Math.sin(angle * i));
+ }
+ ctx.closePath();
+ ctx.fill();
+ ctx.stroke();
+};
+
+const drawGrid = (width: number, height: number, radius: number) => {
+ const cos = Math.cos(angle);
+ const sin = Math.sin(angle);
+
+ let total = 0;
+
+ for (let gridY = 0; gridY < height; gridY++) {
+ for (let gridX = 0; gridX < width; gridX++) {
+ const x = radius + gridX * radius * (1 + cos);
+ const y = radius + ((gridX % 2 === 0) ? 0 : radius*sin) + 2*radius*sin*gridY;
+ if (x >= screenWidth) {
+ break;
+ }
+ if (y >= screenHeight) {
+ break;
+ }
+ ctx.fillStyle = "#1c133f";
+ drawHexagon(x, y, radius);
+ total += 1;
+ }
+ }
+ console.log(total);
+}
+
+drawGrid(200, 20, 20);
diff --git a/src/hexgrid/index.html b/src/hexgrid/index.html
new file mode 100644
index 0000000..a0f25be
--- /dev/null
+++ b/src/hexgrid/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+ Hexgrid
+
+
+
+
+
+
+
+
diff --git a/src/index.html b/src/index.html
index 82b3149..e806d51 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,6 +15,7 @@
Orbital Trails (mine)
Gravity Points (mine)
Starfield
+ Hexgrid
Reference Animations