diff --git a/grid.js b/grid.js
index 6a1fc2a..9697482 100644
--- a/grid.js
+++ b/grid.js
@@ -1,6 +1,7 @@
-const cellSize = 150;
-const size = cellSize * 3;
-const margin = 10;
+const CELL_SIZE = 150;
+const GRID_SIZE = CELL_SIZE * 3;
+const SHAPE_SIZE = 100;
+const ANIMATE_DURATION = 500; // ms
 
 let ctx = undefined;
 let circle = true;
@@ -17,23 +18,24 @@ function drawGrid(origin) {
     ctx.lineWidth = 5;
 
     for (let x = 1; x < 3; ++x) {
-        ctx.moveTo(origin.x + x * cellSize, 0 + origin.y);
-        ctx.lineTo(origin.x + x * cellSize, origin.y + size);
+        ctx.moveTo(origin.x + x * CELL_SIZE, 0 + origin.y);
+        ctx.lineTo(origin.x + x * CELL_SIZE, origin.y + GRID_SIZE);
     }
 
     for (let y = 1; y < 3; ++y) {
-        ctx.moveTo(origin.x + 0, origin.y + y * cellSize);
-        ctx.lineTo(origin.x + size, origin.y + y * cellSize);
+        ctx.moveTo(origin.x + 0, origin.y + y * CELL_SIZE);
+        ctx.lineTo(origin.x + GRID_SIZE, origin.y + y * CELL_SIZE);
     }
 
     ctx.stroke();
 }
 
 function drawAnimatedCircle(dt, x, y, hue) {
-    const end = dt*2*Math.PI/500;
+    const radius = SHAPE_SIZE / 2;
+    const end = dt*2*Math.PI/ANIMATE_DURATION;
     ctx.save();
     ctx.beginPath();
-    ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI));
+    ctx.arc(x, y, radius, 0, Math.min(end, 2*Math.PI));
     const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI));
     ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
     ctx.lineWidth = 5;
@@ -42,23 +44,25 @@ function drawAnimatedCircle(dt, x, y, hue) {
 }
 
 function drawAnimatedCross(dt, x, y, hue) {
-    startPoint = { x: x-50, y: y-50 };
+    const startPoint = { x: x-SHAPE_SIZE/2, y: y-SHAPE_SIZE/2 };
+    const halfAnim = ANIMATE_DURATION/2;
+
     ctx.beginPath();
     ctx.moveTo(startPoint.x, startPoint.y);
 
-    delta = 100*dt/250;
-    if (delta < 100) { // draw \
-        d = Math.min(delta, 100);
+    const delta = SHAPE_SIZE*dt/halfAnim;
+    if (delta < SHAPE_SIZE) { // draw \
+        d = Math.min(delta, SHAPE_SIZE);
         ctx.lineTo(startPoint.x + d, startPoint.y + d);
     } else { // draw /
-        ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn
-        ctx.moveTo(startPoint.x + 100, startPoint.y);
-        d = Math.min(delta-100, 100);
-        ctx.lineTo(startPoint.x +100 - d, startPoint.y + d);
+        ctx.lineTo(startPoint.x + SHAPE_SIZE, startPoint.y + SHAPE_SIZE); // keep \ drawn
+        ctx.moveTo(startPoint.x + SHAPE_SIZE, startPoint.y);
+        d = Math.min(delta - SHAPE_SIZE, SHAPE_SIZE);
+        ctx.lineTo(startPoint.x + SHAPE_SIZE - d, startPoint.y + d);
     }
 
     ctx.lineWidth = 5;
-    const percent = Math.trunc(100*Math.min(delta, 100)/100);
+    const percent = Math.trunc(100*Math.min(delta, SHAPE_SIZE)/SHAPE_SIZE);
     ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
     ctx.stroke();
 }
@@ -66,8 +70,8 @@ function drawAnimatedCross(dt, x, y, hue) {
 
 function update(time) {
     const origin = { 
-        x: ctx.canvas.width / 2 - size / 2,
-        y: ctx.canvas.height / 2 - size / 2
+        x: ctx.canvas.width / 2 - GRID_SIZE / 2,
+        y: ctx.canvas.height / 2 - GRID_SIZE / 2
     };
 
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -106,13 +110,13 @@ function snapToGrid(origin, clientPos) {
     // Coord relative to origin of the grid (origin)
     const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y };
     const gridIndex = {
-        x: Math.floor(3 * pt.x / size),
-        y: Math.floor(3 * pt.y / size)
+        x: Math.floor(3 * pt.x / GRID_SIZE),
+        y: Math.floor(3 * pt.y / GRID_SIZE)
     };
     if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
         const center = {
-            x: origin.x + gridIndex.x * cellSize + cellSize/2,
-            y: origin.y + gridIndex.y * cellSize + cellSize/2
+            x: origin.x + gridIndex.x * CELL_SIZE + CELL_SIZE/2,
+            y: origin.y + gridIndex.y * CELL_SIZE + CELL_SIZE/2
         };
         return center;
     }