How to make a glow / color fade with PIXI.filters.GlowFilter?

[ZYandu]

I want to add a really big blue glow to the gray hold bar. This example looks pretty good but I want it to look less like a tight border and more like a stretched blue fade out. I tried to accomplish this by increasing the outer strength. 

let barContainer = new PIXI.Container();
barContainer.position.set(xPosition, 110);

let bar = new PIXI.Graphics();
bar.beginFill(0xffffff);
bar.tint = 0xbbbbbb;
bar.drawRect(0, 0, chordWidth, 10);

barContainer.addChild(bar);

let glowFilter = new GlowFilter(10, 2, 0, 0x00507c, 0.1);
glowFilter.padding = 100;

barContainer.children[0].filters = [glowFilter];

 

//increase outer strength to try and make the filter spread out farther
let glowFilter = new GlowFilter(10, 30, 0, 0x00507c, 0.1);

 

As cool of a border as this is, how can I make a glow filter that fades out? Is it possible with something as easy as GlowFilter or other filters?

Thank you for any help! ?

 

P.S. I also tried the approach of using a gradient image as suggested in this topic but it didn't work very well with my rectangles that heavily vary in width. 

 

[ivan.popelyshev]

I have solution for that thing - custom GlowFilter, but i dont want to publish it without extra preparations, because there are several filters i want to move to special plugin, filters that emulate Flash.

I'm afraid that my queue of "who to help and make simple hack in 15 minutes" is too big right now

Until then, I suggest to use make progress-bar sprite-basd and prerender everything you can in several frames in photoshop.

[ZYandu]

That's awesome Ivan, I'm excited you're working on custom filters!

I will try making the bar sprites in Photoshop or Adobe for now! Perhaps I will find a way to build an SVG version programmatically to have flexibility in their width. ?

Thank you! 

[ivan.popelyshev]

Use NineSlicePlane ?

[Ricky]

this.symbol.filters = [
                new PIXI.filters.GlowFilter(50, 2, 3, 0xffffff, 1)
                
            ];