<!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;
}
table,td{
border:1px solid #555;
}
table{
width:200px;
border-collapse: collapse;
}
div{
position:absolute;
top:0;
left:0;
z-index:1;
}
</style>
</head>
<body>
<svg width="1000" height="500" id="svg1">
<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
</filter>
<mask id="ma1">
<path d="m500 250L500 250L500 250L500 250L500 250z" fill="#ffffff" stroke="#555" stroke-width="1" id="pam" filter="url(#blur)"/>
</mask>
</defs>
<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"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c5"/>
<image xlink:href="https://coogee.io/wp-content/uploads/2016/10/C%C3%A9line-Soulier_LOW-1.jpg" width="1000" height="500" opacity="0.01"/>
<image xlink:href="https://coogee.io/wp-content/uploads/2016/10/C%C3%A9line-Soulier_LOW-1.jpg" width="1000" height="500" style="mask:url(#ma1)"/>
<path d="m500 250L500 250L500 250L500 250L500 250z" fill="none" stroke="#555" stroke-width="1" id="pa1"/>
</svg>
<div><p id="p1">text</p></div>
<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 cx5=500;var cy5=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 dx5=Math.round(Math.random()*1000);var dy5=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");
var c5=document.getElementById("c5");
document.getElementById("p1").innerHTML="<table><tr><td>circle</td><td>cx</td><td>cy</td><td>dx</td><td>dy</td></tr><tr><td>1</td><td>"+cx1+"</td><td>"+cy1+"</td><td>"+dx1+"</td><td>"+dy1+"</td></tr><tr><td>2</td><td>"+cx2+"</td><td>"+cy2+"</td><td>"+dx2+"</td><td>"+dy2+"</td></tr><tr><td>3</td><td>"+cx3+"</td><td>"+cy3+"</td><td>"+dx3+"</td><td>"+dy3+"</td></tr><tr><td>4</td><td>"+cx4+"</td><td>"+cy4+"</td><td>"+dx4+"</td><td>"+dy4+"</td></tr><tr><td>5</td><td>"+cx5+"</td><td>"+cy5+"</td><td>"+dx5+"</td><td>"+dy5+"</td></tr></table>";
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(cx5<dx5){cx5++};if(cx5>dx5){cx5--};if(cy5<dy5){cy5++};if(cy5>dy5){cy5--};
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);};
if(cx5==dx5){dx5=Math.round(Math.random()*1000);};if(cy5==dy5){dy5=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);
c5.setAttribute("cx",cx5);c5.setAttribute("cy",cy5);
document.getElementById("pa1").setAttribute("d","m"+cx1+" "+cy1+"L"+cx2+" "+cy2+"L"+cx3+" "+cy3+"L"+cx4+" "+cy4+"L"+cx5+" "+cy5+"z");
document.getElementById("pam").setAttribute("d","m"+cx1+" "+cy1+"L"+cx2+" "+cy2+"L"+cx3+" "+cy3+"L"+cx4+" "+cy4+"L"+cx5+" "+cy5+"z");
document.getElementById("p1").innerHTML="<table><tr><td>circle</td><td>cx</td><td>cy</td><td>dx</td><td>dy</td></tr><tr><td>1</td><td>"+cx1+"</td><td>"+cy1+"</td><td>"+dx1+"</td><td>"+dy1+"</td></tr><tr><td>2</td><td>"+cx2+"</td><td>"+cy2+"</td><td>"+dx2+"</td><td>"+dy2+"</td></tr><tr><td>3</td><td>"+cx3+"</td><td>"+cy3+"</td><td>"+dx3+"</td><td>"+dy3+"</td></tr><tr><td>4</td><td>"+cx4+"</td><td>"+cy4+"</td><td>"+dx4+"</td><td>"+dy4+"</td></tr><tr><td>5</td><td>"+cx5+"</td><td>"+cy5+"</td><td>"+dx5+"</td><td>"+dy5+"</td></tr></table>";
}
setInterval(calc1,50);
</script>
</body>
