SVG 3D Geometric Solids

The SEEN.js library creates and animates SVG 3D geometric solids. There are 120 geometric solids: Platonic, Archimedean, Prism, Antiprism and Johnson. Each solid is placed in React. The solid is rotating and its paths are shown as shading fill colors and points change. (You can also use the cursor to rotate the solid.)
Select 'Insert In React' button to place the solid's current view into the React DOM.
Select Geometric Solid:


React Root SVG Source:

Babel Script (code):
  1. const svgRoot=ReactDOM.render(<svg className="svg-root" width="400" height="400" id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  2.  
  3. //---initialize PathSVG element w/ desired svg elements and props attributes---
  4.     class PathSVG extends React.Component {
  5.         render()
  6.         {
  7.             return (
  8.                 <path className="path-svg"  d={this.props.d}   style={this.props.style}   />
  9.  
  10.             );
  11.         }
  12.     }
  13.  
  14.     //--- add super state: props = state ---
  15.     class AddSuperState extends React.Component
  16.     {
  17.         constructor()
  18.         {
  19.             super();
  20.             this.state =
  21.             {
  22.  
  23.                d: null,
  24.                style: null
  25.  
  26.             };
  27.         }
  28.  
  29.         render()
  30.         {
  31.             return (
  32.                 <PathSVG className="path-svg" d={this.state.d}   style={this.state.style}   />
  33.             );
  34.         }
  35.     }
  36.  
  37. //---SEEN.js: load 3D SVG paths, intial Icosahedron-----
  38.     const width  = 400;
  39.     const height = 400;
  40.     const shape = seen.Shapes.icosahedron().scale(height * 0.4);
  41.     seen.Colors.randomSurfaces2(shape);
  42.     const scene = new seen.Scene({
  43.         model    : seen.Models.default().add(shape),
  44.         viewport : seen.Viewports.center(width, height)
  45.     });
  46.     const context = seen.Context('mySVG', scene).render();
  47.     context.animate()
  48.     .onBefore((t, dt) => shape.rotx(dt*1e-4).roty(0.7*dt*1e-4))
  49.     .start()
  50.  
  51.     const dragger = new seen.Drag('mySVG', {inertia : true});
  52.     dragger.on('drag.rotate', function(e) {
  53.         const xform = seen.Quaternion.xyToTransform(...Array.from(e.offsetRelative || []));
  54.         shape.transform(xform);
  55.         return context.render();
  56.     });
  57.  
  58. var svgSourceInterval=setInterval(showSourceSVG,200)
  59.  
  60. //---button onClick---
  61. function insertInReact()
  62. {
  63.     clearInterval(svgSourceInterval)
  64.     var svgPaths=[]
  65.     var paths=mySVG.firstChild.childNodes
  66.     for(var k=0;k<paths.length;k++)
  67.     {
  68.         var path=paths.item(k)
  69.         var d=path.getAttribute("d")
  70.         var style=path.getAttribute("style")
  71.         if(style.indexOf("display")==-1)
  72.         {
  73.             var fill=style.split(";")[0].split(":")[1]
  74.  
  75.             var  myStyle = {
  76.                 fill: fill,
  77.                 fillOpacity:1
  78.             };
  79.         }
  80.  
  81.         if(style.indexOf("display")!=-1)
  82.              var myStyle = {display: "none"};
  83.  
  84.         svgPaths.push(<PathSVG className="path-svg" id={"path"+k} key={"path"+k} d={d} style={myStyle}      /> )
  85.     }
  86.  
  87.     mySVG.removeChild(mySVG.firstChild)
  88.  
  89.     ReactDOM.render(  //---encapsulate in <g> mySVG---
  90.         <g id={geometricSolid}  className={"geometric-solid"} >{ svgPaths }</g>
  91.         ,mySVG
  92.     )
  93.  
  94.      showSourceSVG() //---local function for Show Source SVG---
  95. }
  96. window["insertInReact"]=insertInReact