<svg xmlns="http://www.w3.org/2000/svg"> <title></title> <linearGradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </linearGradient> <!-- Comparison for calcMode="linear". --> <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 2 2 0"/> </feComponentTransfer> </filter> <rect x="20" y="20" width="256" height="20" fill="url(#gradient)" filter="url(#f_calcMode_linear_to)"/> <!-- Comparison for 'by' animation. --> <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 2 2 0"/> </feComponentTransfer> </filter> <rect x="20" y="60" width="256" height="20" fill="url(#gradient)" filter="url(#f_calcMode_linear_by)"/> <!-- Comparison for calcMode="paced". --> <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 2 2 0"/> </feComponentTransfer> </filter> <rect x="20" y="100" width="256" height="20" fill="url(#gradient)" filter="url(#f_calcMode_paced)"/> <!-- Comparison for calcMode="discrete". --> <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 2 2 0"/> </feComponentTransfer> </filter> <rect x="20" y="140" width="256" height="20" fill="url(#gradient)" filter="url(#f_calcMode_discrete)"/> </svg>