svg-partial-circle

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.