JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

</div>

CSS

#main table td {
  width: 18px;
  height: 18px;
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 12px;
}

.used {
  background-color: lightGreen;
}

JavaScript

const radius = 10; // "radius" of table
const color = 150; // number of plots
const delay = 200; // millisecond between each plot

const createTable = () => {
	const table = document.createElement('table');
  const tbody = document.createElement('tbody');
  for (let r = 0; r < radius * 2 + 1; r++) {
  	const row = document.createElement('tr');
    for (let c = 0; c < radius * 2 + 1; c++) {
    	const cell = document.createElement('td');
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
  table.appendChild(tbody);
  
  return table;
};

const table = createTable();
document.getElementById('main').appendChild(table);

const g = (n) => n % 2 === 1 ? Math.ceil(n / 2) : -Math.ceil(n / 2);
//const g = n => n;

const f = (z) => {  
  if (z <= 0) return [0, 0];
  
  const w = Math.floor(
    (Math.sqrt(8 * z + 1) - 1) / 2
  );
  const t = ((w * w) + w) / 2;
  const y = z - t;
  const x = w - y;
  return [ g(x), g(y) ];
};

let i = 0;
const next = () => {
	if (i < color) {
  	const [ x ,y ] = f(i);
    const cell = table.rows[x + radius].cells[y + radius];
    cell.classList.add('used');
    cell.innerText = i;
    window.setTimeout(next, delay);
    i++;
  }
};


next();