feTurbulence-offset-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">

  <!--

    Place the filtered rect and the filter region at (0, 0) in user space.

    Remove the filter output before (50, 50) using a clipPath.

-->

  <filter id="f" x="0%" y="0%" width="100%" height="100%">

    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence>

  </filter>

  <clipPath id="clip-top-left">

    <rect x="50" y="50" width="100" height="100"/>

  </clipPath>

  <rect x="0" y="0" width="150" height="150" filter="url(#f)" clip-path="url(#clip-top-left)"/>

</svg>