svg arc

svg arc

by Csaba Hellinger

HTML

<svg viewBox="0 0 1 1">
<circle cx="0.5" cy="0.5" r="0.4" stroke="#bbb" stroke-width="0.02" fill="none" />
  
</svg>

CSS

svg {
  width: 200px;
  height: 200px;
  background: #888;
}

JavaScript

const svg = document.querySelector('svg');
const rad = 2* Math.PI / 360;

const dot = (x,y,color) => {
    const child = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  child.setAttribute('fill', color);
  child.setAttribute('cx', x);
  child.setAttribute('cy', y);
  child.setAttribute('r', 0.02);
  svg.appendChild(child);
}

const arc = (cx,cy,r,a1,a2,color) => {
  const sx = cx + Math.cos(a1 * rad) * r ;
  const sy = cy - Math.sin(a1 * rad) * r ;
  dot(sx,sy,'white');
  
  const ex = cx + Math.cos(a2 * rad) * r ;
  const ey = cy - Math.sin(a2 * rad) * r ;
  dot(ex,ey,'black');
  
  const [angle,large,sweep] = [a1,Number(a2-a1>180),0];
  
  const d = `M ${sx},${sy} A ${r},${r} ${angle} ${large} ${sweep} ${ex},${ey}`

  const child = document.createElementNS("http://www.w3.org/2000/svg", "path");
  child.setAttribute('stroke', color);
  child.setAttribute('stroke-width', 0.01);
  child.setAttribute('d', d);
  child.setAttribute('fill','#0004');
  svg.appendChild(child);
};

arc(0.5, 0.5, 0.4, 45, 270, 'red');