SO - distributing elements on a circle

http://stackoverflow.com/questions/8436187/circular-layout-of-html-elements

by pawelskiba30

HTML

<div>HELLO</div>
<div>WORLD</div>
<div>THESE</div>
<div>ARE</div>
<div>SOME</div>
<div>DIV</div>
<div>ELEMENTS</div>

CSS

.stage{
    width:400px;
    height:400px;
    margin:2em;
    float:left;
    position:relative;
    background:#ccc;
    overflow:hidden;
    font-weight:bold;
    text-align:center;
}

JavaScript

var elems = document.getElementsByTagName('div');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0, elem;

for (var i = 0; i < elems.length; i++) {
    elem = elems[i];
    x = 100 * Math.cos(angle) + 100;
    y = 100 * Math.sin(angle) + 100;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;
}