JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.5/pixi.js"></script>
<body>
  
</body>

JavaScript

var app = new PIXI.Application(500, 500, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create filter
var fragSrc = `
varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform vec4 filterArea;

uniform vec2 dimensions;

uniform float time;
uniform vec2 center;
uniform vec4 color;
uniform float size;     

vec2 mapCoord( vec2 coord )
{
coord *= filterArea.xy;
coord += filterArea.zw;

return coord;
}

void main()
{
vec2 uv = vTextureCoord;
vec4 finalColor;
vec2 mappedCoord = mapCoord(uv) / dimensions;
vec2 newCenter = mapCoord(center) / dimensions;

float r = distance(mappedCoord, newCenter);
float value = smoothstep(time-size,time,r) - smoothstep(time+size, time, r);

finalColor += value * color;
finalColor.w = 1.0;

if (value < 1.0 && value > 0.0)
{
  gl_FragColor = mix(texture2D(uSampler, uv), finalColor, 1.0);
}
else
{
  gl_FragColor = texture2D(uSampler, uv);
}

}
`.split('\n').reduce( (c, a) => c + a.trim() + '\n' );

var uniforms = 
{ 
	dimensions: { type: 'v2', value: [320, 186] },
  time: { type: '1f', value: 0.1 },
  center: { type: 'vec2', value: [0.5, 0.5] },
  color: { type: 'vec4', value: [1.0, 0.0, 0.0, 1.0] },
  size: { type: '1f', value: 0.05},
};
filter = new PIXI.Filter( null, fragSrc, uniforms );
filter.apply = function(filterManager, input, output)
{
  this.uniforms.dimensions[0] = input.sourceFrame.width
  this.uniforms.dimensions[1] = input.sourceFrame.height

  // draw the filter...
  filterManager.applyFilter(this, input, output);
}

// load image
var g = new PIXI.Graphics();
g.beginFill(0x000000, 1.0);
g.drawRect(0, 0, 128, 128);
g.endFill();
var texture = g.generateCanvasTexture();
var sprite = new PIXI.Sprite(texture);
sprite.x = 128;
app.stage.addChild( sprite );

// apply filter
sprite.filters = [ filter ];