skew-1-ref.svg - mozsearch

Enable keyboard shortcuts

Checkerboard

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

     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>

    <g id="smiley">

      <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"

        r="40"/>

      <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"

        r="14"/>

      <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"

        r="14"/>

      <circle cx="-10" cy="-14" r="4"/>

      <circle cx="10" cy="-14" r="4"/>

      <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>

    </g>

  </defs>

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

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

  <g transform="translate(150 50)">

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

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

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

  <g transform="translate(50 150)">

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

  <g transform="translate(150 150)">

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

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

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

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

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

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

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

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

    <use xlink:href="#smiley" transform="skewX(30)"/>

  </g>

</svg>