body {margin: 0;overflow: hidden;}
var app;
initPixi = () => {
app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
document.body.appendChild(app.view);
var image = new PIXI.Sprite.from("https://i.ibb.co/q5CygxH/Red-Sea-Star-wallpaper-2.jpg");
image.width = window.innerWidth;
image.height = window.innerHeight;
app.stage.addChild(image);
displacementSprite = new PIXI.Sprite.from("https://i.ibb.co/qRDwrWx/cloud.jpg");
displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
app.stage.addChild(displacementSprite);
app.stage.filters = [displacementFilter];
animate();
}
animate = () => {
displacementSprite.x += 8;
displacementSprite.y += 3;
requestAnimationFrame(animate);
}
initPixi();
This Pen doesn't use any external CSS resources.