Animated SVG pie chart with custom properties

I've made a small js/css/html module which purpose is to fill a pie chart up to a given percentage. Basically it could be used for instance as a filling pie chart that keep tracks of the amount of donations for a non-profit organization.

Let's sum up briefly what it does. Basically I have two svg circles, the base color and the fill color. Javascript will get the fill circle and give it a stroke-dasharray that corresponds to the percentage value (based on the circle area). Basically the fill circle's stroke will animate up to a given value.

The main advantage is that my chart can be customized easily on those parameters : the base pie color, the filling color, the number color, the pie shadow (or its absence) and the dimension of the pie. Also, you can use as many pie charts as you want on a single page, each one only need a different id/class as you see fit.

The percentage to which the pie will fill is stocked in a html data-id. So it's very easy to use with something like PHP. Also, there is no need to write a single line in javascript, mostly everything is in the SCSS file (you still need to enter 2 values in the html for the svg circles dimensions).

The problem is I'm not that good at writing javascript so I'm pretty sure it could be more efficient. Also, the SCSS might be better, I'd like to know your opinion on that.

So if you want to review only the javascript or only the SCSS, that's very fine by me. Maybe even the whole concept of my module is flawed, if you want to comment on the big picture

Here is my codepen to see the pie chart in action and fiddle with the code

Here is the html

Here is the SCSS, as you can see I tried my best to stay modular. It's made so you can create any number of pie charts

```
// Base styles for every pie chart
%pie-base {
position: relative;
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border-radius: 50%;

svg {
display: block;
margin: 0 auto;

Why are you doing this in easeOutCubic?

return c * ((t = t / d - 1) * t * t + 1) + b;

that's way harder to read than something like

t = t / d - 1;
return c * (t * t * t + 1) + b;
// or
return c * (Math.pow(t, 3) + 1) + b;

Sorry I don't know a ton about jQuery or SVG or I'd try to help more, but that was really bothering me.

StackExchange Code Review Q#115895, answer score: 2