JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="height: 60px;" xml:space="preserve">
  <g id="afterMe">
    <circle class="grayCircle" cx="30" cy="30" r="26" />
    <!-- <polyline points="9.5 21.4983 0.5 21.4983 0.5 0.4983 11.5 0.4983 16.5 5.4983 16.5 12.9983"></polyline> -->
  </g>
</svg>

CSS

.grayCircle,
polyline,
path {
  stroke: #00b8fe;
  stroke-width: 2;
  fill: none;
}

.whiteFill {
  stroke: none;
  stroke-width: 0;
  fill: white;
}

JavaScript

var xmlns = "http://www.w3.org/2000/svg";
//var elem = document.createElementNS(xmlns, "g");
//elem.setAttributeNS(xmlns, 'stroke', '#ff0000');

var child = document.createElementNS(xmlns, "polyline");
child.setAttributeNS(xmlns, 'points', '9.5 21.4983 0.5 21.4983 0.5 0.4983 11.5 0.4983 16.5 5.4983 16.5 12.9983');
//elem.appendChild(child);

document.getElementById('afterMe').appendChild(child);