Question

I want to draw a rod like structure with raphael js, giving it gradient effect so that it will show a 3-d effect.
But as I am just a beginner I am not able to achieve this thing.
Can anyone suggest me how to do it?
Thanks for any help

Answer 1

I’ll tell you what I know. You’ll want to fill your object with a gradient. I’ve made a few rectangles for you to look at. Play with them, and understand how the gradient fill works. That’s what I did. 🙂

var paper = Raphael("holder");
paper.setSize(400, 400);
rect = paper.rect(25, 50, 25, 300).attr({fill: "180-#FFF:10-#f00:80-#000:95"});
rect = paper.rect(100, 50, 25, 300).attr({fill: "0-#FFF:10-#f00:80-#000:95"});
rect = paper.rect(175, 50, 25, 300).attr({fill: "90-#FFF:5-#f00:80-#000:95"});

The first number in the fill is the rotation of the fill. The numbers following the colors (ex. #FFF:5) is the offset.

Here’s a similar question with some good answers/information: How to create gradient object with Raphael