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" xmlns:xlink="http://www.w3.org/1999/xlink" width="201pt" height="45pt" viewBox="0 0 201 45" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.449219 -0.00390625 C 10.050781 -0.00390625 0 10.089844 0 22.535156 C 0 34.988281 10.050781 45.078125 22.449219 45.078125 C 34.851562 45.078125 44.902344 34.988281 44.902344 22.535156 C 44.902344 10.089844 34.851562 -0.00390625 22.449219 -0.00390625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(11.764706%,19.215686%,45.490196%);fill-opacity:1;" d="M 71.835938 31.703125 L 68.972656 25.824219 L 65.335938 25.824219 L 68.757812 18.484375 L 77.390625 36.019531 L 85.429688 36.019531 L 71.398438 9.179688 L 66.09375 9.179688 L 52.585938 36.015625 L 60.601562 36.019531 L 62.625 31.703125 Z M 71.835938 31.703125 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(11.764706%,19.215686%,45.490196%);fill-opacity:1;" d="M 114.292969 26.351562 C 118.417969 25.0625 120.355469 21.925781 120.355469 18.105469 C 120.355469 13.214844 117.019531 9.246094 110.152344 9.246094 L 96.28125 9.246094 L 96.28125 36.089844 L 102.710938 36.085938 L 102.710938 14.914062 L 110.59375 14.914062 C 112.925781 14.921875 113.894531 16.363281 113.894531 18.089844 C 113.894531 19.8125 112.878906 21.199219 110.546875 21.199219 L 105.03125 21.199219 L 113.375 36.085938 L 119.972656 36.085938 C 119.972656 36.085938 114.261719 26.355469 114.292969 26.351562 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(11.764706%,19.215686%,45.490196%);fill-opacity:1;" d="M 93.457031 9.191406 L 86.808594 9.191406 L 86.808594 36.027344 L 93.457031 36.027344 Z M 93.457031 9.191406 "/>
<path style="...

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, 400 );

		
    // 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 = pathToShapes(path);

      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 );

}


function pathToShapes( path, divisions ) {

	// method copied from ShapePath.js toShapes
	function isPointInsidePolygon( inPt, inPolygon ) {

		const polyLen = inPolygon.length;

		// inPt on polygon contour => immediate success    or
		// toggling of inside/outside at every single! intersection point of an edge
		//  with the horizontal line through inPt, left of inPt
		//  not counting lowerY endpoints of edges and whole edges on that line
		let inside = false;
		for ( let p = polyLen - 1, q = 0; q < polyLen; p = q ++ ) {

			let edgeLowPt = inPolygon[ p...