anim-feFuncR-tableValues-01-ref.svg

Enable keyboard shortcuts

Checkerboard

<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>