JSFiddle - React, Tailwind, and code Playground

by Bouh

HTML

<script src="https://pixijs.download/v5.2.4/pixi.min.js"></script>
<script src="https://filters.pixijs.download/master/filters/filter-outline.js"></script>
<script src="https://filters.pixijs.download/master/filters/filter-kawase-blur.js"></script>
<script src="https://filters.pixijs.download/master/filters/filter-advanced-bloom.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

JavaScript

const app = new PIXI.Application({
	resizeTo: window
});
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from(PIXI.Texture.WHITE);
sprite.scale.set(10);
sprite.anchor.set(0.5);

const resize = () => {
	sprite.position.set(
  	app.view.width / 2,
    app.view.height / 2
  );
};
app.renderer.on('resize', resize);
resize();

const outline = new PIXI.filters.OutlineFilter(20, 0x0099cc);
outline.padding = 20; // OutlineFilter doesn't auto-pad
const bloom = new PIXI.filters.AdvancedBloomFilter();


bloom.padding = 40; // Si tu retire ou réduit ce padding c'est croppé


bloom.threshold= 0.37;
bloom.bloomScale= 1;
bloom.brightness= 1;
bloom.blur= 8;
bloom.quality= 4;

sprite.filters = [outline, bloom];

app.stage.addChild(sprite);