JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
  border: 1px solid #333;
}

JavaScript

var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d');

var balls = [];
var ballsLength = 15;

var Ball = function() {
  this.x = 0;
  this.y = 0;
  this.radius = 10;
};

Ball.prototype.draw = function(x, y) {
  this.x = x;
  this.y = y;
  ctx.fillStyle = '#333';
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.closePath();
};

init();

function init() {
  for (var i = 0; i < ballsLength; i++) {
    balls.push(new Ball());
  }
  render();
}

function render() {
  var NUM_ROWS = 5;
  for (var i = 1; i <= NUM_ROWS; i++) {
    for (var j = 0; j < i; j++) {
      balls[i].draw(j * balls[0].radius * 2 + 150 - i * balls[0].radius, -(i * balls[0].radius * 2 * Math.sin(Math.PI / 3)) + 150);
    }
  }

  //window.requestAnimationFrame(render);
}