pattern-transform-presence-01-ref.svg

Enable keyboard shortcuts

Checkerboard

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">

<defs>

  <pattern id="patternRotated" width="1" height="1"

    patternTransform="rotate(45 50 50)">

    <rect width="50" height="50" fill="blue"/>

    <rect x="50" width="50" height="50" fill="red"/>

    <rect y="50" width="50" height="50" fill="red"/>

    <rect x="50" y="50" width="50" height="50" fill="blue"/>

  </pattern>

  <pattern id="patternNotRotated" width="1" height="1">

    <rect width="50" height="50" fill="blue"/>

    <rect x="50" width="50" height="50" fill="red"/>

    <rect y="50" width="50" height="50" fill="red"/>

    <rect x="50" y="50" width="50" height="50" fill="blue"/>

  </pattern>

</defs>

<rect width="100" height="100" stroke="black" fill="url(#patternRotated)"/>

<g transform="translate(100)">

  <rect width="100" height="100" stroke="black" fill="url(#patternRotated)"/>

</g>

<g transform="translate(200)">

  <rect width="100" height="100" stroke="black" fill="url(#patternNotRotated)"/>

</g>

</svg>