How to create CSS/JavaScript circles grid

Question

I need to do something like this:

This may look quite easy, but there are some requirements: - the width of the containing div should depend on the text length (is it possible at all in CSS?) - all circles should be positioned randomly - this is the most diffucult part for me.

As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?

I'm just looking for a suggestion how to solve my two issues.

Answer 1

Circles that scale based on size of content.

• This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.

• Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.

• Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:

---

The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.

Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.

To acheive the same area with an equal width * height you can do something like:

√ 4000 = 63.2455532 Thus: 63.2455532 x 63.2455532 = 4000

Random placement of DIVs, and avoid collisons between DIVs.

• After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.