How to create an arc using JavaScript some maths and SVG?

Question

I am trying to do a function in order to get and arc on a SVG path.

I created a function named drawArcSegment which takes 4 params startPercentage, endPercentage, radius, thickness, and I have some pseudo code done

this is what I have already but I don't have an idea of how to ahead

var drawArcSegment = function(startPercentage, endPercentage, radius, thickness) {
  point1 = (R*cos(A), R*sin(A));
  point2 = ( (R-D)*cos(A), (R-D)*sin(A) );
  point3 = ( (R-D)*cos(B), (R-D)*sin(B) );
  point4 = (R*cos(B), R*sin(B));

  d="M10 10 H 90 V 90 H 10 L 10 10";

  $("#myPath").attr("d", d);
}

the html part

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path stroke="black"
        stroke-dasharray="5,5"
        fill="green"
        id="myPath" />
</svg>

with the value of the d var, I get a square now. But I need something like this:

I have this Pen in case you want to take a look.

So, any suggestion?