Dark Tower

<html lang="fr">
<head>
<meta charset="utf-8">
<title>The Dark Tower</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow-x:hidden;
}
#svg1{
width:100%;
height:6000px;
}
#title{
font-family:sans-serif;
font-size:20px;
fill:white;
}
#div1{
font-family:sans-serif;
font-size:20px;
color:#fff;
position:fixed;
top:10;
right:10;
}

</style>
</head>
<body>

<svg id="svg1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="black" />
<stop offset="25%" stop-color="darkblue" />
<stop offset="75%" stop-color="royalblue" />
<stop offset="100%" stop-color="lightblue" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="green" />
<stop offset="2%" stop-color="saddlebrown" />
<stop offset="90%" stop-color="black"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
<pattern id="pat1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrI5TySUtyjBIxOuyk-yYEKtML3euVqIDQg16-0GsqPuYokT0YnktXJgVM1UF5NYyLIYM7-9zb-7_dqY-NOnX3mhBNpMTSP9yIJTp3fdi4fV0nlA7r84XjTCkNqj7-QY8TzMSoVcvg3A/s1600/stones.png" x="0" y="0" width="100" height="100"></image>
</pattern>
</defs>

<rect width="100%" height="50%" fill="url(#grad1)"/>
<rect y="50%" width="100%" height="50%" fill="url(#grad2)"/>
<text x="10" y="30" id="title">The Dark Tower</text>

<g id="gf" transform="translate(0 0)">
<rect x="0" y="2700" width="400" height="300" fill="url(#pat1)" stroke-width="2" stroke="black" rx="20" ry="20"/>
<rect x="20" y="2720" width="360" height="260" fill="black" rx="20" ry="20" opacity="0.9"/>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rK8cYKmZTZJLK-8r_2VPSxE6p1pkLYwQ_UKcI2wazcVleEvg5SEAvsN_UOxfdIzSV-GNOOyv3ZRz6SoMFeyDWMxHusrRiX_58UmeFy7NzwBYaQu4cUDP59tAkS1PjBan0N8jMKI_HQ/s1600/gob1.gif" width="200" height="200" x="100" y="2780" id="gob1"/>
</g>

<use  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gf" transform="translate(0 -300)" id="1f" opacity="0"/>
</svg>

<div id="div1"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var mx,my;
var i=0;
var gob1=document.getElementById("gob1");
var div1=document.getElementById("div1");
var gf=document.getElementById("gf");
gf.setAttribute("transform","translate("+((ww/2)-200)+" 0)");

function mouseClick(e){
mx=e.clientX;
my=e.clientY;
div1.innerHTML=mx+" "+my;
if(i==1){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzKBzDlW1BaLA5TdNtrmqcYbALbmxjamZ-pYT0RNQGtzftAFNFEdKRIPXmUSAO5ymCaw8AxH7p7i589uSJiompyIS15zNTXOx4YSiCNEJdiMQXxQSKv_OQZQsP1ScBEeHEJJZTCZBKg/s1600/gob3.gif");i++}
if(i==0){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9mNT3P4H5z5HPLKPSNfP288qwcwMVSoLT1BbRQWal6JIrl5p_IaRrkTf5vwfo3D0qX4_cgce4RiFZTRWjnlzfjX6P9-ogDG_MUoXPLJwAKa6zfjRPHjVdZcqyCrls3fnSTEtyVS-Ng/s1600/gob2.gif");i++}
}

gob1.onclick=mouseClick;
</script>
</body>
</html>

rotations

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Demo</title>

<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#svg1{
width:100%;
height:100%;
}
#div1{
position:absolute;
top:0;
left:0;
font-family:sans-serif;
font-size:8px;
}
</style>

<body>
<div id="div1"></div>
<svg id="svg1">
</svg>

<script>
var ww=Math.round(window.innerWidth);
var wh=Math.round(window.innerHeight);
var svg1=document.getElementById("svg1");
var div1=document.getElementById("div1");
var i;

ww=Math.round(window.innerWidth);
wh=Math.round(window.innerHeight);
div1.innerHTML="window size : "+ww+" x "+wh;

for(i=0;i<Math.round(ww/20);i++){
var c=document.createElementNS(svg1.namespaceURI,"circle");
c.setAttributeNS(null,"cx",Math.round(ww/2)+(i*10));
c.setAttributeNS(null,"cy",Math.round(wh/2));
c.setAttributeNS(null,"r",10);
c.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
c.setAttributeNS(null,"id","c"+i);

var a=document.createElementNS(svg1.namespaceURI,"animateTransform");
a.setAttributeNS(null,"attributeName","transform");
a.setAttributeNS(null,"attributeType","xml");
a.setAttributeNS(null,"type","rotate");
a.setAttributeNS(null,"values","0 "+Math.round(ww/2)+" "+Math.round(wh/2)+";360 "+Math.round(ww/2)+" "+Math.round(wh/2));
a.setAttributeNS(null,"dur",(100-i)+"s");
a.setAttributeNS(null,"repeatCount","indefinite");

svg1.appendChild(c);
c.appendChild(a);
}

</script>
</body>
</head>
</html>

Tryout

Demo

spinning squares

<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>rot.</title>

<style>

html,body{

height:100%;

margin:0;

}

body{

font-family:sans-serif;

overflow:hidden;

}

#div1{

font-size:6px;

position:absolute;

top:0;

left:0;

-moz-user-select:none;

user-select:none;

}

#svg1{

width:100%;

height:100%;

}

</style>

</head>

<body>

<svg id="svg1"></svg>

<div id="div1"></div>

<script>

var ww=window.innerWidth;

var wh=window.innerHeight;

var div1=document.getElementById("div1");

var svg1=document.getElementById("svg1");

var j=250;

var r0=document.createElementNS(svg1.namespaceURI,"rect");

r0.setAttributeNS(null,"x",0);

r0.setAttributeNS(null,"y",0);

r0.setAttributeNS(null,"width",ww);

r0.setAttributeNS(null,"height",wh);

r0.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));

r0.setAttributeNS(null,"id","fond");

svg1.appendChild(r0);

for(i=1;i<=100;i++){

var d1=Math.round(Math.random()*20);

var d2=Math.round(Math.random()*20);

var g1=document.createElementNS(svg1.namespaceURI,"g");

var r1=document.createElementNS(svg1.namespaceURI,"rect");

r1.setAttributeNS(null,"x",ww/2-(ww/i)/2);

r1.setAttributeNS(null,"y",wh/2-(ww/i)/2);

r1.setAttributeNS(null,"width",ww/i);

r1.setAttributeNS(null,"height",ww/i);

r1.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));

r1.setAttributeNS(null,"id","rect"+i);

var a1=document.createElementNS(svg1.namespaceURI,"animateTransform");

a1.setAttribute("attributeName","transform");

a1.setAttribute("attributeType","xml");

a1.setAttribute("type", "rotate");

a1.setAttribute("begin", "0s");

a1.setAttribute("values","0 "+ww/2+" "+wh/2+";360 "+ww/2+" "+wh/2);

a1.setAttribute("dur",d1);

a1.setAttribute("repeatCount","indefinite");

svg1.appendChild(g1);

g1.appendChild(r1);

g1.appendChild(a1);

div1.innerHTML+=i+" ";

}

</script>

</body>

</html>

Petits carrés bleus

4r4chn33

<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>game</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
font-family:sans-serif;
overflow:hidden;
}
#div1{
position:absolute;
bottom:0;
left:0;
-moz-user-select:none;
user-select:none;
}
#div2{
position:absolute;
top:0;
right:0;
}
#svg1{
width:100%;
height:100%;
}
</style>
</head>

<body>

<svg id="svg1">
<path d="m0 0L0 0" id="pat1" stroke="#000"/>
<path d="m0 0L0 0" id="pat2" stroke="#000"/>
<path d="m0 0L0 0" id="pat3" stroke="#000"/>
<path d="m0 0L0 0" id="pat4" stroke="#000"/>
<g id="g1"></g></svg>

<div id="div1"></div>
<div id="div2"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerWidth;
var div1=document.getElementById("div1");
var div1=document.getElementById("div1");
var svg1=document.getElementById("svg1");
var mx=0;
var my=0;
var path1;
var pat1=document.getElementById("pat1");
var pat2=document.getElementById("pat2");
var pat3=document.getElementById("pat3");
var pat4=document.getElementById("pat4");
var ncirc=0;
var col1="#000";

function mov(e){
mx=Math.round(e.clientX/10)*10;
my=Math.round(e.clientY/10)*10;
pat1.setAttribute("d","m0 0L"+mx+" "+my);
pat2.setAttribute("d","m"+ww+" 0L"+mx+" "+my);
pat3.setAttribute("d","m0 "+wh+"L"+mx+" "+my);
pat4.setAttribute("d","m"+ww+" "+wh+"L"+mx+" "+my);
}

function stats(){
div1.innerHTML="x: "+mx+"<br>y: "+my+"<br>color: "+col1+"<br>total: "+ncirc;
}

function cli(e){
col1="royalblue";

if(document.getElementById(mx+"_"+my)==null){
path1=document.createElementNS(svg1.namespaceURI,"path");
path1.setAttributeNS(null,"d","m0 0L"+mx+" "+my+"L"+mx+" "+my+" "+ww+" 0L"+ww+" 0 "+ww+" "+wh+"L"+mx+" "+my+"L0 "+wh);
path1.setAttributeNS(null,"stroke",col1);
path1.setAttributeNS(null,"fill","none");

path1.setAttributeNS(null,"id",mx+"_"+my);
g1.appendChild(path1);
ncirc++;}
else{
g1.removeChild(document.getElementById(mx+"_"+my));
nrect--}
}

setInterval(stats,1);
document.body.onmousemove=mov;
document.body.onmousedown=cli;
</script>
</body>

</html>