svg-partial-circle
v1.0.0
Published
Compute the SVG path of a partial circle.
Downloads
17,223
Maintainers
Readme
svg-partial-circle
Compute the SVG path of a partial circle.
Compared to Canvas, defining a partial circle is surprisingly complex. I searched for a module that encapsulates this complexity and there are modules out there. But all of them are not modular enough (people call this opinionated).
Installing
npm install svg-partial-circle
Usage
const partialCircle = require('svg-partial-circle')
const path = partialCircle(
30, 30, // center X and Y
20, // radius
Math.PI / 4, // start angle
Math.PI * 7 / 4 // end angle
)
.map((command) => command.join(' '))
.join(' ')
console.log(`<path d="${path}" />`)
<path d="M 44.14213562373095 44.14213562373095 A 20 20 0 1 1 44.14213562373095 15.857864376269045" />
API
partialCircle(cx, cy, r, start, end)
start
and end
are in radians. partialCircle(…)
returns an array of path commands, each command being an array of its parts.
start < end
will draw a clockwise segment, while start > end
a counterclockwise one.
Contributing
If you have a question, found a bug or want to propose a feature, have a look at the issues page.