<!DOCTYPE html>
<html>
<body>

<div style="position: relative; left: 27px; width: 100px;">
<div style="width: 50px;">
  <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="pattern" width="100" height="100" patternUnits="userSpaceOnUse">
        <circle cx="50" cy="50" r="50" fill="green"/>
      </pattern>

      <mask id="mask">
        <circle cx="50" cy="50" r="50" fill="white"/>
      </mask>

      <clipPath id="clip">
        <circle cx="50" cy="50" r="50"/>
        <circle cx="50" cy="50" r="50"/>
      </clipPath>

      <filter id="filter">
        <feOffset dx="0" dy="0"/>
      </filter>
    </defs>

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

    <g transform="translate(300)">
      <rect width="100" height="100" fill="url(#pattern)"></rect>
    </g>

    <g transform="translate(150 150)">
      <rect width="100" height="100" fill="green" mask="url(#mask)"/>
    </g>

    <g transform="translate(0 300)">
      <rect width="100" height="100" fill="green" clip-path="url(#clip)"/>
    </g>

    <g transform="translate(300 300)">
      <circle cx="50" cy="50" r="50" fill="green" filter="url(#filter)"/>
    </g>
  </svg>
</div>
</div>
</body>
</html>
