JSFiddle - React, Tailwind, and code Playground

JavaScript

var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true });
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

stage.interactive = true;

var bg = PIXI.Sprite.fromImage('_assets/BGrotate.jpg');

bg.anchor.x = 0.5;
bg.anchor.y = 0.5;

bg.position.x = renderer.width / 2;
bg.position.y = renderer.height / 2;

stage.addChild(bg);

var container = new PIXI.Container();
container.position.x = renderer.width / 2;
container.position.y = renderer.height / 2;

// add a bunch of sprites

var bgFront = PIXI.Sprite.fromImage('_assets/SceneRotate.jpg');
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;

container.addChild(bgFront);

var light2 = PIXI.Sprite.fromImage('_assets/LightRotate2.png');
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);

var light1 = PIXI.Sprite.fromImage('_assets/LightRotate1.png');
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);

var panda =  PIXI.Sprite.fromImage('_assets/panda.png');
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;

container.addChild(panda);

stage.addChild(container);

// let's create a shape
var thing = new PIXI.Graphics();
stage.addChild(thing);
thing.position.x = renderer.width / 2;
thing.position.y = renderer.height / 2;
thing.lineStyle(0);


container.mask = thing;

var count = 0;

stage.on('click', onClick);
stage.on('tap', onClick);

function onClick()
{
    if(!container.mask)
    {
        container.mask = thing;
    }
    else
    {
        container.mask = null;
    }
}

count += 0.1;

thing.lineStyle(20, 0x33FF00);
thing.moveTo(30,30);
thing.lineTo(600, 300);

animate();

function animate()
{
    panda.scale.x = 1 + Math.sin(count) * 0.04;
    panda.scale.y = 1 + Math.cos(count) * 0.04;

    renderer.render(stage);
    requestAnimationFrame(animate);
}