JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/GoodBoyDigital/pixi.js/releases/download/v3.0.5/pixi.js"></script>
JavaScript
var renderer = PIXI.autoDetectRenderer(800,600, { antialias:true});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var maskedObjectConainer = new PIXI.Sprite();
stage.addChild(maskedObjectConainer);
var masksContainer = new PIXI.Sprite();
stage.addChild(masksContainer);
graphics = new PIXI.Graphics();
graphics.beginFill(0xffffff,1);
graphics.drawRect(0,0,200,200);
graphics.endFill();
maskedObjectConainer.addChild(graphics);
var graphics;
graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000,1);
for(var i = 0; i < 5; i++){
graphics.drawRect(i*30,0,25,25);
}
graphics.endFill();
masksContainer.addChild(graphics);
maskedObjectConainer.mask = graphics
animate();
function animate() {
renderer.render(stage);
requestAnimationFrame(animate);
}