Tryit Editor v1.8

Source Code:
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="MyGrad" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="500" y2="0"> <stop offset="0" style="stop-color:#ff00ff" /> <stop offset=".33" style="stop-color:#88ff88" /> <stop offset=".67" style="stop-color:#2020ff" /> <stop offset="1" style="stop-color:#d00000" /> </linearGradient> <filter id="Matrix"> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <filter id="Saturate"> <feColorMatrix type="saturate" values="0.4" /> </filter> <filter id="HueRotate"> <feColorMatrix type="hueRotate" values="90" /> </filter> <filter id="Luminance"> <feColorMatrix type="luminanceToAlpha" result="a" /> <feComposite in="SourceGraphic" in2="a" operator="in" /> </filter> </defs> <g style="font-size:50;fill:url(#MyGrad)"> <text x="50" y="60">Unfiltered</text> <text x="50" y="120" filter="url(#Matrix)">Matrix</text> <text x="50" y="180" filter="url(#Saturate)">Saturate</text> <text x="50" y="240" filter="url(#HueRotate)">HueRotate</text> <text x="50" y="300" filter="url(#Luminance)">Luminance</text> </g> </svg> </body> </html>
Result:
W3Schools.com - Try it yourself