<!doctype html>
<html lang="fr">
<head>
<title>Demo</title>
<meta charset="utf-8">
<style>
html,body{
height:100%;
margin:0px;
}
body{
background:#000;
overflow:hidden;
}
#svg1{
width:200%;
height:100%;
transform:translateX(-940px) perspective(400px) rotateX(45deg);
}
#txt{
position:absolute;
top:0px;
left:0px;
font-family:sans-serif;
font-size:10px;
-moz-user-select:none;
user-select:none;
}
</style>
</head>
<body>
<div id="txt"></div>
<svg id="svg1">
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="25%" stop-color="#000" stop-opacity="1"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</linearGradient>
<pattern id="p1" x="0" y="0" width="100px" height="100px" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="100px" height="100px" xlink:href="https://opengameart.org/sites/default/files/styles/thumbnail/public/stone2.jpg" id="i1"/>
</pattern>
</defs>
<rect x="0" y="0" width="0" height="0" fill="url(#p1)" id="r1"/>
<animateMotion begin="0s" dur="1s" repeatCount="indefinite" values="0 0;0 100" xlink:href="#r1"/>
<rect x="0" y="0" width="0" height="0" fill="url(#g1)" id="r2"/>
</svg>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var txt=document.getElementById("txt");
var svg1=document.getElementById("svg1");
var r1=document.getElementById("r1");
var r2=document.getElementById("r2");
r1.setAttribute("width",2*ww);
r1.setAttribute("height",wh*2);
r1.setAttribute("y",-wh);
r2.setAttribute("width",ww*2);
r2.setAttribute("height",wh);
txt.innerHTML="window width: "+ww+"<br>window height: "+wh;
</script>
</body>
</html>
