Create SVG Root & Animate <rect>

Create a React <svg> root element. Then create a React <rect> 'template' via React.createElement(), attaching props (properties) to it. Properties allow for the element's fill to be changed every millisecond via a React.render() request.


React Root SVG Source:

Babel Script (code):
  1.     var randColor = function() //---create random colors---
  2.     {
  3.         return '#'+Math.floor(Math.random()*16777215).toString(16);
  4.     }
  5.  
  6.     //---create a React svg root element---
  7.     const svgRoot=ReactDOM.render(<svg id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  8.  
  9.     //---create a React rect template element with properties (i.e. svg typical attributes)---
  10.     var rect = (props) => React.createElement("rect",{x:props.x, y:props.y, width:props.width, height:props.height, fill:props.fill}) //---ES6 arrow function---
  11.  
  12.     //---render in browser: six rect elements with property requests---
  13.     ReactDOM.render(
  14.         <g> //---include as container---
  15.             <rect x={0}  y={0}  width={100}  height={100} fill={randColor()} />
  16.             <rect x={100}  y={0}  width={100}  height={100} fill={randColor()} />
  17.             <rect x={200}  y={0}  width={100}  height={100} fill={randColor()} />
  18.             <rect x={300}  y={0}  width={100}  height={100} fill={randColor()} />
  19.             <rect x={400}  y={0}  width={100}  height={100} fill={randColor()} />
  20.             <rect x={500}  y={0}  width={100}  height={100} fill={randColor()} />
  21.         </g>
  22.         ,svgRoot
  23.     );
  24.  
  25.     //---Animate: change fill each ms---
  26.     var colorInterval=setInterval(changeColors,1)
  27.  
  28.  
  29. function changeColors()
  30. {
  31.     ReactDOM.render(
  32.         <g>
  33.             <rect x={0}  y={0}  width={100}  height={100} fill={randColor()} />
  34.             <rect x={100}  y={0}  width={100}  height={100} fill={randColor()} />
  35.             <rect x={200}  y={0}  width={100}  height={100} fill={randColor()} />
  36.             <rect x={300}  y={0}  width={100}  height={100} fill={randColor()} />
  37.             <rect x={400}  y={0}  width={100}  height={100} fill={randColor()} />
  38.             <rect x={500}  y={0}  width={100}  height={100} fill={randColor()} />
  39.         </g>
  40.             ,svgRoot
  41.     );
  42.  
  43.  
  44.     //---local function to show svg source on page: React Root SVG Source---
  45.     showSourceSVG()
  46.  
  47. }
  48.