# arrange div elements in circle and square

I n number of divs which are arranged in a circle using javascript. Right now i set the dimension of each div to 40*40. Below is what i am able to achieve so far. This is how i find X & Y of each div.

x = 100 * Math.cos(angle) + hCenter;
y = 100 * Math.sin(angle) + vCenter;


where hCenter & vCenter are center point of the screen

1. When there are many circles they start overlapping each other. How can i find the height & width of each div so that they fit in circle with a little space between each other.

2. How can i arrange the same circles in the square. Means animate from circle to square. How to find new X,Y position of each div.

• Suppose $n$ circles are used. Then the diameter of each would be the length of a side of a regular $n$-gon with diameter $100$. To find this length, simple use the cosine rule. – Yiyuan Lee May 18 '14 at 10:40
• i am seriously very bad at scientific maths – Ronak Patel May 19 '14 at 5:38