JSFiddle - React, Tailwind, and code Playground

by Aaron Calderon

HTML

<?xml version="1.0" standalone="no"?>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="420px" height="420px">

    <circle cx="100" cy="100" r="75" id="circle" />

    <path id="path" d="
            M 225, 100
            a 75,75 0 1,0 150,1
            a 75,75 0 1,0 -150,0
            " />
    <path id="patha" d="
            M180,200
            a75,75 0 1,1 150,0
            a75,75 0 1,1 -150,0" />
    <text xml:space="preserve" id="text5965">
      <textPath xlink:href="#patha" id="textPath5967">
        <tspan id="tspan5963">Pagt A: Updated formula</tspan>
      </textPath>
    </text>
    <text xml:space="preserve" id="text5965">
      <textPath xlink:href="#path" id="textPath5967">
        <tspan id="tspan5963">Title is here: do not forget to pick up the kids...</tspan>
      </textPath>
    </text>
    <text xml:space="preserve" id="text5965">
      <textPath xlink:href="#circleArc2" id="textPath5967">
        <tspan id="tspan5963">Title is here: do not forget to pick up the kids...</tspan>
      </textPath>
    </text>
    <text transform="translate(50,100)">&lt;circle /&gt; tag</text>
    <text transform="translate(250,100)">
      <tspan>
        &lt;path /&gt; tag
      </tspan>
      <tspan x="0" y="15">unknown concept</tspan>
    </text>
    <text transform="translate(50,300)">
      <tspan>
        &lt;path /&gt; tag
      </tspan>
      <tspan x="0" y="15">aaaa</tspan>
    </text>
  </svg>

CSS

circle,
path {
  fill: none;
  stroke-width: 5;
  stroke-opacity: .9;
}

circle {
  stroke: red;
}

path {
  stroke: blue;
}

text {
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 125%;
  font-family: sans-serif;
  letter-spacing: 0px;
  word-spacing: 0px;
  fill: #000000;
  fill-opacity: 1;
  stroke: none;
  stroke-width: 1px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1
}

.circlePath {
  stroke: orange;
}

.circlePath2 {
  stroke: green;
}

svg {
 background-color: grey;
}

JavaScript

d3.select("svg")
  .append("path")
  .attr("class", "circlePath")
  .attr("id", "circleArc")
  .attr("d", function(d) {
    return circlePath(300, 300, 75)
  })

d3.select("svg")
  .append("path")
  .attr("class", "circlePath2")
  .attr("id", "circleArc2")
  .attr("d", function(d) {
    return circlePathWhat(300, 300, 75)
  })

function circlePath(cx, cy, r) {
  return 'M ' + cx + ' ' + cy + ' m -' + r + ', 0' + ' a ' + r + ',' + r + ' 0 1,1 ' + (r * 2) + ',1' + ' a ' + r + ',' + r + ' 0 1,1 -' + (r * 2) + ',0';
}
function circlePathWhat(cx, cy, r) {
            var d = ["M", cx - r, cy, 
            	"a", r, r, "0 1 1", (r * 2), "0", 
              "a", r, r, "0 1 1", (-r * 2), "0"].join(" ")
            return d
    }
    
function circlePathESWN(cx, cy, r) {
  return "M" + cx + "," + cy 
  				+ "a" + r + "," + r + " 0 1,1 " + (r * 2) + ",0" 
          + "a" + r + "," + r + " 0 1,1 " + (-r * 2) + ",0"
}