JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
Rendered with SVG:<br>
<svg width="600" height="120" style="background-color:#ccc;">
  <g style="fill:white;stroke:black;stroke-width:2">
    <polyline points="50,35 50,25 250,35 50,35"></polyline>
    <rect x="50" y="35" width="200" height="50"></rect>
  </g>
</svg>
<script id="processingcode" type="application/processing">
    size(window.innerWidth-40,120);
    strokeWeight(2);
    translate(50,25);
    triangle(0,0, 200,10, 0,10);
    rect(0,10, 200,50);
</script>
Rendered with PIXI WebGL:<br>

JavaScript

var o1 = new PIXI.Graphics;
	o1.position.x = 50;
	o1.position.y = 25;
	o1.beginFill(0xFFFFFF);
	o1.lineStyle(2, 0x000000);
	o1.drawPolygon(0,0, 200,10, 0,10, 0,0); // sloped roof
	
	var o2 = new PIXI.Graphics;	
	o2.position.x = 50;
	o2.position.y = 25;
	o2.beginFill(0xFFFFFF);
	o2.lineStyle(2, 0x000000);
	o2.drawRect(0,10, 200,50); // frame
    
	var stage= new PIXI.Container();  
	stage.addChild( o1 );
    stage.addChild( o2 );
    
	var renderer1= new PIXI.WebGLRenderer( window.innerWidth-40, 120, { backgroundColor: 0xCCCCCC, antialias: true } );
	var renderer2= new PIXI.CanvasRenderer( window.innerWidth-40, 120, { backgroundColor: 0xCCCCCC, antialias: true } );
    
    document.body.appendChild( renderer1.view );
    document.body.appendChild( document.createElement("br") );
    document.body.appendChild( document.createTextNode("Rendered with PIXI Canvas:" ) );
    document.body.appendChild( document.createElement("br") );
	document.body.appendChild( renderer2.view );
    document.body.appendChild( document.createElement("br") );
    document.body.appendChild( document.createTextNode("Rendered with Processing:" ) );
    document.body.appendChild( document.createElement("br") );
    var canv=document.createElement("canvas");
    canv.setAttribute("id", "canvas3");
    document.body.appendChild( canv );
    
	requestAnimationFrame( animate );
	function animate() {
	    //requestAnimationFrame( animate );
	    renderer1.render( stage );
	    renderer2.render( stage );
    }
    
    new Processing(document.getElementById("canvas3"),
               document.getElementById("processingcode").text);