Raphael.fn.pie = function (cx, cy, r, a1, a2) { var d, flag = (a2 - a1) > 180; a1 = (a1 % 360) * Math.PI / 180; a2 = (a2 % 360) * Math.PI / 180; d = ["M", cx, cy, "l", r * Math.cos(a1), r * Math.sin(a1), "A", r, r, "0", +flag, "1", cx + r * Math.cos(a2), cy + r * Math.sin(a2), "z"]; return this.path(d.join(' ')); }; var i, start, end, color, nPie = 24, // Change this value to update the number of pies slice = 360/nPie, paper = Raphael("paper", 300, 300), pies = paper.set(); for(i = 0; i < nPie; i++) { start = (i*slice) - (slice/2); end = start + (360/nPie); color = (i*slice) / 360; pies.push( paper.pie(150, 150, 140, start, end) .attr({fill:"hsl(" + color + ", 1, 0.5)"}) ); } pies.attr({ stroke: "#FFF", "stroke-width": 3 // Change this value to adjust the thickness of the borders. });
<div id="paper"></div>
body{ background: black; margin: 0; padding: 50px } #paper{ width: 300px; margin: 0 auto; }