spiral

HTML

<button id="btn"> generate </button>
<div id="terrain"></div>

CSS

.drag {
  position: absolute;
  border: 1px solid #89B;
  background: #BCE;
  cursor: move;
  top: 120px;
  height: 38px;
  width: 38px;
  text-align: center;
  line-height: 38px;
}

JavaScript

jQuery(function($){
  $("#btn").click(function() {
    var radius = 80,
        x0 = 300,
        y0 = 300,
        segment = 14,
        angle = 0,
        distance = 70,
        i, x, y;
        
    for(i = 0; i <= segment ; i++){
      angle += distance/radius;
           
      x = x0 + radius*Math.sin(angle);
      y = y0 - radius*Math.cos(angle);
            
      $("#terrain").append("<div class='drag' style='top:"+ y +"px;left:"+ x +"px;'>"+i+"</div>");
      radius += 5;
      distance -= 1.5;
    }
  }).click();
});