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.