Beispiel:FeTurbulence-8.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wasser mit Wellengischt</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1200">
<title>Leuchtturm</title>
<defs>
<!-- Filter für Gischt und Büsche -->
<filter id="sprenkeln">
<feTurbulence type="turbulence" baseFrequency="0.3" numOctaves="3" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" scale="80" xChannelSelector="G" yChannelSelector="B"/>
<feGaussianBlur stdDeviation="1"/>
</filter>
<!-- Filter für Spiegelung der Sonne -->
<filter id="weich">
<feGaussianBlur stdDeviation="20"/>
</filter>
<!-- Filter für den Vordergrund -->
<filter id="unscharf">
<feGaussianBlur stdDeviation="10"/>
</filter>
<!-- Verläufe -->
<linearGradient id="verlauf_1" gradientUnits="userSpaceOnUse" x1="886.97" y1="-158.82" x2="628.60" y2="732.01">
<stop offset="0" stop-color="#5b7bdf"/>
<stop offset="1" stop-color="#fab98e"/>
</linearGradient>
<linearGradient id="verlauf_2" gradientUnits="userSpaceOnUse" x1="1176.59" y1="548.44" x2="996.41" y2="1293.86">
<stop offset="0" stop-color="#5f7dc5"/>
<stop offset="1" stop-color="#254d8a"/>
</linearGradient>
<linearGradient id="verlauf_3" gradientUnits="userSpaceOnUse" x1="801.12" y1="457.00" x2="801.12" y2="603.78">
<stop offset="0" stop-color="#fef1cb"/>
<stop offset="1" stop-color="#fde084"/>
</linearGradient>
<linearGradient id="verlauf_4" gradientUnits="userSpaceOnUse" x1="272.80" y1="283.40" x2="1477.08" y2="289.25">
<stop offset="0" stop-color="#fff4c9"/>
<stop offset="1" stop-color="#f9f1c2" stop-opacity="0"/>
</linearGradient>
<radialGradient id="verlauf_5" gradientUnits="userSpaceOnUse" cx="259" cy="265" r="67" gradientTransform="matrix(1.17, 0.05, -0.03, 0.86, -34, 14)">
<stop offset="0" stop-color="#ffbf56"/>
<stop offset="1" stop-color="#fff3c8" stop-opacity="0"/>
</radialGradient>
<!-- Möwe -->
<symbol id="moewe" viewBox="0 0 326 146">
<path fill="#757897" d="m 45,85 44,3 79,29 51,-66 65,-31 v 29 c 0,0 -21,21 -31,31 -11,11 -11,22 -32,38 l 21,9 -7,12 -18,1 c 0,0 -17,6 -40,6 -23,0 -41,-11 -41,-11 l -4,-8 10,-15 c 0,0 -28,-7 -44,-10 -16,-3 -31,-2 -31,-2"/>
<path fill="#ffebdc" d="m 44,83 c 55,2 52,-2 128,22 6,-1 31,-43 40,-52 20,-19 71,-36 71,-36 l 1,2 -53,30 c -10,8 -17,16 -22,24 0,0 -36,51 -44,51 -9,0 -9,-7 -17,-7 -4,0 -9,0 -15,10 l -1,-1 c -3,-5 7,-14 9,-13 C 96,87 99,94 53,87 50,86 47,84 44,83 Z"/>
<path fill="#1f253c" d="m 0,85 c -3,-4 48,-2 48,-2 0,0 17,11 19,17 0,0 -22,-1 -45,-5 C 14,93 4,91 0,85 Z M 283,17 314,3 c 0,0 11,-4 11,-2 -2,18 -43,50 -43,50 0,0 0,-13 1,-19 1,-5 0,-15 0,-15 z m -166,119 15,-10 c 7,3 7,8 4,9 z m 31,-12 c 0,1 -1,2 -2,2 -1,0 -2,-1 -2,-2 0,-1 1,-2 2,-2 1,0 2,1 2,2 z m 91,2 c 5,2 17,-1 18,0 2,3 -9,12 -22,13 0,0 -11,-3 -9,-7 7,0 13,-6 13,-6 z"/>
</symbol>
<!-- SVG Rand beschneiden -->
<clipPath id="canvas-clip" clipPathUnits="userSpaceOnUse">
<rect x="0" y="0" width="2000" height="1200"/>
</clipPath>
</defs>
<g clip-path="url(#canvas-clip)" stroke-width="0">
<rect id="himmel" fill="url(#verlauf_1)" width="2000" height="620"/>
<circle style="stroke: #000; fill: url(#verlauf_3);" cx="801" cy="569" r="112"/>
<path id="wolken" style="stroke: #000; fill: #fcc48c; opacity: 0.48;" d="m 314,611 c 0,0 -40,-202 106,-100 0,0 92,-81 151,21 0,0 66,-22 81,21 47,-25 67,9 67,9 0,0 40,7 46,28 36,18 69,-2 69,-2 0,0 16,-36 55,-17 24,-32 50,-1 50,-1 0,0 40,-50 91,-14 10,-23 40,-3 40,-3 0,0 40,-70 120,-35 80,-99 150,2 150,2 0,0 60,-24 80,28 40,-52 90,-5 90,-5 0,0 0,-35 50,-25 0,-73 70,-53 70,-53 0,0 30,-79 130,-44 10,-42 80,-23 80,-23 90,-120 160,-58 160,-58 v 325"/>
<rect id="meer_hintergrund" width="2000" height="600" style="fill: url(#verlauf_2); pointer-events: none;" y="600"/>
<path id="spiegelung" filter="url(#weich)" style="opacity: 0.48;
fill: #fff40f;" d="M 661,674 C 616,759 871,809 929,731 984,657 873,630 835,554 795,475 705,590 661,674 Z"/>
<g id="turm">
<polygon style="stroke: #000; fill: #ffd198;" points="215 239 239 233 280 232 302 239 303 301 214 300"/>
<polyline style="stroke: #000; fill: #625d86;" points="166 538 196 342 236 341 222 563"/>
<polyline style="stroke: #000; fill: #7b7194;" points="221 556 236 341 287 342 308 585"/>
<polyline style="stroke: #000; fill: #b88689;" points="306 572 287 342 321 343 358 575"/>
<path style="stroke: #000; fill: #2d3053;" d="m 261,373 v 0 a 5,6 0 0 1 4,6 v 27 h -9 v -27 a 5,6 0 0 1 5,-6 z"/>
<g id="turmrot">
<polygon style="stroke-width: 4px; fill: #c85a2b; stroke: #c85a2b;" points="214 324 303 326 303 296 279 293 238 293 214 296"/>
<polyline id="lichtkegel" style="stroke: #000; fill: url(#verlauf_4);" points="1527 75 280 249 246 250 246 263 281 265 1521 498"/>
<line style="fill: none; stroke-width: 4px; stroke: #c85a2b;" x1="214" y1="298" x2="214" y2="236"/>
<line style="fill: none; stroke-width: 4px; stroke: #c85a2b;" x1="238" y1="293" x2="238" y2="232"/>
<line style="fill: none; stroke-width: 4px; stroke: #c85a2b;" x1="280" y1="294" x2="280" y2="233"/>
<line style="fill: none; stroke-width: 4px; stroke: #c85a2b;" x1="303" y1="299" x2="303" y2="237"/>
<polyline style="fill: none; stroke-width: 4px; stroke: #c85a2b;" points="213 238 238 232 280 232 303 238"/>
</g>
<polygon style="fill: #343345; stroke-width: 4px; stroke: #343345;" points="179 324 232 321 285 321 338 323 338 327 321 343 287 342 236 341 195 342 179 328"/>
<polyline style="fill: none; stroke-width: 4px; stroke: #343345;" points="184 326 184 292 232 286 284 286 331 291 331 326"/>
<line style="fill: none; stroke-width: 4px; stroke: #343345;" x1="284" y1="327" x2="284" y2="286"/>
<line style="fill: none; stroke-width: 4px; stroke: #343345;" x1="232" y1="327" x2="232" y2="286"/>
<path style="stroke-width: 4px; stroke: #343345; fill: #343345;" d="m 202,233 v -11 l 51,-31 3,-12 c -6,0 -8,-11 1,-11 l 1,-6 1,6 c 8,0 9,11 2,11 l 3,11 50,32 v 12 l -9,2 -24,-7 h -44 l -25,6 z"/>
<polyline id="lichtschein" style="stroke: #000; fill: url(#verlauf_5);" points="164 201 267 181 361 213 359 305 264 329 163 309"/>
</g>
<g id="moewen">
<use href="#moewe" width="326" height="146" transform="matrix(1.03, 0, 0, 1.04, 1460, 152)"/>
<use href="#moewe" width="326" height="146" transform="matrix(0.75, 0.06, -0.06, 0.77, 1499, 398)"/>
<use href="#moewe" width="326" height="146" transform="matrix(0.86, 0.2, -0.2, 0.86, 1126, 312)"/>
<use href="#moewe" width="326" height="146" transform="matrix(0.47, 0.098, -0.1, 0.5, 1800, 522)"/>
</g>
<g id="busch" filter="url(#sprenkeln)">
<polyline style="stroke: #000; fill: #505444;" points="-28 361 65 387 110 451 215 439 327 537 -29 508"/>
<polyline style="stroke: #000; fill: #75814e;" points="210 469 312 460 372 524 275 523"/>
</g>
<g id="wellen_hinten" style="opacity: 0.2;">
<polygon style="stroke: #000; fill: #6984af;" points="588 628 603 654 819 651 916 655 1018 650 1240 651 1453 656 1706 648 2000 633 2000 624 1638 639 1178 634 1019 630 927 633 763 633"/>
<path style="stroke: #000; fill: #6984af;" d="m 606,661 16,24 216,-3 97,4 105,-5 170,8 210,8 280,-9 c 170,-2 300,12 300,12 v -46 l -450,18 -330,-3 c -150,-10 -316,-9 -316,-9 0,0 -136,7 -158,1 z"/>
<path style="stroke: #000; fill: #6984af;" d="m 606,708 16,24 216,-3 97,4 105,-5 170,8 210,8 280,-9 c 170,-2 300,12 300,12 v -46 l -450,18 -330,-3 c -150,-10 -316,-9 -316,-9 0,0 -136,7 -158,1 z"/>
<path style="stroke: #000; fill: #6984af;" d="m 1220,1110 c -150,-10 -280,40 -280,40 l 270,-20 210,10 280,-10 c 170,0 300,10 300,10 v -80 l -430,60 c 0,-10 -240,-40 -350,-10 z"/>
</g>
<g id="felsen">
<polyline style="stroke: #000; fill: #45394e;" points="298 522 445 529 464 574 529 577 617 700 793 868 271 862 247 905 0 894 0 515"/>
<g id="felsen_1">
<polyline style="stroke: #000; fill: #26294a;" points="875 790 831 743 784 743 741 755 741 793"/>
<polyline style="stroke: #000; fill: #26294a;" points="764 797 698 695 605 696 706 795"/>
<polyline style="stroke: #000; fill: #26294a;" points="273 556 406 562 484 626 457 639 545 671 583 741 629 764 653 790 559 789"/>
<polyline style="stroke: #000; fill: #26294a;" points="564 843 466 744 405 742 381 697 326 696 281 600 241 562 146 544 239 633 375 849"/>
<polyline style="stroke: #000; fill: #26294a;" points="0 543 86 562 170 605 208 693 307 776 271 772 229 716 134 701 166 747 217 755 266 852 182 817 63 672 0 655"/>
<polyline style="stroke: #000; fill: #26294a;" points="0 706 33 719 95 778 75 788 26 764 66 813 112 816 206 936 0 891"/>
</g>
<g id="felsen_2" style="stroke: #000; fill: #8b584e;">
<polyline points="801 769 793 756 767 754 695 694 737 762 766 774"/>
<polygon points="524 577 557 579 636 696 612 698 681 725 667 734 598 699"/>
<polyline points="447 528 504 653 574 673 597 713 551 672 496 651 420 528"/>
<polygon points="534 791 541 769 512 734 491 731"/>
<polyline points="457 678 429 619 420 630 395 616 426 659"/>
</g>
<g id="wiese">
<polyline style="stroke: #000; fill: #445833;" points="0 544 78 558 166 605 195 617 225 623 157 548 72 524 56 509 0 505"/>
<polyline style="stroke: #000; fill: #374539;" points="297 747 224 622 194 617 236 706"/>
<path style="stroke: #000; fill: #677340;" d="m 56,509 130,16 c 58,10 243,95 243,95 l -31,-1 -101,-31 -17,4 -45,-28 -79,-14 -85,-24"/>
</g>
</g>
<g id="wellen_vorne" style="stroke: #000; fill: #2f5ca2; opacity: 0.4;">
<path d="m 1590,751 200,17 c 130,0 210,21 210,21 v -46 z"/>
<path d="m 2000,815 c -60,29 -310,40 -310,40 l 310,10"/>
<path d="m 1640,802 c -60,19 -190,-35 -230,-36 -50,-1 -240,31 -240,31 160,-9 680,-22 470,5 z"/>
<path d="m 1730,915 c -160,5 -340,-74 -370,-74 -30,0 -170,39 -170,39 110,-11 400,-1 560,-2 120,-1 210,16 250,22 v 36 c -70,2 -240,-25 -270,-21 z"/>
<path d="m 754,975 c 161,-9 896,75 238,-31 -49,-8 -238,31 -238,31 z"/>
<path d="m 1200,1050 c 170,10 680,30 230,-51 -30,-5 -90,31 -230,51 z"/>
<path d="m 1210,1120 c 70,10 680,40 790,40 v -60 c -60,-10 -160,-20 -250,-30 -30,-10 -350,40 -540,50 z"/>
<path d="m 1300,765 c -60,19 -387,24 -430,23 l -14,-15 c 30,-2 35,-25 76,-15 10,2 43,7 88,3 240,-23 280,4 280,4 z"/>
<path d="m 615,1010 c -60,20 -194,-61 -237,-62 -50,-1 -154,19 -154,19 161,-9 596,16 391,43 z"/>
<path d="m 1490,707 370,-1 c 130,0 140,12 140,12 v -29 z"/>
<path d="m 1430,1010 c 170,-10 900,70 240,-32 -50,-8 -240,32 -240,32 z"/>
</g>
<g id="wellen_hell" fill="#8fc5ff" filter="url(#sprenkeln)">
<path d="m 317,890 -114,34 c 44,-2 105,-21 166,-13 122,14 751,189 386,44 -67,-96 -101,-45 -266,-49 -35,-1 20,-30 -172,-16 z"/>
<path d="m 1520,979 c -30,-1 -190,3 -190,3 40,-2 30,4 90,12 120,16 1050,226 380,26 -70,-92 -110,-37 -280,-41 z"/>
<path d="m 450,1010 c -35,0 -330,30 -330,30 44,0 101,-45 162,-40 122,20 578,120 828,150 -143,-40 -495,-130 -660,-140 z"/>
</g>
<g id="wellen_weiss" fill="#fff" filter="url(#sprenkeln)">
<path d="m 793,760 -99,21 c 133,-6 416,-25 496,-29 -90,-4 -40,1 -202,6 -35,1 -3,-12 -195,2 z"/>
<path d="m 716,797 42,40 c 35,-1 47,-11 116,-15 68,-4 21,14 97,10 26,-1 15,-18 49,-16 110,6 340,-18 310,-20 -80,-7 -270,20 -428,16 -35,-1 -103,-15 -186,-15 z"/>
<path d="m 281,841 h -74 c 16,0 -106,64 -77,61 16,-2 62,14 62,14 92,-3 124,-41 143,-36 116,31 168,69 183,26 26,-1 130,43 158,49 289,65 314,-22 285,-16 -221,45 -371,-87 -531,-91 -35,-1 -66,-7 -149,-7 z"/>
<path d="m 1250,959 40,23 c 130,-6 640,58 590,58 -80,-10 -310,-106 -470,-110 -30,-1 20,15 -160,29 z"/>
<path d="m 219,997 310,73 c 133,-10 741,80 691,80 -80,-10 -565,-120 -725,-120 -35,-10 -89,-47 -276,-33 z"/>
<polyline style="fill: none; stroke: #fff; stroke-width: 4px;" points="827 902 904 875 1132 908 1275 955"/>
<polyline style="fill: none; stroke: #fff; stroke-width: 4px;" points="660 999 941 1001 1073 1039 1305 996"/>
<polyline style="fill: none; stroke: #fff; stroke-width: 4px;" points="18 886 155 908"/>
<polyline style="fill: none; stroke: #fff; stroke-width: 9px;" points="507 841 738 851"/>
<polyline style="fill: none; stroke: #fff; stroke-width: 4px;" points="1166 1044 1408 1089 1596 1105 1823 1194"/>
<g id="wellen_weiss_vordergrund" transform="matrix(3.9, 0, 0, 11, -4954, -10425)">
<polyline filter="url(#sprenkeln)" points="1368 1066 1512 1012 1798 1043"/>
</g>
</g>
<g id="vordergrund" filter="url(#unscharf)">
<path style="stroke: #000; fill: #644950;" d="m -20,911 c 223,17 279,159 279,159 196,-96 348,80 348,80 137,-100 403,70 403,70 H -20"/>
<path style="stroke: #000; fill: #2f2c45;" d="m -20,974 c 86,-45 263,116 263,116 109,-70 101,-60 160,20 l 103,70 c 39,40 105,-30 105,-30 0,0 92,-50 118,-10 l 79,80 H -20 Z m 467,226 c 75,-30 -91,-30 -100,-50 10,50 -182,-10 -182,-10 50,50 286,80 282,60 z"/>
<path style="stroke: #000; fill: #755860;" d="m 83,1070 c 50,-30 256,70 256,70 -104,-30 -179,-10 -179,-10 -10,-30 -77,-60 -77,-60 z m 395,90 107,-30 c 60,30 9,20 -23,50 -28,40 -51,10 -84,-20 z"/>
</g>
</g>
</svg>
</body>
</html>
