feComposite-paint-01.svg

Enable keyboard shortcuts

Checkerboard

<svg id="svg-root" width="100%" height="100%"

  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"

  xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">

  <defs>

    <filter id="composite-ident" x="0" y="0" width="1" height="1">

      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/>

    </filter>

    <filter id="composite-negative" x="0" y="0" width="1" height="1">

      <feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/>

    </filter>

    <filter id="composite-mixed" x="0" y="0" width="1" height="1">

      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/>

    </filter>

    <filter id="composite-clamped" x="0" y="0" width="1" height="1">

      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/>

    </filter>

  </defs>

  <g transform="translate(100 30)">

    <rect fill="lime" width="120" height="120"/>

    <rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/>

  </g>

  <g transform="translate(250 30)">

    <rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/>

    <rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>

  </g>

  <g transform="translate(100 180)">

    <rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/>

    <rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>

  </g>

  <g transform="translate(250 180)">

    <rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/>

    <rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>

  </g>

</svg>