nothing: janvier 2019

samedi 26 janvier 2019

samedi 19 janvier 2019

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

samedi 12 janvier 2019

destination

<html>
<head>
<meta charset="UTF-8">
<style>
html,body{height:100%;margin:0;}
body{font-size:12px;font-family:consolas;overflow:hidden;background:#252525;color:#fff;}
div{position:absolute;top:0;left:0;z-index:-1;opacity:0.5;}
</style>
<title>Game</title>
</head>
<body>
<svg width="0" height="0" id="mysvg" onclick="fdest(event)">
<circle cx="0" cy="0" r="4" id="c1" fill="#fff"/>
</svg>
<div id="update">info</div>
<script>
var mysvg=document.getElementById("mysvg");
var c1=document.getElementById("c1");
var update=document.getElementById("update");
var sw=window.innerWidth;
var sh=window.innerHeight;
var cx=sw/2;
var cy=sh/2;
var dx=sw/2;
var dy=sh/2;

mysvg.setAttribute("width",sw);
mysvg.setAttribute("height",sh);
c1.setAttribute("cx",cx);
c1.setAttribute("cy",cy);
update.innerHTML="svg width:  "+sw+"px<br>svg height: "+sh+"px<br>circle cx:  "+cx+"px<br>circle cy:  "+cy+"px<br>dest. x:    "+dx+"px<br>dest. y:    "+dy+"px";

function fdest(){
dx=event.clientX;
dy=event.clientY;
update.innerHTML="svg width:  "+sw+"px<br>svg height: "+sh+"px<br>circle cx:  "+cx+"px<br>circle cy:  "+cy+"px<br>dest. x:    "+dx+"px<br>dest. y:    "+dy+"px";
}

function adv(){
if(cx<dx){cx=cx+1};if(cx>dx){cx=cx-1};
if(cy<dy){cy=cy+1};if(cy>dy){cy=cy-1};
c1.setAttribute("cx",cx);
c1.setAttribute("cy",cy);
update.innerHTML="svg width:  "+sw+"px<br>svg height: "+sh+"px<br>circle cx:  "+cx+"px<br>circle cy:  "+cy+"px<br>dest. x:    "+dx+"px<br>dest. y:    "+dy+"px";
}
setInterval(adv,1);

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

mercredi 9 janvier 2019

smileys rain

<html>
<head>
<meta charset="UTF-8">
<style>
html,body{height:100%;margin:0;}
body{overflow:hidden;}
svg{background:royalblue;}
</style>
</head>
<body>
<svg width="0" height="0" id="mysvg">
</svg>
<p id="demo"></p>
<script>
var mysvg=document.getElementById("mysvg");
var emoj=["😀","😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","🙃","😲","😖","😞","😟","😢","😭","😦","😧","😨","😩","😰","😱","😳","😵","😡","😠","😷","😇","😈","😺","😸","😹","😻","😼","😽","🙀","😿","😾"];

var sw=window.innerWidth;
var sh=window.innerHeight;
document.getElementById("mysvg").setAttribute("width",sw);
document.getElementById("mysvg").setAttribute("height",sh);

for(var a=0;a<500;a++){
var i=Math.round(Math.random()*64);
var myTextElement=document.createElementNS("http://www.w3.org/2000/svg","text");
var myText=document.createTextNode(emoj[i]);
var x=Math.round(Math.random()*sw)-20;
var y=Math.round(Math.random()*(sh+40))-20;
    myTextElement.setAttribute("x",x);
    myTextElement.setAttribute("y",y);
    myTextElement.setAttribute("font-family","Arial");
    myTextElement.setAttribute("font-size","100");
var d=Math.round(Math.random()*60)+30;

var choix=Math.round(Math.random());

var anim1=document.createElementNS(mysvg.namespaceURI,"animateMotion");
    if(choix==0){
    anim1.setAttribute("path","m0 -"+sh+"L0 "+(sh+40));
    }
    if(choix==1){
    anim1.setAttribute("path","m0 "+sh+"L0 -"+(sh+40));
    }
    anim1.setAttribute("begin","0s");
    anim1.setAttribute("dur",d+"s");
    anim1.setAttribute("repeatCount","indefinite");

    myTextElement.appendChild(myText);
    myTextElement.appendChild(anim1)
    mysvg.appendChild(myTextElement);

}

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

mardi 8 janvier 2019

<html>
<head>
<meta charset="UTF-8">
<style>
svg{
background:royalblue;
}
</style>
</head>
<body>
<svg width="1200" height="800" id="mysvg">
<text x="100" y="100">&#x1f60</text>
</svg>
<script>
function fsmile(){
var mysvg = document.getElementById("mysvg");
var decoded = encoded.replace(/&/g, '&');
for(var i=0;i<50;i++){
var a=Math.round(Math.random()*69)+128512;
var b=a.toString(16);
var emoji="\u0026#x"+b+";";
var myTextElement=document.createElementNS("http://www.w3.org/2000/svg","text");
var myText=document.createTextNode(emoji);
var x=Math.round(Math.random()*1200);
var y=Math.round(Math.random()*790)+10;
myTextElement.setAttribute("x",x);
myTextElement.setAttribute("y",y);
myTextElement.setAttribute("font-family","Arial");
myTextElement.appendChild(myText);
mysvg.appendChild(myTextElement);
}}
fsmile();
</script>
</body>
</html>

samedi 5 janvier 2019

randomemoji

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="demo"></p>
<script>
var i,a,hexS;
a=Math.round(Math.random()*154)+128513;
hexS=a.toString(16);
if(hexS.length%2){
hexS="0"+hexS;
}
document.getElementById("demo").innerHTML="&#x"+hexS+" "+hexS;
</script>
</body>
</html>

nothing