SVG animate shadow, feBlend, feGaussianBlur

[SergLine]

Hi everyone!

I want to animate shadow appearence of svg after the morph. I was trying to change stdDeviation attr, but shadow stays visible. Will be glad to any advice ?

See the Pen qQPoQX by AlkoLINE (@AlkoLINE) on CodePen

[mikel]

Hi @SergLine,

Is it as expected?

 

See the Pen LXzopv by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

[SergLine]

Hello, Mikel! 

I want the shadow to appear after morphing, so the square will be without shadow and the circle will be with shadow. 

[mikel]

Hi,

 

Like this one?

 

See the Pen JerQjd by mikeK (@mikeK) on CodePen

 

Happy shadowing ...

Mikel

 

 

[SergLine]

Yeah! drop-shadow exactly what i need, thank you very much

[mikel]

Hi @SergLine,

The reveal of the shadow can be improved.

Here's a workaround of @OSUblake, using CSS variables.

 

See the Pen dQJwQe?editors=0110 by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

 

[SergLine]

Mikel, hi!

 

During this time I decided to make the animation of the shadow a little different, changing dx and dy of feOffset. Here is:

See the Pen QJKBQx by AlkoLINE (@AlkoLINE) on CodePen

 

I think it looks nice

 

Honestly, I thought it was not possible, to animate drop-shadow. Thank you for this example! 

It pushed me to learn more about CSS variables)

[mikel]

Hi @SergLine,

 

A good decision. It looks great.
In this case: function follows form.

 

Thanks for the feedback.
Mikel