Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Oklch-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>oklch-Spielwiese</title>
<style>
body {
max-width: 64em;
margin: 0 auto;
padding: 1em;
font-family: sans-serif;
color: #444;
}
.controls {
display: grid;
grid-template-columns: 1fr 4em;
gap: 0.5em 1em;
margin-bottom: 1em;
label {
grid-column: 1 / -1;
margin-bottom: -0.3em;
}
input {
margin: 0;
}
.value-display {
padding: 0.3em 0.5em;
margin-top: -1em;
background: #EEE;
border-radius: 0.3em;
font-family: monospace;
font-size: 120%;
text-align: right;
}
input[type="range"] {
-webkit-appearance: none;
height: 5px;
border-radius: 5px;
border: thin solid grey;
outline: none;
background: #BBB;
}
input[type="range"].hue {
background: linear-gradient(
to right,
oklch(50 0.25 0),
oklch(50 0.25 90),
oklch(50 0.25 180),
oklch(50 0.25 270),
oklch(50 0.25 360)
);
}
/* Chrome, Safari, Edge (WebKit) */
::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #444;
cursor: pointer;
border: 2px solid white;
}
/* Firefox */
::-moz-range-thumb {
-moz-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #444;
cursor: pointer;
border: 2px solid white;
}
}
button {
padding: 0.5em;
margin-top: 1em;
font-size: 1em;
}
</style>
</head>
<body>
<label for="sliderAbstufung">Helligkeit (Lightness) Abstufung:</label> <input type="range" id="sliderAbstufung" class="slider" min="0" max="0.3" step="0.01" value="0.1"> <output class="value-display" id="valueAbstufung">0.1</output>
<label for="sliderChroma">Farbsättigung (Chroma):</label> <input type="range" id="sliderChroma" class="slider" min="0" max="0.4" step="0.01" value="0.15"> <output class="value-display" id="valueChroma">0.15</output>
<label for="sliderHinten">Hintergrund Farbe (Hue):</label> <input type="range" id="sliderHinten" class="slider hue" min="0" max="360" value="86"> <output class="value-display" id="valueHinten">86</output>
<label for="sliderMitte">Bildmitte Farbe (Hue):</label> <input type="range" id="sliderMitte" class="slider hue" min="0" max="360" value="34"> <output class="value-display" id="valueMitte">34</output>
<label for="sliderVorne">Vordergrund Farbe (Hue):</label> <input type="range" id="sliderVorne" class="slider hue" min="0" max="360" value="340"> <output class="value-display" id="valueVorne">340</output>
<svg id="landscape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1200">
<defs>
<title>Sunset at the lake</title>
<style type="text/css">
svg {
/* Variablen zum Spielen per Schieberegler: */
--hinten: 86;
--mitte: 34;
--vorne: 340;
--chroma: 0.15;
--abstufung: 0.1;
--vorne-startstufe: 0.6;
--vorne1: oklch(var(--vorne-startstufe) var(--chroma) var(--vorne));
--vorne2: oklch(calc(var(--vorne-startstufe) - var(--abstufung)) var(--chroma) var(--vorne));
--vorne3: oklch(calc(var(--vorne-startstufe) - 2 * var(--abstufung)) var(--chroma) var(--vorne));
--vorne4: oklch(calc(var(--vorne-startstufe) - 3 * var(--abstufung)) var(--chroma) var(--vorne));
--vorne5: oklch(calc(var(--vorne-startstufe) - 4 * var(--abstufung)) var(--chroma) var(--vorne));
--mitte-startstufe: 0.6;
--mitte1: oklch(var(--mitte-startstufe) var(--chroma) var(--mitte));
--mitte2: oklch(calc(var(--mitte-startstufe) - var(--abstufung)) var(--chroma) var(--mitte));
--mitte3: oklch(calc(var(--mitte-startstufe) - 2 * var(--abstufung)) var(--chroma) var(--mitte));
--mitte4: oklch(calc(var(--mitte-startstufe) - 3 * var(--abstufung)) var(--chroma) var(--mitte));
--mitte5: oklch(calc(var(--mitte-startstufe) - 4 * var(--abstufung)) var(--chroma) var(--mitte));
--hinten-startstufe: 0.9;
--hinten1: oklch(var(--hinten-startstufe) var(--chroma) var(--hinten));
--hinten2: oklch(calc(var(--hinten-startstufe) - var(--abstufung)) var(--chroma) var(--hinten));
--hinten3: oklch(calc(var(--hinten-startstufe) - 2 * var(--abstufung)) var(--chroma) var(--hinten));
--hinten4: oklch(calc(var(--hinten-startstufe) - 3 * var(--abstufung)) var(--chroma) var(--hinten));
overflow: hidden;
stroke-width: 0;
}
</style>
<clipPath id="viewport-clip" clipPathUnits="userSpaceOnUse">
<rect x="0" y="0" width="2000" height="1200"/>
</clipPath>
<symbol id="tree-1" viewBox="0 0 344 426">
<path d="m159 426 3-56-23 11-3-7-35 18 5-19-22 10-8-10-26 8-10-16-13-1-27-24 26 8 27-1-13-5-9-11-8-9 25 8 27-1-25-7 12-2-31-15 24 1-21-13 41 6 18-6-30-5 6-4-22 1 13-8 29-9-27-4 5-6-19-2 18-8 21-1-21-12 14-2-22-18 26 4-18-16 41 6 5-6-25-7 5-6-10-3-11-5 26-3-12-9 4-5-13-13 20 4v-8l22 6 9-7-20-13 9-7-17-9 14 1 16 7-8-20 19 8 2-7-16-21 13-1-14-18h9l12 8 7-11-11-9 9-3-12-12 18 4-4-18 9 5V16l4-2 3-14 7 14 1 15 13-9-9 20 16-7 6 1-13 17h13l-7 14 12-1 12-7-9 15 9 2-17 10 20-3-15 12 11 1-17 10 7 4 15-8-9 19 13-2 16-7-7 16-19 17 21 6 30-8-6 13-15 17 27 7-22 7 17 4-36 10 15 4 19-5 14-1-21 16 26-5-10 21-17 12 19 1 13-3-4 12-35 14 22 9 20-2-14 12-28 6h56l-19 11 22-3-18 21-21 5h33l16 2-11 8 30 5-21 8 17 16-37-2 1 13-23-7-20 10-6-7-18 9-26-11 3 9-30-4v53z"/>
</symbol>
<symbol id="tree-2" viewBox="0 0 244 374">
<path d="M113 375v-52l-3 7-14-9-18 18v-22l-8 12-38-5-23 3 10-13-18-14h25l6-3-17-13 13-2 16 4-5-8 13-4-19-7-9-10 27 1 13-5-23-3-3-11h29l-21-6 5-8-17-7 14-4 14 3-2-7-15-11-4-10 19 3-4-11 23-1-17-7 8-6-23-3 31-16-3-6-25-13 17 1 21-1 6-7H73l15-12-20-5 10-6 16-2-18-10 15-2 12 2-20-12 13-5-7-16 15 1 6-2-11-10 5-2-6-8 13 3-5-12 11 2-1-12 6-14 6 14 7 9-3 7h5l2 10 10 2-10 9 10 2 8-1-3 10-7 7h15l-5 15-6 9 19-6-13 15h11l17 8-16 6-6 5 33 5-22 10 17 10-23 3 10 6 24 8-25 15 32-10-9 9-15 10 29 7-23 9-3 5 13 2 18 7-18 3-18 11 27-3-8 18 11-1 18 5-31 16 21-5-12 8 5 9-25 4h30l19 6-31 6-4 5h42l-9 11-21 8 4 12-27-10-4 15-32-11-2 10-10-17-8 9-8 4-1 14 2 31z"/>
</symbol>
<symbol id="treeline" viewBox="0 0 400 200">
<polygon points="0 13 0 199 400 201 392 195 386 177 380 179 374 163 362 191 358 177 346 159 338 183 324 149 318 169 312 147 306 141 302 157 294 153 288 165 280 127 270 145 262 141 262 123 256 117 250 127 244 119 234 133 228 123 224 105 218 99 212 115 210 107 206 99 202 83 196 103 190 109 188 101 182 85 174 113 170 109 168 97 162 83 152 97 142 75 130 95 122 63 114 83 106 61 100 57 94 47 90 73 84 81 80 63 86 65 82 57 76 39 66 59 58 47 54 27 48 47 44 37 40 19 34 15 30 25 24 29 18 17 14 3 8 1"/>
</symbol>
<linearGradient id="fog-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="white" stop-opacity="0.55"/>
<stop offset="0.6" stop-color="white" stop-opacity="0.28"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
<g clip-path="url(#viewport-clip)">
<rect id="sky" fill="var(--hinten3)" width="2000" height="1200"/>
<path id="clouds" fill="var(--hinten2)" d="M 116 78 C 167 65 238 71 263 134 C 319 120 380 149 359 182 C 326 234 133 161 0 260 L 0 154 C 0 154 12 130 75 149 C 39 118 61 92 116 78 M 1871 132 C 1957 58 2000 89 2000 89 L 2000 421 C 1999 421 1711 329 1635 343 C 1590 352 1217 334 1281 189 C 1267 155 1297 120 1386 147 C 1395 120 1478 91 1524 173 C 1545 103 1623 124 1645 132 C 1686 88 1764 64 1816 75 C 1871 86 1871 132 1871 132"/>
<circle id="sun" fill="var(--hinten1)" cx="960" cy="190" r="60"/>
<rect id="water" fill="var(--vorne1)" y="447" width="2000" height="753"/>
<g id="shadows" fill="var(--vorne3)" opacity=".3" transform="matrix(1 0 0 0.894 0 62.529)">
<use width="400" height="200" href="#treeline" transform="matrix(1, 0, 0, -0.728, 512.386, 831.713)"/>
<use width="400" height="200" href="#treeline" transform="matrix(1.518, 0, 0, -1.101, 37.977, 971)"/>
<path d="m126 759-41 13 827 30-31-277-420 159z" style="transform-box:fill-box;transform-origin:50% 50%" transform="matrix(-1 0 0 -1 14 127)"/>
<path d="M800 468c-96 43-256 21-309 54l537 27z" style="transform-box:fill-box;transform-origin:50% 50%" transform="matrix(-1 0 0 -1 -43 14)"/>
<use width="400" height="200" href="#treeline" transform="matrix(-1, 0, 0, -0.515, 1773.656, 700.009)"/>
<use width="400" height="200" href="#treeline" transform="matrix(-1.518, 0, 0, -1.101, 2190.298, 835.456)"/>
<path d="m1509 501-75-11 566 19v33zm-125 101-41-13 657-19v89l-451-40z"/>
</g>
<g id="mountains">
<path fill="var(--mitte4)" d="M 1814 367 C 1814 367 1548 482 1524 485 C 1490 490 1453 489 1425 505 C 1425 505 1770 505 2000 511 L 2000 288 C 1926 311 1881 303 1864 322 C 1853 335 1814 367 1814 367"/>
<path fill="var(--mitte5)" d="M 1939 328 C 1939 328 1876 341 1846 367 C 1835 382 1767 509 1767 509 L 2000 470 L 2000 298 C 1999 298 1960 319 1939 328"/>
<path fill="var(--mitte2)" d="M1063 322c5-2 10-6 15-10 17-14 40-22 62-24 13-2 28 0 40-2 25-6 45-20 70-26 25-8 43-6 68-14 15-6 37-18 55-22 30-12 95 16 125 30 35 14 57-2 72 6 40 18 65 32 105 48 35 14 85 32 123 44 32 12 79 10 109 22 3 0 263 101 263 101s-845-19-1127-33c-140-6-1053-42-1188-62-5 0 793-36 823-52 20-10 32-26 52-32l45-18c8-4 15-6 23-6 7 0 30 12 37 14 30 8 23 8 55 14 13 2 30 12 45 14 33 4 60 14 88 22 7 2 32-12 40-14"/>
<path fill="var(--mitte1)" d="M1424 322c-7-1-16-2-20-7-4-4-32 0-32-6-2-9 19-7 19-11s11-1 8-8c-2-4-1-6 2-8 6-7 25-14 10-23-4-3-10-5-14-8-4-4-7-8-7-8s-14-8-21-13c0 0 18-2 6-7-25 6-59 22-58 22-25 10-42 7-67 14-24 7-45 22-70 26l-40 2c-23 2-49 8-65 21l-13 13c-6 2-27 14-37 16 16 9 47 3 65 1 25-1 57-3 67 19 0 0 33-8 50-11 12-2 36-6 46 3 10 10-18 24-26 31-17 14 85 19 85 19s70-44 98-59c-6-9 25-16 14-18"/>
<path fill="var(--mitte3)" d="m-197 453 427-181 80-38c21-5 35 14 35 14l38 16 35 8 25 20c113 23 127 44 127 44s45 6 66 5l29-20s30-3 65-5 73 20 73 20l20 8 42-1 18 13h32l33 18 32 6 38 10s23-11 34-9l43 23 33 6 28 13 102-43 35-10 52-28 34 20c14 6 66 16 74 18 16 5 47 16 47 16 23 10 45 23 68 32 0 0 69 8 102 18l200 33C-15 490-197 453-197 453"/>
<path fill="var(--mitte1)" d="M1253 401c7 2-15 13-11 19 4 7 15 1 23 1 9 0 19-2 28-2 1 0-13 15-19 22-3 4 6-1 6 7 0 6-10 17-5 16 24-5 47-16 68-29 3-2-10-5-8-8 6-9 20-10 26-18 2-3-7-2-9-5-2-4-4-10-1-17-2-3-27-10-25-16 3-11 16-17 22-27l-4-3c-25 11-52 28-52 28l-35 11c-11 5-18 16-29 21-10 4-20 4-31 7-10 2-18 5-29 10 0 0 27-2 42-5s33-14 43-12" style="opacity:0.5"/>
<path fill="var(--mitte1)" d="M527 396c14 1-31-20-25-33s25 1 39-2c4 0 3-6 4-6 13 1 43 17 38 5-15-35-38-29-62-37-27-9-37-13-63-28l-16-4c-6-5-24-19-24-19l-35-8c-11-5-38-16-38-16-9-11-20-15-24-14-5-1 7 7 11 10 17 12 43 20 52 42 0 1-19 22-16 28 3 5 11 2 16 5 19 10 38 20 55 32l-27 4c37 18 74 37 115 41" style="opacity:0.6"/>
<path fill="var(--mitte4)" d="m-65 510 485-102c18-6 35-10 53-6 17 6 77 2 92-2 30-8 58 26 90 26 13 0 35-4 35-4 13 2 25 10 35 18 75 46 193 26 260 78z"/>
<path fill="var(--mitte5)" d="M778 516c-3-4-17-19-53-28-15-2-27-2-42-4-13-2-25-2-38-6-5-2-20-6-17-12 2-4 5-8 7-12 5-6 0-12-7-16-8-2-15-4-23-6l-15-6c-7-2-20-6-25-12s-2-10 0-14c-15 4-75 8-92 2-18-4-35 0-53 6-37 8-485 102-485 102s538 2 843 6"/>
</g>
<g id="treelines" fill="var(--vorne2)">
<use width="400" height="200" href="#treeline" transform="matrix(1.097, 0, 0, 1.194, 473.669, 421.24)"/>
<use width="400" height="200" href="#treeline" transform="matrix(1.072, 0, 0, 1.357, 205, 269.274)"/>
<use width="400" height="200" href="#treeline" transform="matrix(-1, 0, 0, 0.568, 1776, 458.415)"/>
<use width="400" height="200" href="#treeline" transform="matrix(-0.953, 0, 0, 1, 2021.28, 329)"/>
<path d="M925 673s-340-12-524-1L0 705V182s32-9 115 76c56 9 101 44 97 46l54 54 248 139zm418-86s109 10 351-1l306 9V391s-181 87-178 88l-206 56c6-8-268 31-273 52"/>
</g>
<g id="fog" filter="drop-shadow(0 0 24px white)">
<path d="M 0 530 C 200 505 378 588 600 530 C 822 472 1032 495 1232 460 C 1432 425 1600 560 1800 528 C 2000 496 2000 555 2000 555 L 2000 760 L 0 760 L 0 530 Z" fill="url(#fog-grad)" opacity=".6"/>
<path d="M-50 665 C 150 640 350 700 600 675 S 1100 710 1350 670 S 1750 700 2050 660 L 2050 860 L -50 860 Z" fill="url(#fog-grad)" opacity=".5"/>
<path d="M 0 745 C 250 720 494 823 744 803 C 994 783 1200 795 1500 745 C 1800 695 1850 770 2000 750 L 2000 940 L 0 940 L 0 745 Z" fill="url(#fog-grad)" opacity=".4"/>
</g>
<path id="shadows-front" opacity=".2" fill="var(--vorne4)" d="M402 519c181 25 93 85-64 132L0 710V221c3 0 45 29 190 146 126 91 110 120 212 152m1327 67 270 9 1-211c-54 51-74 36-114 59-89 51-70 121-157 143"/>
<path d="M0 860c180-24 300-8 480 8 220 20 420 12 640-20 200-28 420 10 580 40v82H0z" fill="white" opacity=".05"/>
<g id="trees" fill="var(--vorne4)">
<use width="344" height="426" href="#tree-1" transform="matrix(1.339, 0, 0, 1.889, 49.551, 586.557)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(-1.035, 0, 0, 0.967, 665.148, 753.563)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(1.235, 0, 0, 1.135, 315.139, 934.519)"/>
<use width="244" height="374" href="#tree-2" transform="matrix(-1.34, 0, 0, 1.367, 979.696, 876.233)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(-0.746, 0, 0, 0.628, 1067.849, 1011.617)"/>
<use width="244" height="374" href="#tree-2" transform="matrix(0.748, 0, 0, 0.744, 916.323, 953.239)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(0.756, 0, 0, 0.979, 1105.972, 883.611)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(-1.036, 0, 0, 1.234, 1541.928, 809.951)"/>
<use width="244" height="374" href="#tree-2" transform="matrix(1.111, 0, 0, 1.165, 1385.337, 945.806)"/>
<use width="244" height="374" href="#tree-2" transform="matrix(-1.55, 0, 0, 1.771, 1854.662, 632.972)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(-0.853, 0, 0, 1.244, 1918.229, 767.833)"/>
</g>
<g id="trees-front" fill="var(--vorne5)">
<use width="244" height="374" href="#tree-2" transform="matrix(-2.277, 0, 0, 2.839, 339.208, 341.047)"/>
<use width="244" height="374" href="#tree-2" transform="matrix(1.47, 0, 0, 1.667, 527.528, 755.642)"/>
<use width="344" height="426" href="#tree-1" transform="matrix(1.684, 0, 0, 2.046, 1667.902, 450.99)"/>
<use width="244" height="374" href="#tree-2" transform="matrix(-1.884, 0, 0, 1.746, 1377.195, 810.953)"/>
</g>
</g>
</svg>
<button id="resetButton">Zurücksetzen auf Ausgangswerte</button>
<script>
// HTML-Elemente
const sliders = {
vorne: document.getElementById('sliderVorne'),
mitte: document.getElementById('sliderMitte'),
hinten: document.getElementById('sliderHinten'),
chroma: document.getElementById('sliderChroma'),
abstufung: document.getElementById('sliderAbstufung')
};
const valueDisplays = {
vorne: document.getElementById('valueVorne'),
mitte: document.getElementById('valueMitte'),
hinten: document.getElementById('valueHinten'),
chroma: document.getElementById('valueChroma'),
abstufung: document.getElementById('valueAbstufung')
};
const svgElement = document.getElementById('landscape');
const svgStyles = svgElement.querySelector('style');
// CSS-Variable im SVG-Style aktualisieren
function updateStyle(variable, value) {
const styleContent = svgStyles.textContent;
const regex = new RegExp(`--${variable}:\\s*[^;]+`, 'g');
const updatedStyle = styleContent.replace(regex, `--${variable}: ${value}`);
svgStyles.textContent = updatedStyle;
}
// Event-Listener für jeden Slider
sliders.vorne.addEventListener('input', (e) => {
valueDisplays.vorne.textContent = e.target.value;
updateStyle('vorne', e.target.value);
});
sliders.mitte.addEventListener('input', (e) => {
valueDisplays.mitte.textContent = e.target.value;
updateStyle('mitte', e.target.value);
});
sliders.hinten.addEventListener('input', (e) => {
valueDisplays.hinten.textContent = e.target.value;
updateStyle('hinten', e.target.value);
});
sliders.chroma.addEventListener('input', (e) => {
valueDisplays.chroma.textContent = e.target.value;
updateStyle('chroma', e.target.value);
});
sliders.abstufung.addEventListener('input', (e) => {
valueDisplays.abstufung.textContent = e.target.value;
updateStyle('abstufung', e.target.value);
});
// Reset-Button
const resetButton = document.getElementById('resetButton');
resetButton.addEventListener('click', () => {
const defaults = {
vorne: 340,
mitte: 34,
hinten: 86,
chroma: 0.15,
abstufung: 0.1
};
for (const key in defaults) {
sliders[key].value = defaults[key];
valueDisplays[key].textContent = defaults[key];
updateStyle(key, defaults[key]);
}
});
</script>
</body> </html>
