nothing: 2018

samedi 22 décembre 2018

vendredi 21 décembre 2018

<!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;}
svg{background:royalblue;}
</style>
<title>Page</title>
</head>
<body>
<svg width="0" height="0" id="mysvg">
</svg>
<script>
var sw=window.innerWidth;
var sh=window.innerHeight;
document.getElementById("mysvg").setAttribute("width",sw);
document.getElementById("mysvg").setAttribute("height",sh);
</script>
</body>
</html>

mercredi 19 décembre 2018

<!doctype html>
<html>
<head>
<style>
html,body{margin:0;height:100%;}
body{font-family:consolas,sans-serif;overflow:hidden;}
p{margin:0;}
div{position:absolute;top:0;left:0;}
svg{background:#bbb;}
</style>
</head>

<body>

<svg width="0" height="0" id="svg1">
<circle cx="0" cy="0" r="10" id="c1" fill="#444"/>
<rect x="0" y="0" width="0" height="100" id="r1" fill="#444"/>
</svg>

<div><p id="res1"</p><p id="res2"></p></div>

<script>

var w=window.innerWidth;
var h=window.innerHeight;
var cx=w/2;
var cy=h/2;
var r1h=100;
var dx=Math.round(Math.random()*w);
var dy=Math.round(Math.random()*h);

document.getElementById("svg1").setAttribute("width",w);
document.getElementById("svg1").setAttribute("height",h);
document.getElementById("c1").setAttribute("cx",cx);
document.getElementById("c1").setAttribute("cy",cy);
document.getElementById("r1").setAttribute("y",h-100);
document.getElementById("r1").setAttribute("width",w);

function gravity(){
if(cy<h-110){cy++};
document.getElementById("c1").setAttribute("cy",cy);
}
setInterval(gravity,5);

function up(){
if(cy>10){
setTimeout(document.getElementById("c1").setAttribute("cy",cy=cy-50),1);
}}
function left(){
if(cx>10){
document.getElementById("c1").setAttribute("cx",cx=cx-5);
}}
function right(){
if(cx<w-10){
document.getElementById("c1").setAttribute("cx",cx=cx+5);
}}
document.addEventListener('keydown',(event)=>{
const keyName=event.key;if(keyName=="ArrowUp"){up();}
if(keyName=="ArrowLeft"){left();}
if(keyName=="ArrowRight"){right();}
});

</script>

</body>
</html>

vendredi 14 décembre 2018

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
html,body{
margin:0;
height:100%;
}
p{
margin:0;
font-size:10px;
color:#555;
}
body{
background:#111;
font-family:arial,sans-serif;
overflow:hidden;
}
table,td{
border:1px solid #555;
}
table{
width:200px;
border-collapse: collapse;
}
div{
position:absolute;
top:0;
left:0;
z-index:1;
}
</style>
</head>
<body>

<svg width="1000" height="500" id="svg1">
<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
</filter>
<mask id="ma1">
<path d="m500 250L500 250L500 250L500 250L500 250z" fill="#ffffff" stroke="#555" stroke-width="1" id="pam" filter="url(#blur)"/>
</mask>
</defs>
<circle cx="500" cy="250" r="2" fill="#555" id="c1"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c2"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c3"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c4"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c5"/>
<image xlink:href="https://coogee.io/wp-content/uploads/2016/10/C%C3%A9line-Soulier_LOW-1.jpg" width="1000" height="500" opacity="0.01"/>
<image xlink:href="https://coogee.io/wp-content/uploads/2016/10/C%C3%A9line-Soulier_LOW-1.jpg" width="1000" height="500" style="mask:url(#ma1)"/>
<path d="m500 250L500 250L500 250L500 250L500 250z" fill="none" stroke="#555" stroke-width="1" id="pa1"/>
</svg>

<div><p id="p1">text</p></div>

<script type="text/javascript">
var cx1=500;var cy1=250;var cx2=500;var cy2=250;var cx3=500;var cy3=250;var cx4=500;var cy4=250;var cx5=500;var cy5=250;
var dx1=Math.round(Math.random()*1000);var dy1=Math.round(Math.random()*500);
var dx2=Math.round(Math.random()*1000);var dy2=Math.round(Math.random()*500);
var dx3=Math.round(Math.random()*1000);var dy3=Math.round(Math.random()*500);
var dx4=Math.round(Math.random()*1000);var dy4=Math.round(Math.random()*500);
var dx5=Math.round(Math.random()*1000);var dy5=Math.round(Math.random()*500);
var c1=document.getElementById("c1");
var c2=document.getElementById("c2");
var c3=document.getElementById("c3");
var c4=document.getElementById("c4");
var c5=document.getElementById("c5");
document.getElementById("p1").innerHTML="<table><tr><td>circle</td><td>cx</td><td>cy</td><td>dx</td><td>dy</td></tr><tr><td>1</td><td>"+cx1+"</td><td>"+cy1+"</td><td>"+dx1+"</td><td>"+dy1+"</td></tr><tr><td>2</td><td>"+cx2+"</td><td>"+cy2+"</td><td>"+dx2+"</td><td>"+dy2+"</td></tr><tr><td>3</td><td>"+cx3+"</td><td>"+cy3+"</td><td>"+dx3+"</td><td>"+dy3+"</td></tr><tr><td>4</td><td>"+cx4+"</td><td>"+cy4+"</td><td>"+dx4+"</td><td>"+dy4+"</td></tr><tr><td>5</td><td>"+cx5+"</td><td>"+cy5+"</td><td>"+dx5+"</td><td>"+dy5+"</td></tr></table>";

function calc1(){
if(cx1<dx1){cx1++};if(cx1>dx1){cx1--};if(cy1<dy1){cy1++};if(cy1>dy1){cy1--};
if(cx2<dx2){cx2++};if(cx2>dx2){cx2--};if(cy2<dy2){cy2++};if(cy2>dy2){cy2--};
if(cx3<dx3){cx3++};if(cx3>dx3){cx3--};if(cy3<dy3){cy3++};if(cy3>dy3){cy3--};
if(cx4<dx4){cx4++};if(cx4>dx4){cx4--};if(cy4<dy4){cy4++};if(cy4>dy4){cy4--};
if(cx5<dx5){cx5++};if(cx5>dx5){cx5--};if(cy5<dy5){cy5++};if(cy5>dy5){cy5--};
if(cx1==dx1){dx1=Math.round(Math.random()*1000);};if(cy1==dy1){dy1=Math.round(Math.random()*500);};
if(cx2==dx2){dx2=Math.round(Math.random()*1000);};if(cy2==dy2){dy2=Math.round(Math.random()*500);};
if(cx3==dx3){dx3=Math.round(Math.random()*1000);};if(cy3==dy3){dy3=Math.round(Math.random()*500);};
if(cx4==dx4){dx4=Math.round(Math.random()*1000);};if(cy4==dy4){dy4=Math.round(Math.random()*500);};
if(cx5==dx5){dx5=Math.round(Math.random()*1000);};if(cy5==dy5){dy5=Math.round(Math.random()*500);};
c1.setAttribute("cx",cx1);c1.setAttribute("cy",cy1);
c2.setAttribute("cx",cx2);c2.setAttribute("cy",cy2);
c3.setAttribute("cx",cx3);c3.setAttribute("cy",cy3);
c4.setAttribute("cx",cx4);c4.setAttribute("cy",cy4);
c5.setAttribute("cx",cx5);c5.setAttribute("cy",cy5);
document.getElementById("pa1").setAttribute("d","m"+cx1+" "+cy1+"L"+cx2+" "+cy2+"L"+cx3+" "+cy3+"L"+cx4+" "+cy4+"L"+cx5+" "+cy5+"z");
document.getElementById("pam").setAttribute("d","m"+cx1+" "+cy1+"L"+cx2+" "+cy2+"L"+cx3+" "+cy3+"L"+cx4+" "+cy4+"L"+cx5+" "+cy5+"z");
document.getElementById("p1").innerHTML="<table><tr><td>circle</td><td>cx</td><td>cy</td><td>dx</td><td>dy</td></tr><tr><td>1</td><td>"+cx1+"</td><td>"+cy1+"</td><td>"+dx1+"</td><td>"+dy1+"</td></tr><tr><td>2</td><td>"+cx2+"</td><td>"+cy2+"</td><td>"+dx2+"</td><td>"+dy2+"</td></tr><tr><td>3</td><td>"+cx3+"</td><td>"+cy3+"</td><td>"+dx3+"</td><td>"+dy3+"</td></tr><tr><td>4</td><td>"+cx4+"</td><td>"+cy4+"</td><td>"+dx4+"</td><td>"+dy4+"</td></tr><tr><td>5</td><td>"+cx5+"</td><td>"+cy5+"</td><td>"+dx5+"</td><td>"+dy5+"</td></tr></table>";
}

setInterval(calc1,50);

</script>
</body>

mardi 11 décembre 2018

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
html,body{
margin:0;
height:100%;
}
p{
margin:0;
font-size:10px;
color:#555;
}
body{
background:#111;
font-family:arial,sans-serif;
overflow:hidden;
}
svg{
border-bottom:1px solid #555;
}
</style>
</head>
<body>

<svg width="1000" height="500" id="svg1">
<circle cx="500" cy="250" r="2" fill="#555" id="c1"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c2"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c3"/>
<circle cx="500" cy="250" r="2" fill="#555" id="c4"/>
<path d="m500 250L500 250L500 250L500 250z" fill="none" stroke="#555" stroke-width="1" id="pa1"/>
</svg>

<p id="p1">text</p>

<script type="text/javascript">
var cx1=500;var cy1=250;var cx2=500;var cy2=250;var cx3=500;var cy3=250;var cx4=500;var cy4=250;
var dx1=Math.round(Math.random()*1000);
var dy1=Math.round(Math.random()*500);
var dx2=Math.round(Math.random()*1000);
var dy2=Math.round(Math.random()*500);
var dx3=Math.round(Math.random()*1000);
var dy3=Math.round(Math.random()*500);
var dx4=Math.round(Math.random()*1000);
var dy4=Math.round(Math.random()*500);
var c1=document.getElementById("c1");
var c2=document.getElementById("c2");
var c3=document.getElementById("c3");
var c4=document.getElementById("c4");
document.getElementById("p1").innerHTML=cx1+" "+cy1+" "+cx2+" "+cy2+" "+cx3+" "+cy3+" "+cx4+" "+cy4+" "+dx1+" "+dy1+" "+dx2+" "+dy2+" "+dx3+" "+dy3+" "+dx4+" "+dy4;

function calc1(){
if(cx1<dx1){cx1++};if(cx1>dx1){cx1--};if(cy1<dy1){cy1++};if(cy1>dy1){cy1--};
if(cx2<dx2){cx2++};if(cx2>dx2){cx2--};if(cy2<dy2){cy2++};if(cy2>dy2){cy2--};
if(cx3<dx3){cx3++};if(cx3>dx3){cx3--};if(cy3<dy3){cy3++};if(cy3>dy3){cy3--};
if(cx4<dx4){cx4++};if(cx4>dx4){cx4--};if(cy4<dy4){cy4++};if(cy4>dy4){cy4--};
if(cx1==dx1){dx1=Math.round(Math.random()*1000);};if(cy1==dy1){dy1=Math.round(Math.random()*500);};
if(cx2==dx2){dx2=Math.round(Math.random()*1000);};if(cy2==dy2){dy2=Math.round(Math.random()*500);};
if(cx3==dx3){dx3=Math.round(Math.random()*1000);};if(cy3==dy3){dy3=Math.round(Math.random()*500);};
if(cx4==dx4){dx4=Math.round(Math.random()*1000);};if(cy4==dy4){dy4=Math.round(Math.random()*500);};
c1.setAttribute("cx",cx1);c1.setAttribute("cy",cy1);
c2.setAttribute("cx",cx2);c2.setAttribute("cy",cy2);
c3.setAttribute("cx",cx3);c3.setAttribute("cy",cy3);
c4.setAttribute("cx",cx4);c4.setAttribute("cy",cy4);
document.getElementById("pa1").setAttribute("d","m"+cx1+" "+cy1+"L"+cx2+" "+cy2+"L"+cx3+" "+cy3+"L"+cx4+" "+cy4+"z");
document.getElementById("p1").innerHTML=cx1+" "+cy1+" "+cx2+" "+cy2+" "+cx3+" "+cy3+" "+cx4+" "+cy4+" "+dx1+" "+dy1+" "+dx2+" "+dy2+" "+dx3+" "+dy3+" "+dx4+" "+dy4;
}

setInterval(calc1,5);

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

mardi 4 décembre 2018

nothing