Considering the following example:

  path {
            transform-origin: 50% 0%;
        }
        @keyframes path0 {
            0% {
                transform: rotate(-10deg);
            }
            100% {
                transform: rotate(10deg);
            }
        }
        @keyframes path1 {
            0% {
                transform: rotate(-30deg);
            }
            100% {
                transform: rotate(30deg);
            }
        }
        @keyframes path2 {
            0% {
                transform: rotate(40deg);
            }
            100% {
                transform: rotate(-40deg);
            }
        }
        .background--custom {
            height: 100%;
            width: 100%;
            background-color: red;
        }

<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path fill="#D6D6D6" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path0 5s linear infinite alternate;" />
        <path fill="#DEFFFF" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path1 5s linear infinite alternate;" />
        <path fill="#DAFFF5" fill-opacity="1" d="M-100 -100L200 -100L200 20L-100 20Z" style="animation: path2 5s linear infinite alternate;" />
    </svg>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This creates an animates SVG background. It looks like this:

Its simply a few lines that rotate.

The goal is to cut a rectangle hole in the whole SVG, causing a section of the SVG to be transparent. Considering the black rectangle would be the hole, it should look something like this:

Is this in any way possible? I have tried using mask elements but I dont see how I can apply those mask elements to the whole SVG and not just single path element.

CodePudding user response：

Here I made a <mask> on a <g> element that has a white <rect> in the background and a black <rect> in the foreground. The black square makes the group transparent. The result is that you can see the red color in the background -- I don't know if that was the point?

path {
  transform-origin: 50% 0%;
}

@keyframes path0 {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes path1 {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes path2 {
  0% {
    transform: rotate(40deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}

.background--custom {
  height: 100%;
  width: 100%;
  background-color: red;
}

<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <mask id="mask01">
      <rect width="100" height="100" fill="white"/>
      <rect width="60" height="60" x="20" y="40" fill="black"/>
    </mask>
  </defs>
  <g mask="url(#mask01)">
    <path fill="#D6D6D6" fill-opacity="1"
      d="M-100 -100L200 -100L200 50L-100 50Z"
      style="animation: path0 5s linear infinite alternate;" />
    <path fill="#DEFFFF" fill-opacity="1"
      d="M-100 -100L200 -100L200 50L-100 50Z"
      style="animation: path1 5s linear infinite alternate;" />
    <path fill="#DAFFF5" fill-opacity="1"
      d="M-100 -100L200 -100L200 20L-100 20Z"
      style="animation: path2 5s linear infinite alternate;" />
  </g>
</svg>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>