<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>
mercredi 4 décembre 2019
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>
<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>
Inscription à :
Articles (Atom)