Biotoxsin,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
display: flex;
position: relative;
}
circle {
width: 35px;
height: 35px;
background-color: red;
border-radius: 50%;
position: absolute;
font: 900 1.3em / 4px "Alfa Slab One", sans-serif;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<script>
let limit = 20;
let k = 0;
let b = 1;
const html = Array.from({length : 300}, (v, n) => {
const circle = document.createElement("circle");
circle.textContent = k;
Object.assign(circle.style, {left : `${n * 15}px`, top : `${k * 30}px`});
k += b;
if(k == limit|| !k) b *= -1;
if(!k && b == 1) limit += 20;
return circle
});
document.body.append(...html)
</script>
</body>
</html>