shadow on a path

[marc fawzi]

if realize there is support in SVG for adding drop shadow to a circle
or polygon

but is there support for adding drop shadow to a path?

if not then how would you go about adding a drops hadow to a closed path?

[marc fawzi]

I managed a blur effect which casts a kind of a drop shadow by
blurring the path) but obviously on both sides of the path stroke.

I was hoping there is a way to do a drop shadow only on the outside of
a closed path.... is that possible?

[marc fawzi]

I can also move the blur effect by x,y offset

But I guess what I was looking for is not a drop shadow per se but an
outer halo ...

there must be a way.... :)

[marc fawzi]

solution:

build a slightly scaled up version of the closed path, blur it, and
overlay it on top of the original scale version

that should produce an outer halo around the closed path

[Pepijn Olivier]

Hello Marc,

have you found a better solution for this yet?

I just posted a related question, and only then saw your post!

https://groups.google.com/forum/#!topic/d3-js/iD-5hEHOQe8

[marc fawzi]

yes, I did, 

not a shadow but a glow (blur) effect that is offset w/r/t the path

however, this came to my attention more recently that looks cool 

http://bl.ocks.org/cpbotha/5200394

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Pepijn Olivier]

Hey Marc, thanks for answering.

I've seen that example too yesterday, and it looks like it does the trick. However, I'm trying to create an inner shadow, and with that I haven't succeeded yet.

Seems to me like there's no easy way to do this.

If you would have an idea for that, I'd be happy to hear.

And thanks again for the reply, I appreciate it!

Pepijn

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/ruH7FudtnpY/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[marc fawzi]

assuming your path is a closed path (like a boundary of a country or state) you might have some luck creating a copy of it that is both blurred and just scaled down enough to fit inside the original path without leaving any gap ...

any better way Ian? :)  

[marc fawzi]

somehow I think that reading the path data and using canvas to draw a blurred path that fits tightly within the original path but is blurred (i.e. simulate inner shadow) is more attractive, so if you have a canvas element positioned absolutely w/r/t the SVG container then that should be doable ... 

there is also this other interesting 'glow' effect that you may be able to learn some tricks from that might be useful

http://bl.ocks.org/wbzyl/3131918

beyond that i really don't know

[Pepijn Olivier]

Hi Marc,

About the blurred path that fits tightly within the original path: Do you know of a method with which I can extract some coördinates of the path? (like top, left and right).

If I'd have that, I could just draw the shadow myself, in this case it would be nothing more than just 2 dark lines.

Pepijn

[marc fawzi]

try this:

http://www.professorcloud.com/svg-to-canvas/

specify the <path> as part of an svg doc (render in browser first to verify) and feed it to svg-to-canvas app then give the resulting code a canvas context for a canvas element that is positioned absolutely w/r/t the path you want to add inner shadow to then .scale() the canvas context so it fits within the original svg path it's superimposed on without leaving gaps

you can also modify the generated canvas code to make the drawn line transparent or move it off screen and then use the shadow instead of the line

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.shadowColor = "DarkGoldenRod";
context.fillStyle = "Gold";
context.fillRect(20, 20, 100, 120);

Etc ...

Not sure if this will work as I expect, but that's what I would try myself, so I'm interested in any results you get from this or any other method you may end up using.