diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..471b461
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# Hide node dependencies directory
+node_modules
\ No newline at end of file
diff --git a/src/grid.js b/src/grid.js
new file mode 100644
index 0000000..78cb453
--- /dev/null
+++ b/src/grid.js
@@ -0,0 +1,44 @@
+const Grid = function(canvas) {
+ let grid = [[]];
+ let ctx;
+
+ this.setCanvasSize = (canvas) => {
+ canvas.width = 2000;
+ canvas.height = 900;
+ }
+
+ this.processGrid = () => {
+ const fact = (a, value = 1) => Array(a).fill(value, 0, a);
+ const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
+
+ this.grid = cartesian(
+ [...fact(6), 0, ...fact(6), 0, ...fact(6)],
+ [...fact(1), 0, ...fact(2), 0, ...fact(2), 0, ...fact(1)]
+ );
+ }
+
+ this.drawGrid = () => {
+ for (let [x, line] of this.grid.entries()) {
+ for (let [y, shouldRender] of line.entries()) {
+ if (shouldRender) {
+ this.neonRect(x * 100, y * 100, 100, 100);
+ }
+ }
+ }
+ }
+
+ this.neonRect = (x, y, w, h) => {
+ this.ctx.globalCompositeOperation = 'lighter';
+ this.ctx.shadowColor = "#fff";
+ this.ctx.shadowBlur = 10;
+ this.ctx.strokeStyle= "#fff";
+ this.ctx.lineWidth = 5;
+ this.ctx.strokeRect(x, y, w, h);
+ }
+
+ this.ctx = canvas.getContext('2d');
+ this.setCanvasSize(canvas);
+ this.processGrid();
+ this.drawGrid();
+}
+
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..f727066
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..1c3219c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,4 @@
+window.addEventListener('DOMContentLoaded', () => {
+ const gridCanvas = document.getElementById('canvas-grid');
+ const grid = new Grid(gridCanvas);
+});
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..e69de29