jeudi 14 février 2019

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Paths</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
background:royalblue;
}
</style>
</head>
<body>
<svg width="0" height="0" id="mysvg">
<path d="m0 0L0 0" stroke="white" stroke-width="1" fill="none" id="path1"/>
<path d="m0 0L0 0" stroke="white" stroke-width="1" fill="none" id="path2"/>
</svg>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var mysvg=document.getElementById("mysvg");
var path1=document.getElementById("path1");

function fresize(){
ww=window.innerWidth;
wh=window.innerHeight;
mysvg.setAttribute("width",ww);
mysvg.setAttribute("height",wh);
path1.setAttribute("d","m0 0L"+ww+" "+wh+"");
path2.setAttribute("d","m"+ww+" 0L0 "+wh+"");
}

function fpath(){
ww=window.innerWidth;
wh=window.innerHeight;
for(var i=0;i<=360;i=i+0.5){
var path=document.createElementNS(mysvg.namespaceURI,"path");
path.setAttributeNS(null,"stroke","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
path.setAttributeNS(null,"stroke-width","4");
path.setAttributeNS(null,"fill","none");
path.setAttributeNS(null,"d","m0 "+wh/2+"L"+ww+" "+wh/2+"");
path.setAttributeNS(null,"transform","rotate("+i+" "+ww/2+" "+wh/2+")");
mysvg.appendChild(path);
}}

fresize();
fpath();
window.onresize=fresize;
</script>
</body>
</html>
By -