spiral

HTML

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

CSS

.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
}

JavaScript

jQuery(function($){
    $("#btn").click(function() {
        var radius = 50;
        var x0 = 300;
        var y0 = 300;
        var segment = 50;
        var angle = 0;
        var size; 
        
        for (var i=0; i<=segment; i++){
          angle = angle + (Math.PI * 2) / 30;
            
          var x=x0+radius*Math.sin(angle);
          var y=y0+radius*Math.cos(angle);
          size = radius/7;
          $("#terrain").append("<div class='drag' style='top:"+ y +"px;left:"+ x +"px;width:"+size+"px;height:"+size+"px;'></div>")
          radius += 5;
        }
    });
    
    $('#btn').click();
});