Бухвалова Юлия, LiveJournal
.img {
filter:
progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color="gray", Positive="true");
}
.img {
}
.img {
filter: blur(5px);
}
.img {
filter: blur(5px) grayscale(.5);
}
<svg>
<filter id="my-fancy-filter">
</filter>
</svg>
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
</filter>
</svg>
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
<feColorMatrix
type="saturate" values=".5"/>
</filter>
</svg>
.img {
}
.img {
filter: url("#my-fancy-filter");
}
<svg>
<circle
filter="url(#my-fancy-filter)"/>
</svg>
in
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
</filter>
</svg>
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
<feColorMatrix
type="saturate" values=".5"/>
</filter>
</svg>
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
<feColorMatrix in="SourceGraphic"
type="saturate" values=".5"/>
</filter>
</svg>
result
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30"/>
</filter>
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
</filter>
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
<feMerge>
</feMerge>
</filter>
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
<feMerge>
<feMergeNode in="offset"/>
</feMerge>
</filter>
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
<feMerge>
<feMergeNode in="offset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
const primitive = document.querySelector('#turbulence');
function changeProp() {
primitive.setAttribute('seed', primitive.seed.baseVal + 1);
setTimeout(() => {
requestAnimationFrame(changeProp);
}, 75);
}
requestAnimationFrame(changeProp);
Nx (x,y) = - surfaceScale * FACTORx *
(Kx(0,0)*I(x-dx,y-dy) + Kx(1,0)*I(x,y-dy) + Kx(2,0)*I(x+dx,y-dy) +
Kx(0,1)*I(x-dx,y) + Kx(1,1)*I(x,y) + Kx(2,1)*I(x+dx,y) +
Kx(0,2)*I(x-dx,y+dy) + Kx(1,2)*I(x,y+dy) + Kx(2,2)*I(x+dx,y+dy))
Ny (x,y) = - surfaceScale * FACTORy *
(Ky(0,0)*I(x-dx,y-dy) + Ky(1,0)*I(x,y-dy) + Ky(2,0)*I(x+dx,y-dy) +
Ky(0,1)*I(x-dx,y) + Ky(1,1)*I(x,y) + Ky(2,1)*I(x+dx,y) +
Ky(0,2)*I(x-dx,y+dy) + Ky(1,2)*I(x,y+dy) + Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0
N = (Nx, Ny, Nz) / Norm((Nx,Ny,Nz))
<feFuncR type="table"
tableValues="1 0"/>
<feFuncR type="linear"
slope="1"
intercept="0"/>
<feFuncR type="gamma"
amplitude="1"
exponent="1"
offset="0"/>