JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/svgpath.js"></script>
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     viewBox="0 0 600 600"
     width="50%"
     baseProfile="tiny">
  <rect x="200" y="200" width="200" height="200"></rect>
</svg>

CSS

body {
  font-family: sans-serif;
  font-weight: bold;
}

svg {
  fill: none;
  font-size: 100px;
  stroke: #abcdef;
  stroke-width: 6px;
}

JavaScript

!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(t.svgpathdata={})}(this,function(t){"use strict";var r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var e in r)r.hasOwnProperty(e)&&(t[e]=r[e])};function e(t,e){function a(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(a.prototype=e.prototype,new a)}function a(t,r){var e=t[0],a=t[1];return[e*Math.cos(r)-a*Math.sin(r),e*Math.sin(r)+a*Math.cos(r)]}function n(){for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];for(var e=0;e<t.length;e++)if("number"!=typeof t[e])throw new Error("assertNumbers arguments["+e+"] is not a number. "+typeof t[e]+" == typeof "+t[e]);return!0}var i=Math.PI;function o(t,r,e){t.lArcFlag=0===t.lArcFlag?0:1,t.sweepFlag=0===t.sweepFlag?0:1;var n=t.rX,o=t.rY,s=t.x,u=t.y;n=Math.abs(t.rX),o=Math.abs(t.rY);var h=a([(r-s)/2,(e-u)/2],-t.xRot/180*i),c=h[0],m=h[1],y=Math.pow(c,2)/Math.pow(n,2)+Math.pow(m,2)/Math.pow(o,2);1<y&&(n*=Math.sqrt(y),o*=Math.sqrt(y)),t.rX=n,t.rY=o;var p=Math.pow(n,2)*Math.pow(m,2)+Math.pow(o,2)*Math.pow(c,2),T=(t.lArcFlag!==t.sweepFlag?1:-1)*Math.sqrt(Math.max(0,(Math.pow(n,2)*Math.pow(o,2)-p)/p)),O=n*m/o*T,_=-o*c/n*T,f=a([O,_],t.xRot/180*i);t.cX=f[0]+(r+s)/2,t.cY=f[1]+(e+u)/2,t.phi1=Math.atan2((m-_)/o,(c-O)/n),t.phi2=Math.atan2((-m-_)/o,(-c-O)/n),0===t.sweepFlag&&t.phi2>t.phi1&&(t.phi2-=2*i),1===t.sweepFlag&&t.phi2<t.phi1&&(t.phi2+=2*i),t.phi1*=180/i,t.phi2*=180/i}function s(t,r,e){n(t,r,e);var a=t*t+r*r-e*e;if(0>a)return[];if(0===a)return[[t*e/(t*t+r*r),r*e/(t*t+r*r)]];var i=Math.sqrt(a);return[[(t*e+r*i)/(t*t+r*r),(r*e-t*i)/(t*t+r*r)],[(t*e-r*i)/(t*t+r*r),(r*e+t*i)/(t*t+r*r)]]}var u=Math.PI/180;function h(t,r,e){return(1-e)*t+e*r}function c(t,r,e,a){return t+Math.cos(a/180*i)*r+Math.sin(a/180*i)*e}function m(t,r,e,a){var n=r-t,i=e-r,o=3*n+3*(a-e)-6*i,s=6*(i-n),u=3*n;return...