{
const o = sliceOutsetFraction * r;
const s = 2 * (r + o);
const theSvg = DOM.svg(s, s);
const cx = s / 2;
const cy = s / 2;
const fraction = percentage / 100;
const clampedFraction = clamp(fraction, 1e-6, 1 - 1e-6);
const a = clampedFraction * 2 * Math.PI;
const largeArcSweepFlag = 0;
const sweepFlag = a >= Math.PI ? 0 : 1;
const ax = cx;
const ay = cy - r;
const bx = cx + r * Math.sin(a);
const by = cy - r * Math.cos(a);
const ox = (o * Math.sin(a / 2)) / 2;
const oy = (o * -Math.cos(a / 2)) / 2;
theSvg.appendChild(svg`<path stroke="navy" fill="none" d="
M ${ax} ${ay}
A ${r} ${r}, 0, ${sweepFlag}, ${largeArcSweepFlag}, ${bx} ${by}
L ${cx} ${cy} Z"
transform="translate(${-ox}, ${-oy})
"/>`);
theSvg.appendChild(svg`<path stroke="navy" fill="navy" d="
M ${ax} ${ay}
A ${r} ${r}, 0, ${1 - sweepFlag}, ${1 - largeArcSweepFlag}, ${bx} ${by}
L ${cx} ${cy} Z"
transform="translate(${ox}, ${oy})
"/>`);
return theSvg;
}