Как исключить фигуры в SVG или холсте?

<svg xmlns = "http://www.w3.org/2000/svg" width = "100" height = "100" viewBox = "0 0 100 100">
  <g>
    <circle id = "2" cx = "50" cy = "50" r = "50"/>
    <g id = "1">
      <rect x = "0" y = "0" width = "50" height = "50" fill = "#ccc"/>
      <rect x = "50" y = "50" width = "50" height = "50" fill = "#ccc"/>
    </g>
  </g>
</svg>

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

  <defs>
    <filter id = "myFilter1">
      <feImage href = "#1" result = "1"/>
      <feImage href = "#2" result = "2"/>
      <feComposite in = "1" in2 = "2" operator = "xor"/>
    </filter>
  </defs>
  
  <g filter = "url(#myFilter1)">
    <circle id = "2" cx = "50" cy = "50" r = "50"/>
    <g id = "1">
      <rect x = "0" y = "0" width = "50" height = "50" fill = "#ccc"/>
      <rect x = "50" y = "50" width = "50" height = "50" fill = "#ccc"/>
    </g>
  </g>
</svg>

const value = (max = 100000000, min = 0) => Math.round(Math.random() * (max - min)) + min;

const createCircle = (size) => {
  const r = value(10, 3);
  const cx = value(size - r - 10, r + 10);
  const cy = value(size - r - 10, r + 10);
  return {
    r,
    cx,
    cy
  }
};

const createCircles = (counts, size) => Array(counts).fill().map(() => createCircle(size));


class App extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        position: {
          x: 0,
          y: 0,
        }
      };

      this.size = 300;

      this.circlesData = createCircles(100, this.size);

      const getCoords = (c, i) => c + (this.state.position.x * 0.002 * c * (i % 2 ? 1 : -1));

      this.circles = () => this.circlesData.map((item, i) => <circle key = {`circles_12dew1_${i}`} cx = {getCoords(item.cx, i)} cy = {getCoords(item.cy, i)} r = {item.r}/>);

    }

    onMouseMove = e => {
      const position = {
        x: e.pageX,
        y: e.pageY,
      };
      this.setState({position});
    }

    render() {
      return (
      <div className = "App" >
        <svg onMouseMove = {this.onMouseMove} ref = {elem => this.svg = elem} xmlns = "http://www.w3.org/2000/svg" width = {this.size} height = {this.size} viewBox = {`0 0 ${this.size} ${this.size}`}>
          
          <defs>
            <filter id = "myFilter1">
             <feImage href = "#1" result = "1"/>
             <feImage href = "#2" result = "2"/>
             <feComposite in  = "1" in2 = "2" operator = "xor"/>
            </filter>
 
          </defs>

          <g id = "3" filter = "url(#myFilter1)" >
            <circle id = "2" cx = {this.size / 2 + 100} cy = {this.size / 2 + 100} r = {this.size / 3}/>
            <g id = "1"> {this.circles()} </g> 
          </g>
        </svg> 
      </div>
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'));

<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>