JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
<div id="grid-test"></div>

JavaScript

var squares = [];
var paperHeight = 600;
var paperWidth = 400;
var squareSize = 40;

var cols = paperWidth / squareSize;
var rows = paperHeight / squareSize;

var paper = Raphael($("#grid-test")[0],paperWidth,paperHeight);

var rowSets = [];

// I have swapped the usage of i and j within the loop so that cells
// in a row are drawn consecutively. 
// Previously, it was column cells which were drawn
// consecutively
for (var i = 0; i < rows; i++) {
    //create a new set which will hold this row
    rowSets[i] = paper.set();
    squares[i] = [];

    // Begin loop for cells in row
    for (var j = 0; j < cols; j++) {

      // Scaling up to draw a rectangle at (x,y)
      var x = j * squareSize;
      var y = i * squareSize;

      // For every column and row, a square is drawn at an (x,y) location 
      var newRect = paper.rect(x,y,squareSize,squareSize); 
      // add the new cell to the row
      rowSets[i].push(newRect);
      squares[i][j] = newRect;
    }
}

var  elattrs = [{transform: "t100,0r360s3"}, {transform: ""}];
rowSets[3].animate(elattrs[0], 1000);
squares[5][5].attr({fill : '#f00'});            // colour an individual cell
rowSets[6].attr({fill : '#00f'});               // colour an entire row                 
rowSets[6].animate({y : 10 * squareSize},400);  // animate an enitre row