JSFiddle - React, Tailwind, and code Playground

by codecowboy

HTML

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

JavaScript

var paperHeight = 600;
            var paperWidth = 400;
            var squareSize = 40;
            var rowsArr = [];
            var cols = paperWidth / squareSize;
            var rows = paperHeight / squareSize;
            
            var paper = Raphael($("#grid-test")[0],paperWidth,paperHeight);
           
            
                for (var i = 0; i < rows; i++) { //begin loop for columns
                  rowsArr[i] = [];//create a row entry in the rows array
                  
                    //Begin loop for rows
                    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 
                      //paper.rect(x,y,squareSize,squareSize);
                      rowsArr[i][j] = paper.rect(x,y,squareSize,squareSize); //populate the array for this row             
                    }
                }
                function animateRow(i, paperHeight, squareSize) {
                    var row = rowsArr[i];
                    for(var j = 0; j < row.length; j++) {
                        row[j].animate({y: paperHeight - (squareSize * i)}, 2000);
                    }
                }

                animateRow(1, paperHeight,squareSize);