You’ve got a percentage value and you need a simple pie chart output; SVGs and a bit of JavaScript to the rescue. SVG support is pretty widespread these days and is only going to get better.
Disclaimer: I am have a fine arts background and math isn’t my forté. That said this technique has served me well for simple, dynamic pie charts.
Below are snippets of CSS, HTML, and JavaScript. I’ve opted for vanilla CSS and JavaScript for portability and versatility. Feel free to SASS it up. Maybe stay away from jquery for this though; no need for it with something this simple.
This example would render a pie chart with a diameter of 80 pixels. This technique only works well when working with a single percentage value. For more roubust pie charts have a look at the further reading section below.
See the Pen Simple SVG Pie Charts by Ian McFarlan (@mcfarlan) on CodePen.light
