Beispiel:FeTurbulence-3.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./Beispiel:Grundlayout.css"> <title>Urfilter: feTurbulence - 3 seed</title>
<style> figure { box-sizing: border-box; max-width: 60em; margin: auto; } svg {
width: 96%; padding:0; margin:0; background: white;
}
form { width: 20em; }
label { display: block; margin-top: 1em; }
[type=range] { display: block; width: 100%; margin: 0; } body { display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); gap: 1em; } h1 {grid-column: 1 / -1;} </style> <script> 'use strict';
document.addEventListener('DOMContentLoaded', function () {
// listen to all changes in the form
document.querySelector('#control').addEventListener('input', changeSettings);
changeSettings(); // initialize with default values
});
function changeSettings() {
// select the turbulence filter element
const filterElement = document.querySelector('#turbulence feTurbulence');
// get input values
const seed = parseFloat(document.querySelector('#seed').value);
// set attributes on the filter
filterElement.setAttribute('seed', `${seed}`);
return false;
}
</script>
</head>
<body>
feTurbulence - seed
<form id="control">
<label for="seed">seed</label> <input id="seed" type="range" min="1" max="100" value="1" step="1">
</form>
<svg viewBox="0 0 260 260" > <defs> <filter id="turbulence" x="0%" y="0%" width="100%" height="100%"> <feTurbulence baseFrequency="0.05" seed="0" /> </filter> </defs>
<rect x="0" y="0" width="100%" height="50%" filter="url(#turbulence)"></rect> <rect x="0" y="52%" width="100%" height="50%" filter="url(#turbulence)"></rect>
</svg>
</body> </html>
