<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
html,body{height:100%;margin:0;}
body{font-family:arial,sans-serif;overflow:hidden;background:red;}
</style>
<title>Page</title>
</head>
<body>
<svg width="0" height="0" id="mysvg" onmousemove="mymove(event)">
<defs><mask id="m1">
<rect width="0" height="0" fill="white" id="r0"/>
<circle cx="0" cy="0" r="200" fill="black" id="c1"/>
</mask></defs>
<rect width="0" height="0" fill="green" id="r1"/>
<rect width="0" height="0" fill="red" id="r2" mask="url(#m1)"/>
</svg>
<script>
var sw=window.innerWidth;
var sh=window.innerHeight;
document.getElementById("mysvg").setAttribute("width",sw);
document.getElementById("mysvg").setAttribute("height",sh);
document.getElementById("r0").setAttribute("width",sw);
document.getElementById("r0").setAttribute("height",sh);
document.getElementById("r1").setAttribute("width",sw);
document.getElementById("r1").setAttribute("height",sh);
document.getElementById("r2").setAttribute("width",sw);
document.getElementById("r2").setAttribute("height",sh);
function mymove(){
var cx=event.clientX;
var cy=event.clientY;
var c1=document.getElementById("c1");
c1.setAttribute("cx",cx);
c1.setAttribute("cy",cy);
}
</script>
</body>
</html>
