JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<svg class="noob-bounds-svg">
</svg>

CSS

body{
  background-color:#fff;
}
.noob-bounds-svg{
  width:1000px;
  height:1000px;
}
#noob-bounds-canvas{
  display:none;
}

JavaScript

var noobboundsmap = {
	
  elevation_interval: 500,
  
  elevation_colors: Array(
  	{ y: -1500, color: '#ffff00' },
    { y: -1000, color: '#ffcc00' },
    { y: -500, color: '#ff9900' },
    { y: 0, color: '#ff6600' },
    { y: 500, color: '#ff3300' },
    { y: 1000, color: '#ff0000' }
  ),
  
	data: Array(
  	{ x:0, y:-100, z:0, rx: 0, ry: 45, rz: 0, sx: 2, sy: 2, sz: 2, width: 200, height: 200, depth: 200 },
    { x:0, y:200, z:-600, rx: 0, ry: 10, rz: 0, sx: 2, sy: 2, sz: 2, width: 200, height: 200, depth: 200 },
    { x:0, y:900, z:700, rx: 0, ry: 10, rz: 0, sx: 2, sy: 2, sz: 2, width: 200, height: 200, depth: 200 },
    { x:-1600, y:-900, z:0, rx: 0, ry: 45, rz: 0, sx: 2, sy: 2, sz: 2, width: 200, height: 200, depth: 100 }
  ),
	
  body: null,
  canvas: null,
  context: null,
  svg: null,
  
  width: 1000,
  height: 1000,
  
  map_width: 1000,
  map_height: 1000,
  map_scale: .1,
  
  elevation_color: function(elevation){
  	
  	for(var i=0;i<noobboundsmap.elevation_colors.length;i++){
    	
      if(elevation < noobboundsmap.elevation_colors[i].y){
      
      	var difference = Math.abs(elevation-noobboundsmap.elevation_colors[i].y);
        
        var opacity = (difference/noobboundsmap.elevation_interval);
        
        // get rgb representation
        var rgb = noobboundsmap.hexToRgb(noobboundsmap.elevation_colors[i-1].color);
        
        return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
        
      }
    
    }
  
  },
  map: function(){
  
    $('.noob-bounds-svg').remove();
    
    var svg = '<svg class="noob-bounds-svg" width="' + noobboundsmap.map_width + '" height="' + noobboundsmap.map_height + '"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">';
    
    for(var i=0;i<noobboundsmap.data.length;i++){
      
      
      var width = noobboundsmap.data[i].width*noobboundsmap.map_scale*noobboundsmap.data[i].sx;
      var height =...