JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
  <canvas id="balls"></canvas>
</div>




<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

CSS

.section {
  position: relative; top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

JavaScript

window.addEventListener('load', () => {

  //---------------------------------------
  // Set up ball options
  //---------------------------------------

  const imgBalls = [
    'https://placehold.jp/ffffff/000000/200x200.png',
    'https://placehold.jp/ffffff/000000/180x180.png',
    'https://placehold.jp/ffffff/000000/140x140.png',
    'https://placehold.jp/ffffff/000000/120x120.png',
    'https://placehold.jp/ffffff/000000/80x80.png',
    'https://placehold.jp/ffffff/000000/62x62.png'
  ]

  let ballCount = imgBalls.length, // How many balls
    DAMPING = 0.4, // Damping
    GRAVITY = 0.01, // Gravity strength
    SPEED = 5, // Ball speed
    ballAdditionTime = 100, // How fast are balls added
    ballSrc = imgBalls, // Ball image source
    topOffset = 400, // Adjust this for initial ball spawn point
    ballDensity = 20, // How dense are the balls
    ball_sizes = [200, 180, 140, 120, 80, 62],
    ball_1_size = 200, // Ball 1 size
    ball_2_size = 180, // Ball 2 size
    ball_3_size = 140, // Ball 3 size
    ball_4_size = 120, // Ball 4 size
    ball_5_size = 80, // Ball 5 size
    ball_6_size = 62, // Ball 6 size
    canvasWidth = 1500, // Canvas width
    canvasHeight = 1000, // Canvas height
    stackBall = true, // Stack the balls (or false is overlap)
    ballsLoaded = 0,
    stopAnimation = false;


  //---------------------------------------
  // Canvas globals
  //---------------------------------------

  let canvas,
    ctx,
    TWO_PI = Math.PI * 2,
    balls = [],
    vel_x,
    vel_y;

  let rect = {
    x: 0,
    y: 0,
    w: canvasWidth,
    h: canvasHeight
  };

  //---------------------------------------
  // do the animation
  //---------------------------------------

  window.requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, ballAdditionTime);
    };

  //---------------------------------------
  // set up the ball
 ...