How to use clip-path to remove, or punch through the gradient?

Question

How would I use clip-path to make the middle part empty?

That is all I am trying to do here.

Remove the middle part completely.

Where there is a red circle, make that part completely empty.

https://jsfiddle.net/fmuqhaxt/

.fence {
  width: 640px;
  height: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(45deg,
      #0000 7px,
      blue 0 7.5px,
      #0000 0 10px),
    linear-gradient(-45deg,
      #0000 7px,
      blue 0 7.5px,
      #0000 0 10px);
  background-size: 10px 10px;
}

.circle {
  border-radius: 50%;
  width: 90px;
  height: 90px;
  background:
    linear-gradient(45deg,
      #0000 7px,
      red 0 7.5px,
      #0000 0 10px),
    linear-gradient(-45deg,
      #0000 7px,
      red 0 7.5px,
      #0000 0 10px);
  background-size: 10px 10px;
}

<div class="fence">
  <div class="circle">
  </div>
</div>