Jump to content

Sektor - draw and animate SVG sectors

Posted in JavaScript · 1 minute read

For a current project I'm on, we needed both circular timer, and progress bar. Again, I wasn't able to find small library to do that. But I found awesome answer on Stack Overflow, decided SVG is way to go, and wrote Sektor.

Sektor is a plain JavaScript library that draws circle sector (or an arc). Once it is drawn, you can change it's angle and animate the change.

Sektor - draw and animate SVG circle

It works in every browser with SVG and requestAnimationFrane support (IE10+ and modern browsers). Check demo and docs.

I may use this for example how much better is to use requestAnimationFrame than setInterval. If you are bored, try it yourself, and you'll see that animating using requestAnimationFrame is way smoother.

React component is coming soon as well. Cheers!

Related posts

JavaScript animation loop
React Image Filter
Accessible range slider

Comments (3)

14. June 2019
Bean Wong

Thanks for your reply Stanko, can i have a example to how to pass the "angle" to a easing function?

13. June 2019
Stanko

Hey Bean, I'm really glad Sektor was useful for you.

To add easing you need to change this line: sektor.es6.js#L57

Just pass angle to a easing function and that's it. I would gladly accept a pull request if you have time to make one.

Cheers!

13. June 2019
Bean Wong

Hello, is it possible to add easing for the animation part? Btw thank you so much you bring us "Sektor", it's great!

ArtBlogProjectsAboutStatsRSS feedGitHub