JSFiddle - React, Tailwind, and code Playground

by ciphrd

HTML

<html>
  <body>
    <div class="grid-container">
      <div>
        Browser render
      </div>
      <div>
        Three JS render
      </div>
      <div class="svg-content"><svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 34.701 37.547"><g transform="translate(-29.389 0)"><path fill="#ff0000" d="M62.016,4.732h-.94V1.987A2.035,2.035,0,0,0,59,0H33.756a2.035,2.035,0,0,0-2.075,1.987v.26H29.964a.564.564,0,0,0-.575.551V7.767a.564.564,0,0,0,.575.551h1.717v.26a2.035,2.035,0,0,0,2.075,1.987h3.771v2.743a2.276,2.276,0,0,0,4.547,0V10.566H51a.552.552,0,1,0,0-1.1H42.074V4.906a1.124,1.124,0,0,1,2.246,0V6.141a2.276,2.276,0,0,0,4.547,0V1.1H59a.906.906,0,0,1,.924.885V8.579A.906.906,0,0,1,59,9.464H53.3a.552.552,0,1,0,0,1.1H59a2.035,2.035,0,0,0,2.075-1.987V5.834h.94a.906.906,0,0,1,.924.885v4.238a.9.9,0,0,1-.765.872l-13.98,2.344a2.01,2.01,0,0,0-1.717,1.958v1.92H44.846a.564.564,0,0,0-.575.551v2.07h-.125a.564.564,0,0,0-.575.551V34.211a3.486,3.486,0,0,0,6.966,0v-4.33a.576.576,0,0,0-1.151,0v4.33a2.334,2.334,0,0,1-4.665,0V21.773h4.665v5.9a.576.576,0,0,0,1.151,0V21.222a.564.564,0,0,0-.575-.551h-.125V18.6a.564.564,0,0,0-.575-.551H47.628V16.13a.9.9,0,0,1,.765-.872l13.98-2.344a2.01,2.01,0,0,0,1.717-1.958V6.719a2.035,2.035,0,0,0-2.075-1.987ZM30.54,7.216V3.35h1.141V7.216ZM47.716,6.141a1.124,1.124,0,0,1-2.246,0V4.906a2.276,2.276,0,0,0-4.547,0v8.4a1.124,1.124,0,0,1-2.246,0V6.385a.576.576,0,0,0-1.151,0V9.464H33.756a.906.906,0,0,1-.924-.885V1.987a.906.906,0,0,1,.924-.885h3.771V4.181a.576.576,0,0,0,1.151,0V1.1h9.038Zm.969,14.53H45.421V19.152h3.264Z"/></g></svg></div>
      <div id="renderer"></div>
    </div>
    
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/loaders/SVGLoader.js"></script>
  </body>
</html>

SCSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.3fr 1.7fr;
  gap: 0px 0px;
  grid-template-areas:
    ". ."
    ". .";
    
  & > * {
    border: 1px solid grey;
  }
}

JavaScript

// Simple three.js example

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( 300, 300 );
    document.querySelector('#renderer').appendChild( renderer.domElement );
    renderer.setClearColor(0x000000, 0);

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, 150 );

		
    // we grab the svg from within the DOM
    var svgContent = document.querySelector(".svg-content").innerHTML;    
    var svgLoader = new THREE.SVGLoader();
    var data = svgLoader.parse(svgContent);

    var paths = data.paths;
    var group = new THREE.Group();

    for (var i = 0; i < paths.length; i++) {

      var path = paths[i];

      var material = new THREE.MeshBasicMaterial({
        color: path.color,
        side: THREE.DoubleSide
        //,depthWrite: false
      });

      var shapes = path.toShapes(true);

      for (var j = 0; j < shapes.length; j++) {
        var shape = shapes[j];
        var geometry = new THREE.ShapeBufferGeometry(shape);
        var mesh = new THREE.Mesh(geometry, material);
        group.add(mesh);
      }
    }



    scene.add(group);

    
}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}