You can do this fairly efficiently in JavaScript, by creating 10,000 divs with these styles:
.circle {
box-sizing: border-box; //include border in total width
width: 0.8%; //width + margin === 1%,
margin: 0.1%; //... so 100 circles will fill up their container's width
border: 1px solid #aaa; //light gray border
border-radius: 50%; //create a circle
float: left; //put divs next to each other
}
Here's the HTML:
<div id="circles"></div>
Here's the code to create 100,000 circles:
function makeCircles() {
var x, y,
circle,
div = document.querySelector('#circles');
for(x = 1 ; x <= 100 ; x++) {
for(y = 1 ; y <= 100 ; y++) {
circle= document.createElement('div');
circle.className = 'circle';
div.appendChild(circle);
}
}
} //makeCircles
height should be equal to width in pixels, so we can't use a percentage for it. It's inefficient to change the height of each circle individually, but we can add a style to the class using JavaScript.
First, we need to get the circle class rules:
var styleSheets = document.styleSheets,
circle,
i, j;
for(i = 0 ; i < styleSheets.length ; i++) {
rules= styleSheets[i].rules ||
styleSheets[i].cssRules;
for(j = 0 ; j < rules.length ; j++) {
if(rules[j].selectorText==='.circle') {
circle= rules[j];
break;
}
}
}
Now we can make the height equal to the width when resizing the window:
window.onresize= function() {
var div = document.querySelector('#circles');
circle.style.height= div.childNodes[0].offsetWidth+'px';
}
Complete fiddle at http://jsfiddle.net/53rf1kez/
Tested in Chrome, IE11, Firefox, and Opera.
Update
Here's an alternative script, which adds a break at the end of each y loop, and changes the container's line height in onsize. It also adds a timer, so that onsize isn't called continuously during resizing:
http://jsfiddle.net/hupw8mfg/
It may be slightly more efficient, because the browser doesn't have to determine where to wrap.
