<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>sente</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
font-family:sans-serif;
font-size:12px;
}
#svg1{
width:100%;
height:100%;
}
#div1{
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<svg id="svg1">
</svg>
<div id="div1">
</div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var svg1=document.getElementById("svg1");
var div1=document.getElementById("div1");
var x0=ww/2;
var y0=wh/2;
var x1,y1;
var i=0;
var a=500;
var radius=50;
var angle=Math.round((Math.random()*Math.PI*2)*100)/100;
x1 = Math.round(x0+Math.cos(angle)*radius);
y1 = Math.round(y0+Math.sin(angle)*radius);
div1.innerHTML="length : "+a+"<br>angle : "+angle+"<br>x0 : "+x0+"<br>y0 : "+y0+"<br>x1 : "+x1+"<br>y1 : "+y1;
function Dopamine(){
var path1=document.createElementNS(svg1.namespaceURI,"path");
path1.setAttributeNS(null,"d","m"+x0+" "+y0+"L"+x1+" "+y1);
path1.setAttributeNS(null,"stroke","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
path1.setAttributeNS(null,"stroke-width","50px");
path1.setAttributeNS(null,"fill","none");
path1.setAttributeNS(null,"stroke-linecap","round");
svg1.appendChild(path1);
i++;
if(i==a){svg1.removeChild(svg1.firstChild);i=a-1;}
x0=x1;
y0=y1;
angle=Math.round((Math.random()*Math.PI*2)*100)/100;
x1=Math.round(x0+Math.cos(angle)*radius);
y1=Math.round(y0+Math.sin(angle)*radius);
if(x1<0){x1=x1+(radius*2);}
if(x1>ww){x1=x1-(radius*2);}
if(y1<0){y1=y1+(radius*2);}
if(y1>wh){y1=y1-(radius*2);}
div1.innerHTML="length : "+a+"<br>angle : "+angle+"<br>x0 : "+x0+"<br>y0 : "+y0+"<br>x1 : "+x1+"<br>y1 : "+y1;
};
setInterval(Dopamine,10);
</script>
</body>
</html>
