Paper cutout

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/paper-cutout.html
  Desc   : Layered paper cut-out depth from stacked feDropShadow
  ============================================================
-->
<div class="sg-paper-cutout" style="--sg-color:#7F77DD; --sg-size:250px; --sg-duration:6s;">
  <svg viewBox="0 0 240 140" aria-hidden="true" focusable="false">
    <defs>
      <filter id="sg-paper-cutout-s1"><feDropShadow dx="0" dy="1.5" stdDeviation="1.5" flood-opacity="0.3" /></filter>
      <filter id="sg-paper-cutout-s2"><feDropShadow dx="0" dy="2.5" stdDeviation="2.5" flood-opacity="0.3" /></filter>
      <filter id="sg-paper-cutout-s3"><feDropShadow dx="0" dy="4" stdDeviation="3.5" flood-opacity="0.3" /></filter>
      <filter id="sg-paper-cutout-s4"><feDropShadow dx="0" dy="6" stdDeviation="5" flood-opacity="0.3" /></filter>
    </defs>
    <path class="sg-paper-cutout-l1" filter="url(#sg-paper-cutout-s1)"
      d="M-20 52 C 30 30, 90 66, 130 48 C 170 32, 210 52, 260 40 V150 H-20 Z" />
    <path class="sg-paper-cutout-l2" filter="url(#sg-paper-cutout-s2)"
      d="M-20 78 C 40 60, 90 94, 140 76 C 185 62, 215 82, 260 70 V150 H-20 Z" />
    <path class="sg-paper-cutout-l3" filter="url(#sg-paper-cutout-s3)"
      d="M-20 102 C 35 88, 95 118, 145 100 C 190 86, 220 106, 260 96 V150 H-20 Z" />
    <path class="sg-paper-cutout-l4" filter="url(#sg-paper-cutout-s4)"
      d="M-20 124 C 45 112, 100 136, 150 122 C 195 110, 225 128, 260 120 V150 H-20 Z" />
  </svg>
</div>
<style>
  .sg-paper-cutout {
    width: var(--sg-size);
  }
  .sg-paper-cutout svg {
    display: block;
    width: 100%;
    overflow: hidden;
  }
  .sg-paper-cutout path {
    fill: var(--sg-color);
    animation: sg-paper-cutout-drift var(--sg-duration) ease-in-out infinite alternate;
  }
  .sg-paper-cutout-l1 { opacity: 0.32; }
  .sg-paper-cutout-l2 { opacity: 0.5;  animation-duration: calc(var(--sg-duration) * 1.35); }
  .sg-paper-cutout-l3 { opacity: 0.72; animation-duration: calc(var(--sg-duration) * 1.7); }
  .sg-paper-cutout-l4 { animation-duration: calc(var(--sg-duration) * 2.1); }
  @keyframes sg-paper-cutout-drift {
    from { transform: translateX(-5px); }
    to   { transform: translateX(5px); }
  }
</style>