JSFiddle - React, Tailwind, and code Playground

SVG testing

by Admiral Potato

HTML

<svg height="360" width="640" version="1.1">
  <rect x="200" y="100" width="10" height="20" fill="#F00"/>
  <path fill="#f00" d="
m 100 100
l 20 20
l 20 -20
l -20 -20
z
"/>
  <path stroke="#0f0" fill="none" x="200" y="30" d="
m 110 110
l 20 20
l 20 -20
l -20 -20
z
"/>
  <path id="yes" stroke="#09f" stroke-width="2" fill="rgba(0, 63, 127, 0.45)"/>
</svg>

CSS

body{
  background-color: #222;
}
svg{
  display: block;
  background-color: #000;
  margin: 0 auto;
}

JavaScript

path = document.getElementById('yes');
points = [
  [0,0],
  [10,10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [-10,10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10,-10],
  [-10,-10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [10, -10],
  [10, 10],
  [-10, 10],
  [10, 10],
  [-10, 10],
  [10, 10],
  [-10, 10],
  [10, 10],
  [-10, 10],
  [10, 10],
  [-10, 10],
  [10, 10],
  [-10, 10],
  [10, 10],
  [-10, 10],
  [10, 10],
];

var pointsToPathString = function (pointList, position, closePath) {
  var i, len = pointList.length, output = [], point,
      suffix = closePath ? 'z' : '';
  for(var i = 0; i < len; i += 1) {
    point = pointList[i];
    if(i == 0){
    point = point.slice();
    point[0] += position[0];
    point[1] += position[1];
    }
    output.push(point.join(' '));
  }
  return 'm ' + output.join(' l ') + suffix;
};
path.setAttribute('d',pointsToPathString(points, [300, 200], true));