SVG Rectangle Grid

Each grid cell is an SVG rect element. Use the slider to change the size and quantity of the grid cells. Over 1000 cells can be created.

Grid Cells:

Babel Script (code):
  1. var randColor = function()
  2. {
  3.     return '#'+Math.floor(Math.random()*16777215).toString(16);
  4. }
  5.  
  6. const svgRoot=ReactDOM.render(<svg width="600" height="600" className="svg-root" id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  7.  
  8.  
  9.     //---initialize the component---
  10.     class RectSVG extends React.Component {
  11.         render()
  12.         {
  13.             return (
  14.             <rect className="rect-svg"  x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height} fill={this.props.fill} />
  15.             );
  16.         }
  17.     }
  18.  
  19.     //==== add super state: props = state=================
  20.     class Rect extends React.Component
  21.     {
  22.         constructor()
  23.         {
  24.             super();
  25.             this.state =
  26.             {
  27.                 x: null,
  28.                 y: null,
  29.                 width: null,
  30.                 height: null,
  31.                 fill: null
  32.             };
  33.         }
  34.  
  35.         render()
  36.         {
  37.             return (
  38.                 <RectSVG className="rect-svg"  x={this.state.x} y={this.state.y} width={this.state.width} height={this.state.height} fill={this.state.fill} />
  39.             );
  40.         }
  41.     }
  42.  
  43.     //---place init 4 rects in <g> container---
  44.     ReactDOM.render(        //---include key---
  45.         <g>
  46.             <RectSVG className="rect-svg" key={"rect0"} x={0} y={0} width={300} height={300} fill={randColor()} />
  47.             <RectSVG className="rect-svg" key={"rect1"} x={300} y={0} width={300} height={300} fill={randColor()} />
  48.             <RectSVG className="rect-svg" key={"rect2"} x={0} y={300} width={300} height={300} fill={randColor()} />
  49.             <RectSVG className="rect-svg" key={"rect3"} x={300} y={300} width={300} height={300} fill={randColor()} />
  50.         </g>
  51.         ,mySVG
  52.     )
  53.  
  54. var GridCellsTotal=4
  55. var Init=false
  56. //----slider----
  57. function changeCells()
  58. {
  59.     var gridMax=600    //width/height
  60.  
  61.     var cells=+cellsRangeValue.value
  62.     if(cells!=GridCellsTotal)
  63.     {
  64.         var cellColumns=+cellsRangeValue.value/4
  65.         var gridWH=gridMax/cellColumns
  66.         var cellRows=+cellsRangeValue.value/4
  67.         var gridXYSeg=gridMax/cellColumns
  68.         var xyLocArray=[]
  69.         for(var k=0;k<cellColumns;k++)
  70.         {
  71.             for(var j=0;j<cellRows;j++)
  72.                 xyLocArray.push([gridXYSeg*j,gridXYSeg*k])
  73.         }
  74.         GridCellsTotal=cells
  75.         if(Init==true)
  76.             buildRects(gridWH,xyLocArray)
  77.  
  78.         Init=true
  79.     }
  80. }
  81.  
  82.  
  83. function buildRects(gridWH,xyLocArray)
  84. {
  85.     //---dynamically build an array of elements---
  86.     var svgRects=[]
  87.     for(var k=0;k<xyLocArray.length;k++)  //---provide a key value for each element---
  88.     {
  89.         var x=xyLocArray[k][0]
  90.         var y=xyLocArray[k][1]
  91.         svgRects.push(<RectSVG className="rect-svg" key={"rect"+k} x={x} y={y} width={gridWH} height={gridWH} fill={randColor()} />)
  92.     }
  93.  
  94.     //---object holding all elements---
  95.     var SVGRects = React.createClass({
  96.     render: function()
  97.         {
  98.             return  <g>{ svgRects }</g>  //---encapsulate in <g> element---
  99.         }
  100.     });
  101.  
  102.     ReactDOM.render(<SVGRects />, mySVG);
  103.  
  104.     cellsValue.value=mySVG.firstChild.childNodes.length
  105. }
  106.  
  107. window["changeCells"] = changeCells;
  108.