Any RaphaelJS Guru knows how to draw this image? - raphael

Question

Any Raphael JS guru (or any genius who doesn't know Raphael JS) knows how to simply draw this?
the solid yellow color is 4.2 / 10 of part of the circle.

Answer 1

First approach using svg's elliptical arc curve command
Demo: http://jsbin.com/iwuqe3/edit
Raphael.fn.zeroToTenArc = function (x, y, r, value) {
var set = this.set();
var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var maxValue = 10;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;
var colors = ["#F79518", "#FCE6BF", "#FFF"];
set.push(this.circle(x, y, r).attr({ fill : colors[+!value], stroke : 0 }));
var p = [
"M", x, y,
"l", r * cos(t), r * sin(t),
"A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad),
"z"
];
set.push(this.path(p).attr({ fill : colors[1], stroke : 0 }));
set.push(this.circle(x, y, r*0.7).attr({ fill : colors[2], stroke : 0 }));
return set;
};
var canvas = Raphael("hello", 300, 300);
var arc = canvas.zeroToTenArc(150, 150, 30, 4.2);
.
Second approach using (a lot of) svg's lineto commands
Demo: http://jsbin.com/usotu5/edit
Raphael.fn.zeroToTenArc = function (x, y, radius, value) {
var angle = 0;
var endAngle = (value*360)/10;
var path = "";
var clockwise = -1;
var translate = Math.PI/2;
while(angle <= endAngle) {
var radians= (angle/180) * Math.PI + translate;
var cx = x + Math.cos(radians) * radius;
var cy = y + Math.sin(radians) * radius * clockwise;
path += (angle === 0) ? "M" : "L";
path += [cx,cy];
angle += 1;
}
return this.path(path);
};
var canvas = Raphael("hello", 200, 200);
canvas.zeroToTenArc(50, 50, 30, 10).attr({ stroke : "#FCE6BF", "stroke-width" : 12 });
canvas.zeroToTenArc(50, 50, 30, 4.2).attr({ stroke : "#F79518", "stroke-width" : 12 });