filter-and-clip.svg

Enable keyboard shortcuts

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">↩

 <defs>↩

  <filter id="shift">↩

   <feOffset dx="50"/>↩

  </filter>↩

  <clipPath id="clip">↩

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

  </clipPath>↩

 </defs>↩

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

 <rect x="50" y="50" width="200" height="100" fill="green" filter="url(#shift)" clip-path="url(#clip)"/>↩

</svg>