JSFiddle - React, Tailwind, and code Playground

by spadez

HTML

<div style="background: grey; display: inline-block;">
<svg version="1.2" viewBox="0 0 600 400" width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
 <text id="t1" y="50" style="fill: white;">MfgfgfgghgY UGLY TEXT</text>
 <script type="application/ecmascript"> 
    var width=350, height=80;
    var textNode = document.getElementById("t1");
    var bb = textNode.getBBox();
    var widthTransform = width / bb.width;
    var heightTransform = height / bb.height;
    var value = widthTransform < heightTransform ? widthTransform : heightTransform;
    textNode.setAttribute("transform", "matrix("+value+", 0, 0, "+value+", 0,0)");

 </script>
</svg>
</div>