conditions-08-ref.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg xmlns="http://www.w3.org/2000/svg">

  <defs>

    <clipPath id="c1">

      <circle cx="50" cy="50" r="50"/>

    </clipPath>

    <mask id="m1">

      <circle cx="50" cy="50" r="50" fill="#888"/>

    </mask>

    <filter id="f1">

      <feColorMatrix type="hueRotate" values="60"/>

    </filter>

    <linearGradient id="l1">

      <stop stop-color="red"/>

      <stop offset="1" stop-color="yellow"/>

    </linearGradient>

    <pattern id="p1" viewBox="0 0 10 10" width="25%" height="25%">

      <circle cx="5" cy="5" r="5" fill="red"/>

    </pattern>

  </defs>

  <g fill="blue">

    <g transform="translate(200,50)">

      <rect width="100" height="100" clip-path="url(#c1)"/>

    </g>

    <g transform="translate(200,160)">

      <rect width="100" height="100" mask="url(#m1)"/>

    </g>

    <g transform="translate(200,270)">

      <rect width="100" height="100" filter="url(#f1)"/>

    </g>

    <g transform="translate(200,380)">

      <rect width="100" height="100" fill="url(#l1)"/>

    </g>

    <g transform="translate(200,490)">

      <rect width="100" height="100" fill="url(#p1)"/>

    </g>

  </g>

</svg>