JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="640" height="560" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <g id="svg_34">
   <line id="svg_35" stroke="#00007f" y2="51.666678" x2="441.333302" y1="141.000011" x1="130.333335" stroke-width="5" fill="none"/>
   <line id="svg_36" stroke="#00007f" transform="rotate(-0.720664 286.5 198.167)" y2="241.132535" x2="439.408009" y1="155.200833" x1="133.59198" stroke-width="5" fill="none"/>
   <line id="svg_37" stroke="#aaffff" y2="188.666675" x2="205.333335" y1="108.333344" x1="206.333335" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="none"/>
   <line id="svg_38" stroke="#aaffff" y2="245.000031" x2="440.666668" y1="46.666684" x1="441.666668" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="none"/>
   <g id="svg_39">
    <rect id="svg_40" height="33" width="61" y="130.333344" x="52.666669" stroke-opacity="0" stroke-width="5" stroke="#000000" fill="#000000"/>
    <path id="svg_41" stroke="#000000" transform="rotate(129.56 130.334 146)" d="m147.821365,131.722473l0,28.555069l-34.976006,0l34.976006,-28.555069z" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
   </g>
  </g>
  <g id="svg_33">
   <line stroke="#00007f" id="svg_11" y2="289" x2="439.3333" y1="378.333333" x1="128.333334" stroke-width="5" fill="none"/>
   <line stroke="#00007f" id="svg_12" transform="rotate(-0.720664 284.5 435.5)" y2="478.465857" x2="437.408008" y1="392.534155" x1="131.591978" stroke-width="5" fill="none"/>
   <line stroke="#aaffff" id="svg_13" y2="425.999997" x2="203.333334" y1="345.666666" x1="204.333334" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="none"/>
   <line id="svg_26" stroke="#aaffff" y2="482.333353" x2="438.666667" y1="284.000006" x1="439.666667" stroke-linecap="null"...

JavaScript

/*
 LEGEND:
   Black: Camera
   Dark Blue: Camera Viewport
   Light Blue: Culling frames (start and stop rendering)
   Red: Object to render
   Green: Rendered Object(size)
*/

/*
 VARIABLES:
   C = Camera (location)
   v = Distance from C to Near Culling Plane (should not change)
   h = Sprite's actual Height
   d = distance from near culling plane to sprite
   f = size factor of rendered sprite
   
   f = v/(v+d)
   
   
*/