diff --git a/src/gravity-points/app.js b/src/gravity-points/app.js
index e69de29..5644a35 100644
--- a/src/gravity-points/app.js
+++ b/src/gravity-points/app.js
@@ -0,0 +1,40 @@
+const Victor = require("victor");
+
+// TODO cycle this bkg color
+const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)';
+const PARTICLE_RADIUS = 1;
+const G_POINT_RADIUS = 10;
+const G_POINT_RADIUS_LIMITS = 65;
+
+const canvas = document.getElementById("mainCanvas");
+const bufferCvs = document.createElement("canvas");
+const context = canvas.getContext('2d');
+const bufferCtx = bufferCvs.getContext('2d');
+
+const screenWidth = canvas.width = window.innerWidth;
+const screenHeight = canvas.height = window.innerHeight;
+
+console.log("Finished initting");
+
+const loop = (timestamp) => {
+ window.requestAnimationFrame(loop);
+
+ const cx = canvas.width / 2;
+ const cy = canvas.height / 2;
+
+ context.save();
+ context.fillStyle = BACKGROUND_COLOR;
+ context.fillRect(0, 0, screenWidth, screenHeight);
+
+ // create circular gradient that fills the screen
+ const grad = context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
+ grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+ grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
+
+ context.fillStyle = grad;
+ context.fillRect(0, 0, screenWidth, screenHeight);
+ context.restore();
+};
+
+
+loop();
diff --git a/src/gravity-points/index.html b/src/gravity-points/index.html
index 28147b8..e03f8ab 100644
--- a/src/gravity-points/index.html
+++ b/src/gravity-points/index.html
@@ -8,7 +8,7 @@
-
+
Click to add gravity point.