Raphael inner glow?

Question

I am looking for a way to achieve only an inner glow or shadow on a raphael path. Unfortunately, you can only do radial gradients on an ellipse or a circle.

One idea may be to create a series of paths which are slightly smaller and fit inside the original path and then to give them different stroke colors, but I have no idea how I would approach that. Some function that takes the path and subtracts or adds values to the numbers depending on where they are... Anyway, if anyone has any ideas, or maybe another javascript library that does this, that would be great.

Answer 1

Ok here is how you can achieve that. It is pretty straightforward I think. I know it is hard to manually create a shadow path from your original. But there is a trick called scale() function. Steps to how you can get inner shadow or inner glow effect:

1. Create your path
2. Clone it into another path
3. Set the scale() of cloned path to be 0.9*original
4. Then hide the cloned path, but apply glow() function on it

The code:

var paper = Raphael("notepad", 500, 500);

var path = paper.path("M 50 200 L 120 100  200 190 80 250z");
var shadow = path.clone().scale(0.9).hide();


shadow.glow();
path.attr({stroke: "darkred"});

Look at the DEMO, this is not perfect but with minor changes, yo can get what you want.

Also as a side note:
glow() function has attributes like offsetx, offsety, opacity... Changing those attributes will give you your preferred shadow/glow.

UPDATED CODE http://jsfiddle.net/jUTFm/41/