Divs on circular points.

by Andy Kuds

HTML

<div class="container">
</div>

CSS

.container {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #333;
  position: relative;
  margin: 0 auto;
  margin-top: 100px;
}
.point {
  position: absolute;
  background: #333;
  height: 10px;
  width: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  transform-origin: center;
}
.ht {
  height: 100px;
  position:absolute;
  width: 5px;
  bottom:0;
  background: #fff;
  box-shadow: 0px 0px 5px 2px #aaa;
  border-radius: 20px;
}
body {
  background: #3D4A61;
}

JavaScript

var i = 0, x = 200, y = 100, t = false;
while(i<=360) {
	var r = (Math.PI / 180) * i;
  var ax =  100, ay = 100;
	var cx = ((x-ax)*Math.cos(r)) - ((y-ay)*Math.sin(r));
  var cy = ((y-ay)*Math.cos(r)) + ((x-ax)*Math.sin(r));
  var pt = $('<div>');
  var ht = $('<div>').attr('class', 'ht');
  pt.attr('class', 'point');
  pt.append(ht);
  var angle = i + 90;
  pt.css({
  	left: (cx+ax) + 'px',
    top: (cy+ay) + 'px',
    transform: 'rotate(' + angle +'deg)'
  });
  $('.container').append(pt)
	i+=5;
}