title: arrange div elements in square using javascript and maths
body: <p>I n number of divs which are arranged in a circle using JavaScript. Right now I set the dimension of each div to <code>40×40</code>. Below is what I am able to achieve so far. This is how I find X &amp; Y of each div.</p>
  
  <pre class="lang-js prettyprint-override"><code>x = 100 * Math.cos(angle) + hCenter;
  y = 100 * Math.sin(angle) + vCenter;
  </code></pre>
  
  <p>where hCenter &amp; vCenter are center point of the screen</p>
  
  <p><img src="https://i.stack.imgur.com/YXBis.jpg" alt="Circles"></p>
  
  <ol>
  <li><p>When there are many circles they start overlapping each other. How
  can I find the height &amp; width of each div so that they fit in circle
  with a little space between each other.</p></li>
  <li><p>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.</p></li>
  </ol>