Animate 200,000 Circles

This example dynamically builds and renders an array of 200,000 circles. It uses React.createClass to build an object (<SVGElems />) holding all elements. It also animates each of their fill colors, changing every 100 ms. Note: Each element must have a unique key; e.g. key={myKey}, which provides efficient access to each element.


Babel Script (code):
  1.  
  2.     var randColor = function() //---create random colors---
  3.     {
  4.         return '#'+Math.floor(Math.random()*16777215).toString(16);
  5.     }
  6.  
  7.     //---create a React svg root element---
  8.     //-- svgRoot=ReactDOM.render(<svg width="1000" height="850" id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  9.  
  10.     var circle = (props) => React.createElement("circle",{cx:props.cx, cy:props.cy, r:props.r,  fill:props.fill}) //---ES6 arrow function---
  11.     //---dynamically build an array of elements---
  12.     var svgElems=[]
  13.     var cxFactor=0
  14.     var cxX=0
  15.     for(var k=0;k<20000;k++)  //---provide a key value for each element---
  16.     {
  17.  
  18.         var cyCnt=Math.round(k/240)
  19.  
  20.         var cxFactor=k/240
  21.         if(Number.isInteger(cxFactor))
  22.              cxX=0
  23.  
  24.         cxX+=5
  25.  
  26.         svgElems.push(<CircleSVG className="circle-svg" key={"circle"+k} cx={cxX} cy={10*cyCnt} r={10}  fill={randColor()} />)
  27.     }
  28.  
  29.     //---object holding all elements---
  30.     var SVGElems = React.createClass({
  31.         render: function()
  32.         {
  33.             return  <g>{ svgElems }</g>  //---encapsulate in <g> element---
  34.         }
  35.     });
  36.  
  37.     ReactDOM.render(<SVGElems />, mySVG);
  38.  
  39.  
  40.     var colorInterval=setInterval(changeColors,100)
  41.  
  42.     function changeColors()
  43.     {
  44.         svgElems=[]
  45.         cxFactor=0
  46.         cxX=0
  47.         for(var k=0;k<20000;k++)  //---provide a key value for each element---
  48.         {
  49.             var cyCnt=Math.round(k/240)
  50.  
  51.             var cxFactor=k/240
  52.             if(Number.isInteger(cxFactor))
  53.                 cxX=0
  54.  
  55.             cxX+=5
  56.  
  57.             svgElems.push(<CircleSVG className="circle-svg" key={"circle"+k} cx={cxX} cy={10*cyCnt} r={10}  fill={randColor()} />)
  58.         }
  59.  
  60.         //---object holding all elements---
  61.         SVGElems = React.createClass({
  62.             render: function()
  63.             {
  64.                 return  <g>{ svgElems }</g>  //---encapsulate in <g> element---
  65.             }
  66.         });
  67.  
  68.         ReactDOM.render(<SVGElems />, mySVG);
  69.     }