https://github.com/derhuerst/svg-partial-circle

Compute the SVG path of a partial circle.
https://github.com/derhuerst/svg-partial-circle

dataviz svg

Last synced: 5 days ago
JSON representation

Compute the SVG path of a partial circle.

• Host: GitHub
• URL: https://github.com/derhuerst/svg-partial-circle
• Owner: derhuerst
• License: isc
• Created: 2016-10-15T14:58:29.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-12-28T19:10:19.000Z (almost 5 years ago)
• Last Synced: 2024-11-06T21:08:45.407Z (6 days ago)
• Topics: dataviz, svg
• Language: JavaScript
• Homepage: https://github.com/derhuerst/svg-partial-circle
• Size: 17.6 KB
• Stars: 16
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

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](https://github.com/search?l=JavaScript&q=svg+progress+circle). But all of them are not modular enough (people call this opinionated).

[![npm version](https://img.shields.io/npm/v/svg-partial-circle.svg)](https://www.npmjs.com/package/svg-partial-circle)

[![build status](https://img.shields.io/travis/derhuerst/svg-partial-circle.svg)](https://travis-ci.org/derhuerst/svg-partial-circle)

![ISC-licensed](https://img.shields.io/github/license/derhuerst/svg-partial-circle.svg)

[![chat on gitter](https://badges.gitter.im/derhuerst.svg)](https://gitter.im/derhuerst)

[![support me on Patreon](https://img.shields.io/badge/support%20me-on%20patreon-fa7664.svg)](https://patreon.com/derhuerst)

## Installing

```shell

npm install svg-partial-circle

```

## Usage

```js

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(``)

```

```svg

```

## API

```

partialCircle(cx, cy, r, start, end)

```

`start` and `end` are in [radians](https://en.wikipedia.org/wiki/Radian). `partialCircle(…)` returns an array of [path commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d), 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](https://github.com/derhuerst/svg-partial-circle/issues).