describeArcSections.js

const angleInRadians = angleInDegrees => (angleInDegrees - 90) * (Math.PI / 180.0);

const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
  const a = angleInRadians(angleInDegrees);
  return {
    x: centerX + (radius * Math.cos(a)),
    y: centerY + (radius * Math.sin(a)),
  };
};

const arc = (x, y, r, r2, startAngle, endAngle) => {
  return describeArc(x, y, r, startAngle, endAngle) + describeArc(x, y, r2, endAngle, startAngle, true) + "Z";
};

const describeArc = (x, y, radius, startAngle, endAngle, contLine) => {
  const start = polarToCartesian(x, y, radius, startAngle %= 360);
  const end = polarToCartesian(x, y, radius, endAngle %= 360);

  const arcSweep = Math.abs(endAngle - startAngle) >= 180 ? '1' : '0';
  const alter = endAngle > startAngle ? "1" : "0";
  const d = [
    `${contLine ? 'L': 'M'}`, start.x, start.y,
    'A', radius, radius, 0, arcSweep, alter, end.x, end.y
  ].join(' ');
  return d;
};


const getArc = (x,y,r,r2) => {
  let countOfSections = 7;

  return new Array(countOfSections).fill(null).map((data, idx) => {
      sectionWidth = 359.9999 / countOfSections;
      return `${arc(x,y, r, r2, idx * sectionWidth, idx * sectionWidth + sectionWidth)}`;
  }).join(' ');

}

document.getElementById('arc1').setAttribute('d', getArc(100,100,50,15));