JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.0/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
CSS
body {
overflow: hidden;
margin: 0;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var loader, bgTexture, graphics, secondRenderer, radians, mask;
var position = {x: 0, y: 0};
var app = new PIXI.Application(window.innerWidth, window.innerHeight, {backgroundColor : 0xff0000});
document.body.appendChild(app.view);
var setup = function(loader, resources) {
secondRenderer = new PIXI.WebGLRenderer(window.innerWidth, app.screen.height, {
antialias: false,
transparent: false
});
secondRenderer.backgroundColor = 0xffffff;
// First circle
var circle1 = new PIXI.Graphics();
circle1.beginFill(0x000000);
circle1.drawCircle(0, 0, 250);
circle1.endFill();
circle1.x = -150;
circle1.y = -150;
circle1.alpha = 0.4;
var blurFilter2 = new PIXI.filters.BlurFilter();
blurFilter2.blur = 20;
circle1.filters = [blurFilter2];
// Second circle
var circle2 = new PIXI.Graphics();
circle2.beginFill(0x000000);
circle2.drawEllipse(0, 0, 150, 250);
circle2.endFill();
circle2.alpha = 0.35;
var blurFilter1 = new PIXI.filters.BlurFilter();
blurFilter1.blur = 20;
circle2.filters = [blurFilter1];
// Third circle
mask = new PIXI.Graphics();
mask.beginFill(0x000000);
mask.drawCircle(0, 50, 150);
mask.endFill();
mask.x = app.screen.width / 2;
mask.y = window.innerHeight / 2;
mask.alpha = 0.4;
var blurFilter2 = new PIXI.filters.BlurFilter();
blurFilter2.blur = 20;
mask.filters = [blurFilter2];
// Add all graphics to stage
var stage = new PIXI.Container();
mask.addChild(circle1);
mask.addChild(circle2);
stage.addChild(mask);
// Add picture to the stage
var bg = new PIXI.Sprite(loader.resources[bgTexture].texture);
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.x = app.screen.width / 2;
bg.y = app.screen.height / 2;
graphics = new PIXI.Graphics();
graphics.beginFill(0x000000);
graphics.drawRect(0, 0, app.screen.width, app.screen.height);
graphics.endFill();
graphics.alpha =...