Sektor Library for making and animating SVG circle sectors

Sektor* is a plain JavaScript library for generating SVG cirlce sectors and donuts. Supports sector animation as well. Requires SVG and requestAnimationFrame support (which means modern browsers and IE10+).

* Sektor is a little play with words, robot in the title is the MK character called Sektor

Animate to:

Usage and API

Include the sektor.js file. Library is originally written in ES6 and transpiled using Babel. Source can be found in the js/sektor.es6.js.

To build it yourself, you'll to run npm install first. Two tasks are available:

npm run watch // For development, to watch and transpile lib on the fly
npm run build // Build library once

You can style it using CSS. Viewbox is added, but it is advised to add CSS width and height. Classes added to the SVG are:

.Sektor // SVG itself

.Sektor-sector // Sector

.Sektor-circle // Background circle

// Use "fill" for background, and "stroke" for border

Released under MIT licence.

Minimal setup

var sektor = new Sektor('.sektor', {
  angle: 30
});

Full options

var sektor = new Sektor('.sektor', {
  size: 200,
  stroke: 20,
  arc: true,
  angle: 310,
  sectorColor: '#bD2828',
  circleColor: '#DDD',
  fillCircle: false
});

Default options

size: 100 // width and height of the circle (viewbox values)
arc: false // should only outline be rendered (instead of filled sector)
stroke: 10 // stroke width (applied only if arc is set to true)
angle: 225 // angle of the sector
sectorColor: '#789' // sector fill
circleColor: '#DDD' // background circle fill (set to 'none' if you want transparent one)
fillCircle: true // should circle be filled (applied only if arc is set to true)

Methods

// Changes angle of the sector/arc (no animation)
// Params:
// angle - in degrees (0-360)
sektor.changeAngle(320);

// Animates change of the sector/arc to given angle
// Params:
// angle - in degrees (0-360)
// time - in ms, optional (default 500ms)
sektor.animateTo(230, 700);