<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
html,body{
margin:0;
height:100%;
}
p{
margin:0;
font-size:10px;
color:#555;
}
body{
background:#111;
font-family:arial,sans-serif;
overflow:hidden;
}
svg{
border-bottom:1px solid #555;
}
</style>
</head>
<body>
<svg width="1000" height="500" id="svg1">
<circle cx="500" cy="250" r="2" fill="#555" id="c1"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c2"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c3"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c4"/>
<path d="m500 250L500 250L500 250L500 250z" fill="none" stroke="#555" stroke-width="1" id="pa1"/>
</svg>
<p id="p1">text</p>
<script type="text/javascript">
var cx1=500;var cy1=250;var cx2=500;var cy2=250;var cx3=500;var cy3=250;var cx4=500;var cy4=250;
var dx1=Math.round(Math.random()*1000);
var dy1=Math.round(Math.random()*500);
var dx2=Math.round(Math.random()*1000);
var dy2=Math.round(Math.random()*500);
var dx3=Math.round(Math.random()*1000);
var dy3=Math.round(Math.random()*500);
var dx4=Math.round(Math.random()*1000);
var dy4=Math.round(Math.random()*500);
var c1=document.getElementById("c1");
var c2=document.getElementById("c2");
var c3=document.getElementById("c3");
var c4=document.getElementById("c4");
document.getElementById("p1").innerHTML=cx1+" "+cy1+" "+cx2+" "+cy2+" "+cx3+" "+cy3+" "+cx4+" "+cy4+" "+dx1+" "+dy1+" "+dx2+" "+dy2+" "+dx3+" "+dy3+" "+dx4+" "+dy4;
function calc1(){
if(cx1<dx1){cx1++};if(cx1>dx1){cx1--};if(cy1<dy1){cy1++};if(cy1>dy1){cy1--};
if(cx2<dx2){cx2++};if(cx2>dx2){cx2--};if(cy2<dy2){cy2++};if(cy2>dy2){cy2--};
if(cx3<dx3){cx3++};if(cx3>dx3){cx3--};if(cy3<dy3){cy3++};if(cy3>dy3){cy3--};
if(cx4<dx4){cx4++};if(cx4>dx4){cx4--};if(cy4<dy4){cy4++};if(cy4>dy4){cy4--};
if(cx1==dx1){dx1=Math.round(Math.random()*1000);};if(cy1==dy1){dy1=Math.round(Math.random()*500);};
if(cx2==dx2){dx2=Math.round(Math.random()*1000);};if(cy2==dy2){dy2=Math.round(Math.random()*500);};
if(cx3==dx3){dx3=Math.round(Math.random()*1000);};if(cy3==dy3){dy3=Math.round(Math.random()*500);};
if(cx4==dx4){dx4=Math.round(Math.random()*1000);};if(cy4==dy4){dy4=Math.round(Math.random()*500);};
c1.setAttribute("cx",cx1);c1.setAttribute("cy",cy1);
c2.setAttribute("cx",cx2);c2.setAttribute("cy",cy2);
c3.setAttribute("cx",cx3);c3.setAttribute("cy",cy3);
c4.setAttribute("cx",cx4);c4.setAttribute("cy",cy4);
document.getElementById("pa1").setAttribute("d","m"+cx1+" "+cy1+"L"+cx2+" "+cy2+"L"+cx3+" "+cy3+"L"+cx4+" "+cy4+"z");
document.getElementById("p1").innerHTML=cx1+" "+cy1+" "+cx2+" "+cy2+" "+cx3+" "+cy3+" "+cx4+" "+cy4+" "+dx1+" "+dy1+" "+dx2+" "+dy2+" "+dx3+" "+dy3+" "+dx4+" "+dy4;
}
setInterval(calc1,5);
</script>
</body>
</html>
