bloomFilter sharp rectangular cut in svg

[nishaant]

i am new to canvas+pixi world, so pardon me for mistakes,

 

well i applied bloom filter on svg with blur = 20,

now how i can elemenate this rectangular cut? any smoothing or expand this rectangle to upto faded edges?

 

[AlexandreZara]

Hello!

Kinda new here as well, had the same issue the other day.

As I understand filters are applied according to a 'FilterArea' that fits the container by default.

You should set it with a rectangle the fits the texture plus padding.

container.filterArea = new PIXI.Rectangle(0, 0, someWidth, someHeight);

Just be careful with the positioning, looks like FilterArea does not automatically move with the container.

Little example here:

https://codepen.io/alexandrezara/pen/KKamxJW

[nishaant]

ok, it worked, for future people(including me) here is a simple fix:

const bloomFltr = new PIXI.filters.BloomFilter();
const heart = new PIXI.Sprite(heartTexture);
heart.filters = [bloomFltr,blurFltr]
bloomFltr.blur =120;
bloomFltr.padding =5;