JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pixi - wallpaper</title>
</head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.js"></script>
<body>
</body>
</html>

JavaScript

PIXI.settings.SPRITE_MAX_TEXTURES = 1;
//Create a Pixi Application
let app = new PIXI.Application({
  width: 800,         // default: 800
  height: 2000,        // default: 600
  antialias: false,    // default: false
  transparent: false, // default: false
  resolution: 1       // default: 1
});

app.renderer.backgroundColor = 0x000000;
var stage = new PIXI.Container();
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();
// Circle
var angle = 0;
var r = 0;
var g = 0;
var b = 0;



app.ticker.add(() => {

  graphics.clear();

  for (let i = 0; i < 1000; i++) {

    r = Math.sin(i * 0.09 + angle);
    g = Math.sin(i * 0.012 + angle);
    b = Math.sin(i * 0.013 + angle);


    graphics.lineStyle(0); // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
    graphics.beginFill(PIXI.utils.rgb2hex([r, g, b]));
    graphics.drawCircle(400 + 200 * Math.sin(i * 0.03 + angle), 50 + i, 100 + 50 * Math.sin(i * 0.02 + angle));
    graphics.endFill();

  }
  graphics.geometry.updateBatches();
// try commenting that to see Uint16 overflow
graphics.geometry._indexBuffer.update(new Uint32Array(graphics.geometry.indices));

  app.stage.addChild(graphics);



  angle += 0.1;
});