How to create a SVG PieChart using AngularJS?

A couple of years back, I worked in a project which require data visualization component. There are a set of performance and features requirements set by the end-users. I gained so much experience and knowledge from that project. Now, I got something which is kind of similar to what I have done and did the basic charting work. Well, small program which  do something cool. A SVG chart drawn by pure JavaScript...also it's Angular Component.

Source Code

It is how it works...

How can we create a bouncing ball without using any JavaScript?

Animating the UI is an effective way to draw the attention from users and make our apps more interesting. When I was working on a Silverlight to HTML5 project, I come across many animated user interface. Our roadmap is not to use jQuery dependent code unless we have to. From this project, I learnt many things on CSS animation and it is highly efficient and effective way of doing animation.
We do not clutter the JavaScript code.
We reduce the execution overhead and save CPU cycle.
Our code will stay current and relevant as new technologies come up.
We have no dependency on any other third party library as we use pure native features from what browsers support.
***No workaround or hacky stuff.
Here I want to share a sample code which is of a little something similar to how I did UI animation.
I make it bare minimum to make it more intuitive and easy to understand.
Just copy the sample html, save it and open it in a Chrome, Firefox, IE11 or Edge browsers.
You will see the ball bouncing inside its container - without any JavaScript required.

Source code

Code in Action