JSFiddle - React, Tailwind, and code Playground

by Abhishek Hingu

HTML

<svg version="1.1" viewBox="0 0 1000 1000">
<defs>
    <marker id="endtriangle"
  viewBox="0 0 10 10" refX="0" refY="5" 
  markerUnits="strokeWidth"
  markerWidth="4" markerHeight="3"
  orient="auto" overflow="visible">
    <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
    <marker id="starttriangle" overflow="visible"
  viewBox="0 0 10 10" refX="5" refY="5" 
  markerUnits="strokeWidth"
  markerWidth="4" markerHeight="3"
  orient="auto">
    <path d="M -2 5 L 8 0 L 8 10 z" />
    </marker>
</defs>
    <path transform="translate(300,300)" stroke-width="10" d="M8.572527594031473e-15,-140A140,140 0 0,1 121.2435565298214,-70" stroke="black" fill="none" marker-end="url(#endtriangle)" marker-start="url(#starttriangle)" />
</svg>
</body>

CSS

svg { border: 1px solid black; height:100%; }

JavaScript

var arc=d3.svg.arc()
    .innerRadius(140)
    .outerRadius(140)
    .startAngle(0)
    .endAngle(Math.PI/3);

d3.select("svg").append("path")
        .attr("d",arc)
        .attr("transform","translate(200,200)")
        .attr("stroke","black")
        //.attr("marker-end","url(#endtriangle)")
        //.attr("marker-start","url(#starttriangle)")
        .attr("fill","none")
        .attr("stroke-width","10")
        .attr("id","dimen");