Beispiel:FeTurbulence-1.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</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 baseFrequencyX = parseFloat(document.querySelector('#baseFrequencyX').value);
const baseFrequencyY = parseFloat(document.querySelector('#baseFrequencyY').value);
const type = document.querySelector('input[name="type"]:checked').value;
// set attributes on the filter
filterElement.setAttribute('baseFrequency', `${baseFrequencyX} ${baseFrequencyY}`);
filterElement.setAttribute('type', type);
return false;
}
</script>
</head>
<body>
Urfilter: feTurbulence
<form id="control">
<label for="baseFrequencyX">baseFrequencyX</label> <input id="baseFrequencyX" type="range" min="0" max="1" value=".125" step="0.01">
<label for="baseFrequencyY">baseFrequencyY</label> <input id="baseFrequencyY" type="range" min="0" max="1" value=".5" step="0.01">
Type:
<label> <input type="radio" name="type" value="turbulence" checked> turbulence </label> <label> <input type="radio" name="type" value="fractalNoise" > fractalNoise </label>
</form>
<svg viewBox="0 0 260 260" > <defs>
<symbol id="wolke"> <path stroke="blue" stroke-with="1" fill="skyblue"
d="m40,40 c0,0 20,-50 30,0 0,0 10,-40 40,0 0,0 40,-50 30,30 20,20 -0,30 -30,20 0,0 -20,50 -30,0 0,0 -30,50 -40,-20 0,0 -45,-30 0,-30" />
</symbol>
<filter id="turbulence">
<feTurbulence
type="turbulence"
baseFrequency="0.01"
numOctaves="1"
in="SourceGraphic"/>
</filter>
</defs>
<rect id="rechteck" x="10" y="10" width="200" height="200" style="filter: url(#turbulence);" />
</svg>
</body> </html>
