Beispiel:SVG-Anwendung-text-17.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
svg {
width: 96%;
height: 600px;
}
text {
font-family: serif;
font-size: 250px;
}
</style>
<title>SVG-Texteffekt-17</title>
</head>
<body>
<h1>SVG-Texteffekt mit feTurbulence</h1>
<svg viewBox="0 0 880 400">
<defs>
<filter id="spray" filterUnits="userSpaceOnUse" x="0" y="-100" >
<feTurbulence
type="fractalNoise"
baseFrequency="1.95"
numOctaves="4"
seed="11865"
stitchTiles="noStitch" />
<feComponentTransfer result="in2">
<feFuncR type="linear" slope="2" intercept="-0.7" />
<feFuncG type="linear" slope="1.5" intercept="-0.5" />
<feFuncB type="linear" slope="1.5" intercept="-0.5" />
<feFuncA type="linear" slope="0" intercept="1" />
</feComponentTransfer>
<feDisplacementMap in="SourceGraphic" in2="in2" result="V"
scale="20"
xChannelSelector="R"
yChannelSelector="G" />
</filter>
</defs>
<g filter="url(#spray)">
<text fill="#c32e04" transform="translate(10,75)">Spray it!</text>
<text stroke-width="12" stroke="blue" fill="yellow" transform="translate(10,300)">Spray it!</text>
</g>
</svg>
</body>
</html>