How to code a responsive circular percentage chart with SVG and CSS.

Let’s build it!

1. Creation of the SVG circle.

radius = circumference / 2π

radius = 100 / ( 3,14159 * 2 ) = 15,9155

diameter = 15,9155 * 2 = 31.831

<svg viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#444";
stroke-width="1";
/>
</svg>
  • x: 18 (36/2)
  • y: 2.0845 ((36–31.831) / 2)

2. The dash and the gap.

stroke-dasharray=”<dash-length>, <gap-length>”
stroke-dasharray="100, 100" --> 100%
stroke-dasharray="75, 100" --> 75%
stroke-dasharray="50, 100" --> 50%
stroke-dasharray="25, 100" --> 25%
stroke-dasharray="0, 100" --> 0%
...
<svg viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#444";
stroke-width="1";
stroke-dasharray="75, 100"
/>
</svg>

3. Put all together with some CSS styles and animations.

A basic setup:

A more comprehensive example:

Browser compatibility

  • Chrome 7+
  • Firefox 4+
  • Opera 12+
  • Safari 5.1+
  • Internet Explorer / Edge 9+ (*)

--

--

Front-end developer and UX/UI designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sergio Pedercini

Sergio Pedercini

Front-end developer and UX/UI designer.