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>
<style>
body, html{
    margin: 0;
    background-color: black;

}
body{
  zoom: 0.36;
}
canvas{
  margin: auto;
  width: 1920px;
  display: block;
}
#controlPanel{
  margin: auto;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
button{
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #262626;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 4em;
}
button:hover{
  opacity: 0.5;
}
@media only screen and (min-width: 1800px) {
  body{
    zoom: 0.42;
  }
}</style>
<body>
    <div id="controlPanel">
        <button onclick="refresh()">refresh</button>
        <!---<button id="pause">pause/play</button>-->
        <button id="exportPNG">export as png</button>
        <div id="imageContainer"></div>
      </div>
</body>
</html>
<script type="text/javascript" src="sketch.js"></script>
<script>
  function refresh(){
    location.reload();
  }
</script>

JavaScript

//randoms
//colors
var rDivide = Math.random() /Math.floor(Math.random() * 100);
var bDivide = Math.random() /Math.floor(Math.random() * 100);
var gDivide = Math.random() /Math.floor(Math.random() * 100);

//radius
var radiusStart = Math.floor(Math.random() * 50);
var radiusRange = Math.floor(Math.random() * 300);
var radiusDivide = Math.random() /Math.floor(Math.random() * 100);

//width
var widthRange = Math.floor(Math.random() * 300) + 100;
var widthDivide = Math.random() /Math.floor(Math.random() * 100);

//height
var heightRange = Math.floor(Math.random() * 600) + 100;
var heightDivide = Math.random() /Math.floor(Math.random() * 100);
//switches
var tanSet = Math.floor(Math.random() * 2);
var tanSet2 = Math.floor(Math.random() * 2);
var yMovementSet = Math.floor(Math.random() * 2);
var strokeSet = Math.floor(Math.random() * 2);



//pixi

PIXI.settings.SPRITE_MAX_TEXTURES = 1;
//Create a Pixi Application
let app = new PIXI.Application({
  width: 1920,         // default: 800
  height: 1920,        // 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.maxFPS = 60;

app.ticker.add(() => {
  if (capture) {
    capture = false;
    const image = app.renderer.plugins.extract.image(graphics, "image/png", 1);
    document.body.appendChild(image);
  }

  graphics.clear();

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

    r = Math.abs(Math.sin(i * rDivide + angle));
    g = Math.abs(Math.sin(i * gDivide + angle));
    b = Math.abs(Math.sin(i * bDivide + angle));
    //color
    graphics.beginFill(PIXI.utils.rgb2hex([r, g, b]));


    graphics.drawCircle();
    //radius
   ...