diff --git a/flip/package.json b/flip/package.json
new file mode 100644
index 0000000..18aeca3
--- /dev/null
+++ b/flip/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "flip",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "canvas-common": "file:../canvas-common"
+  },
+  "devDependencies": {
+    "vite": "^5.1.5"
+  }
+}
diff --git a/flip/src/index.html b/flip/src/index.html
new file mode 100644
index 0000000..5e080b6
--- /dev/null
+++ b/flip/src/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html class="no-js" lang="">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>flip</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        html, body, div, canvas {
+            margin: 0;
+            padding: 0;
+        }
+        html, body { width:100%; height:100%; }
+        canvas { display:block; }
+    </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<script type="module" src="js/main.js"></script>
+</body>
+</html>
diff --git a/flip/src/js/main.js b/flip/src/js/main.js
new file mode 100644
index 0000000..13c0ca5
--- /dev/null
+++ b/flip/src/js/main.js
@@ -0,0 +1,65 @@
+import {
+    createRainbowColors,
+    docReady, getIndexForCoordinate, randomInteger
+} from "canvas-common";
+
+let canvas;
+let ctx;
+
+let world = [];
+
+let config = {
+    size: {
+        height: window.innerHeight,
+        width: window.innerWidth
+    }
+};
+
+const a = 2 * Math.PI / 6;
+
+config.flip = {
+    fps: 60,
+    radius: 50
+};
+
+function createHexagon(x, y) {
+    let hexagon = {
+        x: x,
+        y: y,
+        points: []
+    }
+    for (let i = 0; i < 6; i++) {
+        hexagon.points.push({x: config.flip.radius * Math.cos(a * i), y: config.flip.radius * Math.sin(a * i)});
+    }
+    return hexagon
+}
+
+
+function drawHexagon(hexagon) {
+    ctx.beginPath();
+    hexagon.points.forEach(p => {
+        ctx.lineTo(hexagon.x + p.x, hexagon.y + p.y);
+    })
+    ctx.closePath();
+    ctx.stroke();
+}
+
+docReady(function() {
+    canvas = document.getElementById('canvas')
+    canvas.width = config.size.width;
+    canvas.height = config.size.height;
+    ctx = canvas.getContext("2d");
+    canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+    let triangleHeight = config.flip.radius * Math.sqrt(3) / 2;
+    let otherPosition = 250 + triangleHeight;
+    console.log(otherPosition)
+    let hex = createHexagon(250, 250);
+    let hex2 = createHexagon(250 + (3/2 * config.flip.radius), 250 + config.flip.radius * Math.sqrt(3) / 2);
+    let hex3 = createHexagon(250, 250 + Math.sqrt(3) * config.flip.radius);
+    drawHexagon(hex)
+    drawHexagon(hex2)
+    drawHexagon(hex3)
+});
+
+
+// https://www.redblobgames.com/grids/hexagons/
\ No newline at end of file
diff --git a/flip/vite.config.js b/flip/vite.config.js
new file mode 100644
index 0000000..46ba5ce
--- /dev/null
+++ b/flip/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    base: './',
+    root: 'src',
+    build: {
+        outDir: '../../dist/mandelbrot'
+    }
+})