Login
evert

evert / Sector path SVG generator

Last active 4 months ago

Like 0

Revision 66558123472fb4ee8fd432a798846cf7cf77b339

sector.js Raw
1function getSectorPath(centre, rIn, rOut, startDeg, delta) {
2 const startOut = {
3 x: centre.x + rOut * Math.cos(startDeg),
4 y: centre.y + rOut * Math.sin(startDeg)
5 };
6 const endOut = {
7 x: centre.x + rOut * Math.cos(startDeg + delta),
8 y: centre.y + rOut * Math.sin(startDeg + delta)
9 };
10 const startIn = {
11 x: centre.x + rIn * Math.cos(startDeg + delta),
12 y: centre.y + rIn * Math.sin(startDeg + delta)
13 };
14 const endIn = {
15 x: centre.x + rIn * Math.cos(startDeg),
16 y: centre.y + rIn * Math.sin(startDeg)
17 };
18 const largeArc = delta > 180 ? 1 : 0;
19
20 return [
21 `M${startOut.x},${startOut.y}`, `A${rOut},${rOut}`, '0',
22 `${largeArc},1`, `${endOut.x},${endOut.y}`,
23 `L${startIn.x},${startIn.y}`,
24 `A${rIn},${rIn}`, '0', `${largeArc},0`,
25 `${endIn.x},${endIn.y}`,
26 `L${startOut.x},${startOut.y}`, 'Z',
27 ].join(' ');
28}