<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="circleClip1">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
    <clipPath id="circleClip2">
      <circle cx="50" cy="150" r="0"/>
    </clipPath>
    <clipPath id="circleClip3">
      <circle cx="50" cy="250" r="0"/>
    </clipPath>
  </defs>
  <rect id="cp1" x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#circleClip1)"/>
  <rect id="cp2" x="0" y="100" width="100" height="100" fill="blue"/>
  <rect id="cp3" x="0" y="200" width="100" height="100" fill="blue"/>
</svg>