whiteboard.svg

<svg
  viewBox="0 0 400 300"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="hatch1" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="orange"/>
      <line x1="0" y1="0" x2="0" y2="10" stroke-width="3" stroke="black" />
    </pattern>
    <pattern id="hatch2" width="10" height="10" patternTransform="rotate(-45 0 0)" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="orangered"/>
      <line x1="0" y1="0" x2="0" y2="10" stroke-width="3" stroke="black" />
    </pattern>
    <pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="powderblue"/>
      <circle cx="5" cy="5" r="1" fill="black"/>
    </pattern>
    <!-- basic shapes -->
    <rect id="r1" width="50"  height="300"/>
    <rect id="r2" width="100" height="100" x="300" y="100"/>
    <circle id="c1" cx="150" cy="150" r="150"/>
    <circle id="c2" cx="250" cy="150" r="150"/>
    <!-- difference #1 -->
    <mask id="cs1-m">
      <use href="#c2" fill="white"/>
      <use href="#r2" fill="black"/>
    </mask>
    <use id="cs1" href="#c2" mask="url(#cs1-m)"/>
    <!-- union -->
    <g id="cs2">
      <use href="#c1"/>
      <use href="#cs1"/>
    </g>
    <!-- difference #2 -->
    <mask id="cs3-m">
      <use href="#cs2" fill="white"/>
      <use href="#r1"  fill="black"/>
    </mask>
    <use id="cs3" href="#cs2" mask="url(#cs3-m)"/>
  </defs>


  <use href="#r1"  fill="url(#hatch1)"/>
  <use href="#r2"  fill="url(#hatch2)"/>
  <use href="#cs3" fill="url(#dots)"/>
</svg>