nothing

mercredi 27 février 2019

rotate

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf_8">
<title>Game</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
background:royalblue;
}
svg{
width:100%;
height:100%;
}
#display{
font-family:sans-serif;
font-size:10px;
color:#fff;
position:absolute;
top:0;
left:0;
z-index:-1;
}
</style>
<body>
<svg>
<image x="0" y="0" width="100" height="100" transform="rotate(0 0 0)" xlink:href="" id="i1"/>
</svg>
<div id="display"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var display=document.getElementById("display");
var mx,my;
document.body.onmousemove=function(e){
mx=e.clientX;
my=e.clientY;
var adeg=Math.round(Math.atan2(my-(wh/2),mx-(wh/2))*180/Math.PI);
display.innerHTML="mouse x: "+mx+"<br>mouse y: "+my+"<br>angle: "+adeg;
}
</script>
</body>
</head>

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>

mercredi 6 février 2019

hell...o

samedi 26 janvier 2019

Nar-turbulence

samedi 19 janvier 2019

many circles

<!DOCTYPE html>
<html>
<head>
<title>JSVG</title>
<style>
html,body{margin:0;padding:0;}
body{overflow:hidden;}
</style>
</head>
<body>
<svg width="0" height="0" id="svg"></svg>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var d=ww;
document.getElementById("svg").setAttribute("width",ww);
document.getElementById("svg").setAttribute("height",wh);
while (d>=1){
var svg=document.getElementsByTagName('svg')[0];
var newElement=document.createElementNS("http://www.w3.org/2000/svg","circle");
var c0='#'+Math.round(0xFFFFFF * Math.random()).toString(16);
newElement.setAttribute("cx",ww/2);
newElement.setAttribute("cy",wh/2);
newElement.setAttribute("r",d);
newElement.style.fill=c0;
svg.appendChild(newElement);
d=d-1;
}
</script>
</body>
</html>

jeudi 17 janvier 2019

proj

<head>
<style>
html,body{height:100%;margin:0;}
body{overflow:hidden;}
</style>
</head>
<body>
<svg width="160" height="90" viewbox="0 0 160 90" id="mysvg">
<rect width="160" height="90" fill="#999"/>
</svg>
<script>
var sw=window.innerWidth;
var sh=window.innerHeight;
document.getElementById("mysvg").setAttribute("width",sw);
document.getElementById("mysvg").setAttribute("height",sh);
</script>
</body>

mercredi 16 janvier 2019

mask

<!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>