HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> rect{ fill: url(#rainbow); } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.3" stop-color="#ffff00"></stop> <stop offset="0.6" stop-color="#00ff00"></stop> <stop offset="0.9" stop-color="#800080"></stop> </linearGradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="identity"></feFuncR> <feFuncG type="identity"></feFuncG> <feFuncB type="identity"></feFuncB> <feFuncA type="identity"></feFuncA> </feComponentTransfer> </filter> <filter id="table" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 0 1 1"></feFuncR> <feFuncG type="table" tableValues="1 1 0 0"></feFuncG> <feFuncB type="table" tableValues="0 1 1 0"></feFuncB> </feComponentTransfer> </filter> <filter id="linear" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR> <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG> <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB> </feComponentTransfer> </filter> <filter id="gamma" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR> <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG> <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB> </feComponentTransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="5%">Default</text> <rect x="0" y="8%" width="100%" height="20"></rect> <text x="0" y="26%">Identity</text> <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect> <text x="0" y="47%">Table lookup</text> <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect> <text x="0" y="68%">Linear function</text> <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="89%">Gamma function</text> <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> </body> </html>
OUTPUT
×

Save as Private