feturbulence Applying feTurbulence to shape? (basic svg question)

[beau_dev]

I'm really drawing a blank here...

 

I'm trying to apply a turbulence filter exclusively to a circle. I'm wondering whether it's possible to do so without a clipping mask of some kind.

 

I'm trying to get my head around filters so I will later animate them with GSAP.

 

I'd really appreciate any help at all... I'm at my wits end.

 

Many thanks!

 

-Beau

See the Pen QmwmbX by beau_dev (@beau_dev) on CodePen

[Sahil]

You need to use feDisplacementMap and pass two sources to it using in and in2, which would be result of turbulence and the source graphic.

 

See the Pen jzExYG?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[beau_dev]

19 hours ago, Sahil said:

You need to use feDisplacementMap and pass two sources to it using in and in2, which would be result of turbulence and the source graphic.

That's very useful, Sahil, Thank you.

 

I have a further question that, perhaps, you may be able to answer.

 

How would I render, statically, the turbulence (as it appears on the shape above)--without distorting the edges?

 

Is this possible without the use of clip-path?

 

(I'm assuming that I'm close to the 'best practice' to render a texture on an svg).

 

I forked this pen whose background is more-or-less the texture I would like to produce.

--However, I notice that turbulence is applied to the background--hence, rectangular in shape--So, while it renders an effective pattern, no shapes/filters "layers" need modification.

 

Would I need to use clip-path in order to say, render a triangle or other polygon, or a circle (as above)?

 

TL;DR: All I'm looking for is to render a bit of noise on an svg that is NOT a rectangle. I am looking to maintain the integrity of the shape's edges while "distorting" the surface to give the element some texture.

See the Pen pLvLNJ by beau_dev (@beau_dev) on CodePen

Many, Many thanks to you & cheers!

 

-Beau

 

P.S.

From the stuff I've read, I'm beginning to think that clipping is the only way I'm going to be able to do this.

[Sahil]

Actually I have never played with these filters but what I managed to figure out so far is they are like pluggables. You take one or two filters and plug them into another, it is really interesting topic but I will have to dive deep into docs to figure out everything. So far I managed to do the following demo but it shows dark edges on circle. Maybe @OSUblake and @PointC can suggest something, but I guess using clip will resolve this as well.

 

See the Pen GxJJzy?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[beau_dev]

Really helpful, Thanks!

[PointC]

If you want to restrict the filter to the SourceGraphic, you can throw in an extra composite with the source before the multiply.

 

See the Pen xWGdbN by PointC (@PointC) on CodePen

 

You can do that on a group too.

 

See the Pen OvVmmj by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

[beau_dev]

On 3/11/2018 at 1:47 PM, PointC said:

If you want to restrict the filter to the SourceGraphic, you can throw in an extra composite with the source before the multiply.

 

See the Pen xWGdbN by PointC (@PointC) on CodePen

 

You can do that on a group too.

 

See the Pen OvVmmj by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

 

 

Wow... really nice.

 

This is really kind of wonderful. thank you.