SVG Polygon Sprites

The polygons are stored in an .svg sprite file. This extracts the desired polygon from the sprite file and adds 10 <use> elements for each selection. The elements are rotating at rate based on the slider selection.

Rotate:

React Root SVG Source:

Babel Script (code):
  1. const svgRoot=ReactDOM.render(<svg className="svg-root" id="mySVG" width="800" height="500" overflow="visible" xmlns="http://www.w3.org/2000/svg" ><defs id="myDefs"><filter id="dropShadow" height="100">
  2. <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  3. <feOffset dx="2" dy="2" result="offsetblur"/>
  4. <feMerge>
  5. <feMergeNode/>
  6. <feMergeNode in="SourceGraphic"/>
  7. </feMerge>
  8. </filter>
  9. </defs><g id="myIcons" /></svg>, svgDiv);
  10.  
  11.  
  12.  
  13.  class Icon extends React.Component {
  14.         render()
  15.         {
  16.             return (
  17.                 <use className="icon-svg"  id={this.props.id}  href={this.props.href}   transform={this.props.transform}   />
  18.  
  19.             );
  20.         }
  21.     }
  22.  
  23.     //-- add super state: props = state ---
  24.     class AddSuperState extends React.Component
  25.     {
  26.         constructor()
  27.         {
  28.             super();
  29.             this.state =
  30.             {
  31.                id: null,
  32.                href: null,
  33.                transform: null
  34.             };
  35.         }
  36.  
  37.         render()
  38.         {
  39.             return (
  40.                 <Icon className="icon-svg"  id={this.state.id}  href={this.props.href}   transform={this.state.transform}  />
  41.             );
  42.         }
  43.     }
  44. //--random integer---
  45.     function getRandomInt(min, max)
  46.     {
  47.         return Math.floor(Math.random() * (max - min + 1)) + min;
  48.     }
  49.  
  50. var iconArray=[]
  51. var transformArray=[]
  52. var rotate=0
  53. //--checkbox on click---
  54. function iconSelected(pgon)
  55. {
  56.  
  57.     document.getElementById(pgon+"Check").disabled=true
  58.  
  59.  
  60.     for(var k=0;k<10;k++)  //--provide a id/key value for each element---
  61.     {
  62.         var transX=getRandomInt(35, 800)
  63.         var transY=getRandomInt(30, 470)
  64.         iconArray.push(<Icon className="icon-svg" key={"icon"+pgon+k}  id={"icon"+pgon+k}  href={'polygonSprites.svg#'+pgon}   transform={"translate("+transX+","+transY+")rotate("+rotate+")"} />)
  65.         transformArray.push([transX,transY,pgon+k,pgon])
  66.     }
  67.  
  68.     ReactDOM.render(  //--encapsulate in <g> container---
  69.      <g>{ iconArray }</g>
  70.         ,myIcons
  71.     )
  72.  
  73.     //--local function to show svg source on page: React Root SVG Source---
  74.     showSourceSVG()
  75. }
  76. window["iconSelected"]=iconSelected
  77.  
  78.  
  79. //--initial selection---
  80. STHBNCheck.checked=true
  81. STHBNCheck.disabled=true
  82. iconSelected("STHBN")
  83.  
  84. function rotateSprites()
  85. {
  86.  
  87.     if(rotate>=0)rotate+=20
  88.     if(rotate>=360)rotate=0
  89.  
  90.     iconArray=[]
  91.     for(var k=0;k<transformArray.length;k++)
  92.     {
  93.         var myTransform=transformArray[k]
  94.         var myTransX=myTransform[0]
  95.         var myTransY=myTransform[1]
  96.  
  97.         var myKey=myTransform[2]
  98.         var myPgon=myTransform[3]
  99.         iconArray.push(<Icon className="icon-svg" key={"icon"+myKey}  id={"icon"+myKey}  href={'polygonSprites.svg#'+myPgon}   transform={"translate("+myTransX+","+myTransY+")rotate("+rotate+")"} />)
  100.      }
  101.  
  102.  
  103.      ReactDOM.render(  //--encapsulate in <g> container---
  104.      <g>{ iconArray }</g>
  105.         ,myIcons
  106.     )
  107.  
  108. }
  109. window["rotateSprites"]=rotateSprites
  110. //--slider control: variable timeout---
  111. var timing = 1000,
  112.     i = 0,
  113.     output = document.getElementById('output');
  114.  
  115. function loop() {
  116.   i++;
  117.   output.innerHTML = i;
  118.   rotateSprites()
  119.   window.setTimeout(loop, timing);
  120. }
  121.  
  122. document.querySelector('input[type="range"]').addEventListener('change', function (e) {
  123.   timing = parseInt(this.value);
  124. });
  125.  
  126. loop();
  127.  
  128.  
  129. //--local function to show svg source on page: React Root SVG Source---
  130. showSourceSVG()
  131.  
  132.