 <p>Shamelessly copy and pasting from <a href="http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands" rel="nofollow">the specification</a>:</p> <pre><code>&lt;path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5" /&gt; </code></pre> <p>The path uses the "elliptical arc" command to draw a partial circle. You can either draw several of them, each describing a different circular section, or you give one of them an ID and reference it with <code>&lt;use xlink:href="#ID" /&gt;</code>. Then you can rotate the <code>&lt;use/&gt;</code>. Draw as many of them as you need for granularity (e.g., 100 sectors allow you steps of 0% to 100%).</p> <p>To colorize them, just set the <code>fill=""</code> attribute of each single sector to the fitting value.</p>