Draw Circle Segments

const DEG2RAD = Math.PI / 180;

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  set x(v){
    this._x=Math.round(v);
  }
  set y(v){
    this._y=Math.round(v);
  }
  get x(){
    return this._x;
  }
  get y(){
    return this._y;
  }
}

function getCirclePoint(pivot, radius, angle) {
  let rads=DEG2RAD*angle;
  return new Point(pivot.x+Math.sin(rads)*radius,pivot.y-Math.cos(rads)*radius);
}

function createSVGElement(tag, attrs = {}) {
  let el = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (let attr in attrs) {
    if (hasOwn(attr, attrs)) {
      el.setAttribute(attr, attrs[attr]);
    }
  }
  return el;
}

function createCircleSector(pivot, radius, startAngle, endAngle, fill) {
  let startPoint = getCirclePoint(pivot, radius, startAngle);
  let endPoint = getCirclePoint(pivot, radius, endAngle);
  // console.log('start=',startPoint,'end=',endPoint);
  let angle = Math.abs(startAngle - endAngle);
  // https://svg-art.ru/?page_id=900
  let d = [
    // Перемещаемся в начальную точку
    'M' + startPoint.x, startPoint.y +
    'A' + radius, radius,
    // x-axis-rotation – угол поворота всей дуги элипса относительно оси абцисс
    0,
    // large-arc-flag – параметр, отвечающий за вывод большей части дуги,
    // если (=1) или меньшей (=0) части дуги
    angle > 180 ? 1 : 0,
    // sweep-flag – отвечает за направление отрисовки дуги из начальной точки в
    // конечную точку. Если sweep-flag=1, то дуга элипса будет отрисована по
    // часовой стрелке. При sweep-flag=0 – против часовой стрелки.
    1,
    endPoint.x, endPoint.y +
    'L' + pivot.x, pivot.y,
  ].join(' ');
  return createSVGElement('path', {fill, d});
}