krouzek:generovani

x = 100
y = 100
otoceni = 0
delka = 1
 
for(var i=0;i<50;i++){
  if(otoceni==0){x+=delka}
  //TODO: dopln ostatni smery
 
  otoceni=(otoceni+1)%4
  delka++
  console.log(x,y)
}

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
	<style>
		.platno {
			position: relative;
		}
		.bod {
			position: absolute;
			background-color:black;
			width:2px;
			height:2px;
		}
	</style>
</head>
 
<body>
 <div class='platno' id="platno"></div>
     <script>
		x = 100
		y = 100
		otoceni = 0
		delka = 1
 
		for(var i=0;i<50;i++){
			if(otoceni==0){x+=delka}
			//TODO: dopln ostatni smery
 
			otoceni=(otoceni+1)%4
			delka++
			var bod = document.createElement("div")
			bod.className = "bod"
			document.getElementById("platno").appendChild(bod);
			bod.style.left=x+"px"
			bod.style.top=y+"px"
			console.log(x,y)
		}
     </script>
</body>
</html>