CODEWITHSUNDEEP
svgraphael
jim smith
jim smith

Reputation: 2454

SVG - crescent shape in raphael

I have a circle with a half circle in it which I'm going to use to create a shine effect - what I'd really like to do is make it a crescent shape

Does anybody know how to make the half circle a crescent shape so it looks a bit more 3d?

This is what I have so far

http://jsfiddle.net/Hf79W/3/

var paper = Raphael("holder", 550, 550/1.5);
var rad = Math.PI / 180;
function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
var circle = paper.circle(100, 100, 50).attr({"fill":"brown"});
var fifty = sector(100,100,50,0,180,{"fill":"white","opacity":"0.4"});

Upvotes: 1

Views: 278

Answers (2)

enarcee
enarcee

Reputation: 697

I have modified the main function a bit to achieve the same.

function sector(cx, cy, r, startAngle, endAngle, params) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", x1, y1, 
    "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
    "A", r*1.1, r*1.1, 0, +(endAngle - startAngle > 180), 1, x1, y1, 
    "z"]).attr(params);
}

In drawing the second curve, reverse the sense of drawing and increase the radius a bit. Hope that helps.

Upvotes: 2

Jim SMith
Jim SMith

Reputation: 212

I solved this by drawing the cresecent in inkscape and then saving as SVG

Upvotes: 0

Related Questions