37 lines
997 B
HTML
37 lines
997 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body svg {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.box {
|
|
margin: 10px;
|
|
height: 200px;
|
|
width: 200px;
|
|
border: 20px solid blue;
|
|
background-color: green;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
|
|
<defs>
|
|
<filter id='filter1'>
|
|
<feturbulence basefrequency='0.005 0.005' id='frequency1' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
|
|
<fedisplacementmap id='displacement1' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap> <!-- in2 is invalid -->
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<div class='box' style="filter: url(#filter1) saturate(0);"></div>
|
|
<div class='box' style="filter: invert() url(#filter1) saturate(0);"></div>
|
|
<div class='box' style="filter: invert() url(#filter1)"></div>
|
|
</body>
|
|
</html>
|
|
|
|
|