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;
    transform-origin: 50% 50%;
    border-radius:50%;
}

JavaScript

jQuery(function($){
    $("#btn").click(function() {
        
        var radius = 50;
        var x0 = 300;
        var y0 = 300;
        var segment = 50;
        var angle = 0,
            scale = 0.1;
        
        
        
        
        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);
            var newitem = $('<div>',{
                'class': 'drag',
                css:{
                    opacity: scale,
                    top:y,
                    left:x,
                    transform: 'scale('+ scale +')'
                }
            });
            $("#terrain").append(newitem);
            
            scale += 0.02;
            radius = radius + 5;
            
        }
        
        
        
                
                
    });
});