<html lang="fr">
<head>
<title>Eyes</title>
<style>
html,body{
height:100%;
margin:0;
}
#left_eye{
transition:1s;
}
</style>
</head>
<body>
<svg width="100%" h"ight="100%" viewBox="0 0 16 9">
<circle cx="4.9" cy="4" r="1.4" fill="#ce9e90" opacity="0.25"/>
<circle cx="10.9" cy="4" r="1.4" fill="#ce9e90" opacity="0.25"/>
<g transform="translate(4.9,4)" id="left_eye">
<circle cx="-0.2" cy="-0.2" r="0.4" fill="#000" opacity="1"/>
</g>
<circle cx="10.9" cy="4" r="0.4" fill="#000" opacity="1" id="right_eye"/>
<image xlink:href="mask1.png" width="16" height="9" opacity="0.5"/>
</svg>
<script>
var left_eye=document.getElementById("left_eye");
var ww=window.innerWidth;
var wh=window.innerHeight;
document.body.addEventListener("mousemove",function(e){
left_eye.setAttribute("transform","translate("+e.clientX*16/ww+","+e.clientY*9/wh+")");
});
</script>
</body>
</html>
