mercredi 4 décembre 2019

feColorMatrix

<svg width="100%">
<defs>
<filter id="filter">
<feColorMatrix result="original" id="svgcolormatrix" type="matrix" values="1.4 0 0.4 0 -0.1 0 1 0 0 0 0 0 1 0.6 -0.4 0 0 0 1 0.4">
<animate attributename="values" begin="0s" dur="120s" repeatcount="indefinite" values="
1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04;
1.4 0 0.4 0 -0.1 0 1 0 0 0 0 0 1 0.6 -0.4 0 0 0 1 0.4;
-0.8 -1.8 1.2 -1.1 1.7 0 -0.5 0.5 -1.5 -1.5 -1.7 1.7 -0.1 1.5 -0.5 -1.7 -0.6 -1.2 0 1.2;
1.4 0 0.8 0 1 0 1 0 0 0 0 0 1 0.3 -0.4 0 1 -0.9 1 0.4;
2 -1 0.4 2 2 -0.9 1 -1 2 -1 0 0 1 0.6 -0.4 -1 0 -0.9 1 0.4;
-1.9 1.3 -1.9 0.5 -0.9 -1.9 1 -1.5 2 0.6 0 1.2 1.8 -1.1 1.9 1.9 -1.4 1.1 0 0.8;
1.4 0 0.4 0 -0.1 0 1 0 0 0 0 0 1 0.6 -0.4 0 0 0 1 0.4;
1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04;

"/></feColorMatrix>

</filter>
</defs>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuKl7uHmdyzC2CJbRELE4cFiVKuBuAwnHKmRhWxmKLLFJfd9U6so50oHM5IP_9r2wzaSmuhW5EA4-zIaDqsqtLSTczY5QXxSPP44AqvwjOU6wv8yiYkQ2GRHcn2VY1A3-hC2iFmsZqGLU/s1600/bateau.jpg" width="100%" height="100%" filter="url(#filter)"></image>
</svg>



By -

tiny basis

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Interesting Title</title>
<link rel="icon" href="https://image.flaticon.com/icons/png/512/71/71339.png" type="image/png">
<style>
html,body{
height:100%;
}

html,body,div,canvas,svg{
margin:0;
padding:0;
}

body{
font-family:sans-serif;
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.2)),url("https://img3.stockfresh.com/files/t/tashatuvango/m/32/3971276_stock-photo-green-grass-seamless-tileable-texture.jpg");
overflow:hidden;
}

#div1{
position:fixed;
top:0;
right:0;
background-color:rgba(0,0,0,0.5);
color:#fff;
padding:10px 20px;
text-align:right;
}

#svg1{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
</style>
</head>

<body onmousemove="coor1(event)">
<canvas id="can1"></canvas>
<div id="div1"></div>

<script>
var ww=window.innerWidth;
var wh=wh=window.innerHeight;
var mx=ww/2;
var my=wh/2;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var div1=document.getElementById("div1");
var col1="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.3)";
var sx=0;
var sy=0;

can1.width=ww;
can1.height=wh;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1;

function coor1(event){
mx=event.pageX;
my=event.pageY;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1+"<br>mouse x: "+mx+" y: "+my;
}

function drawCanvas(){
ctx.fillRect(0,0,100,100);
}

drawCanvas();
</script>
</body>
</html>
By -

vendredi 29 novembre 2019

basis

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Interesting Title</title>
<link rel="icon" href="https://image.flaticon.com/icons/png/512/71/71339.png" type="image/png">
<style>
html,body{
height:100%
}

 html,body,div,canvas,svg {
margin:0;
padding:0;
}

 body{
font-family:sans-serif;
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url("https://www.transparenttextures.com/patterns/concrete-wall.png");
overflow:hidden;
}

 #div1{
position:fixed;
top:0;
right:0;
background-color:rgba(0,0,0,0.5);
color:#fff;
padding:10px 20px;
text-align:right;
}

 #svg1{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

 </style>
</head>

 <body onmousemove="coor1(event)">
<svg id="svg1"></svg>
<canvas id="can1"></canvas>
<div id="div1"></div>

 <script>
var ww,wh,mx,my;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var div1=document.getElementById("div1");
var svg1=document.getElementById("svg1");
var cir1=document.createElementNS("http://www.w3.org/2000/svg","circle");
var col1="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.3)";

 window.addEventListener("resize",canwh);

 function canwh(){
ww=window.innerWidth;
wh=window.innerHeight;
can1.width=ww;
can1.height=wh;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1;
drawSvg();
drawCanvas();
}

 function coor1(event){
mx=event.pageX;
my=event.pageY;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1+"<br>mouse x: "+mx+" y: "+my;
}

 function drawSvg(){
cir1.setAttribute("cx",ww/2);
cir1.setAttribute("cy",wh/2);
cir1.setAttribute("r",ww/8);
cir1.style.fill=col1;
svg1.appendChild(cir1);
}

 function drawCanvas(){
ctx.clearRect(0,0,ww,wh);
ctx.beginPath();
ctx.arc(ww/2, wh/2,ww/16,0,2*Math.PI,false);
ctx.fillStyle="rgba(0,0,0,1)";
ctx.fill();
}

 canwh();
drawSvg();
drawCanvas();
</script>
</body>
</html>

By -

jeudi 28 novembre 2019

js animation & table

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
overflow-y:scroll;
height:100%;
}

 #div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}

 ::-webkit-scrollbar{
width:0px;
}

 table,td{
border:1px solid white;
border-collapse: collapse;
padding:2px;
}

 </style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">
<table>
<tbody>
<tr><td>squares</td><td><input type="number" id="nb1" max="100" min="1" value="5"></td></tr>
<tr><td>px</td><td><input type="number" id="nb2" max="100" min="1" value="10"></td></tr>
<tr><td>refresh</td><td><input type="checkbox" id="cle1" name="cle1"></td></tr>
</tbody>
</table>
<input type="button" value="Go" onmousedown="count1()">
</div>

 <script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var nb2=document.getElementById("nb2");
var cle1=document.getElementById("cle1");
var i=0;var va2;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var col1=[];
var sp1=1;
var results1=[];
var nb=nb1.value;
var act1=0;
var side=3;
var trio=0;
var mx=Math.round(ww/side)*side;
var my=Math.round(wh/side)*side;

 function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
div1.height=wh;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
col1=[];
results1=[];
nb=nb1.value;
va2=nb2.value;
side=va2;

 for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
col1.push("rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)");
results1.push(rectx[i]+" "+recty[i]+" "+col1[i]);
}

 can1.width=ww;
can1.height=wh;

 function cloud(){
results1=[];
for(var h=0;h<nb;h++){
results1.push("<tr><td>"+rectx[h]+"</td><td>"+recty[h]+"</td><td>"+col1[h]+"</td></tr>");
div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my+"<br><table><tbody>"+results1.join("</tr><tr>")+"</tbody></table>";
}

 if(cle1.checked){ctx.clearRect(0,0,ww,wh);}

 trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
ctx.fillStyle=col1[i];
ctx.fillRect(rectx[i],recty[i],side,side);

 if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/sp1;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/sp1;}

 if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/sp1;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/sp1;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}

 if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}

 count1();

 function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}

 function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}}
</script>
</body>
</html>
By -

mardi 26 novembre 2019

rect[i]

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
overflow-y:scroll;
height:100%;
}

 #div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}

 ::-webkit-scrollbar{
width:0px;
}

 #span1{
font-size:14px;
}
</style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">
number of squares: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()" onkeyup="count1()">
size: <input type="number" id="nb2" min="1" max="100" value="10" onmouseup="count1()" onkeyup="count1()">
refresh: <input type="checkbox" id="cle1" name="cle1">
</div>

 <script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var nb2=document.getElementById("nb2");
var cle1=document.getElementById("cle1");
var i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var col1=[];
var sp1=1;
var results1=[];
var nb=nb1.value;
var act1=0;
var side=3;
var trio=0;
var mx=Math.round(ww/side)*side;
var my=Math.round(wh/side)*side;

 function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
div1.height=wh;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
col1=[];
results1=[];
nb=nb1.value;
va2=nb2.value;
side=va2;

 for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
col1.push("rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)");
results1.push(rectx[i]+" "+recty[i]+" "+col1[i]);
}

 can1.width=ww;
can1.height=wh;

 function cloud(){
results1=[];
for(var h=0;h<nb;h++){
results1.push(rectx[h]+" "+recty[h]+" "+col1[h]);
div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my+"<br><span id=\"span1\">"+results1.join("<br>")+"</span>";
}

 if(cle1.checked){ctx.clearRect(0,0,ww,wh);}

 trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
//ctx.arc(rectx[i],recty[i],Math.random()*side/2,0,2*Math.PI);
////ctx.arc(rectx[i],recty[i],side/2,0,2*Math.PI);
ctx.fillStyle=col1[i];
ctx.fillRect(rectx[i],recty[i],side,side);
/*ctx.lineWidth=2;
ctx.strokeStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
ctx.stroke();*/
//ctx.fillStyle="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*100)/100+")";
////ctx.fill();

 if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/sp1;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/sp1;}

 if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/sp1;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/sp1;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}

 if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}

 count1();

 function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}

 function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}
}
</script>
</body>
</html>
By -

jeudi 21 novembre 2019

sparks

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}

#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}
</style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">number of circles: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var nb=nb1.value;
var act1=0;
//var side=Math.round(Math.random()*100);
var side=10;
var trio=0;
var mx=Math.round(ww/20)*10;
var my=Math.round(wh/20)*10;

function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
nb=nb1.value;

for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
}
can1.width=ww;
can1.height=wh;

function cloud(){

div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my;

ctx.clearRect(0,0,ww,wh);
trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
ctx.arc(rectx[i],recty[i],Math.random()*side/2,0,2*Math.PI);
ctx.lineWidth=0.5;
ctx.strokeStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
ctx.stroke();
ctx.fillStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
//ctx.fillStyle="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*100)/100+")";
ctx.fill();

if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/4;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/4;}

if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/4;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/4;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}

if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}

count1();

function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}

function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}
}
</script>
</body>
</html>
By -

canvas array for coordinates

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:consolas;
}

#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:consolas;
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<div id="div2">number of circles: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var nb=nb1.value;
var act1=0;

function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
nb=nb1.value;

for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/10)*10);
recty.push(Math.round(Math.random()*wh/10)*10);
rectdx.push(Math.round(Math.random()*ww/10)*10);
rectdy.push(Math.round(Math.random()*wh/10)*10);
}
can1.width=ww;
can1.height=wh;

function cloud(){

div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh;

for(var i=0;i<nb;i++){

ctx.beginPath();
ctx.arc(rectx[i],recty[i],4,0,2*Math.PI);
ctx.lineWidth=2;
ctx.strokeStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
ctx.stroke();
ctx.fillStyle="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*100)/100+")";
ctx.fill();

if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+10;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-10;}
if(rectx[i]==rectdx[i]){rectdx[i]=Math.round(Math.random()*ww/10)*10;}

if(recty[i]<rectdy[i]){recty[i]=recty[i]+10;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-10;}
if(recty[i]==rectdy[i]){rectdy[i]=Math.round(Math.random()*wh/10)*10;}
}}

if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,50);
act1++;

}

count1();
</script>
</body>
</html>
By -
Inscription à : Articles (Atom)
  • Références
    Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
  • (pas de titre)
    <html lang="fr"> <head> <title>Eyes</title> <style> html,body{ height:100%; margin:0; } #left_eye{ t...
  • rando
    A B C dirty rude pig deer playing the guitar flipping pancakes curvy courageous zombie porcupine flying a kite doing karate bruised imaginar...