spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/filters/paper-cutout.html7  Desc   : Layered paper cut-out depth from stacked feDropShadow8  ============================================================9-->10<!--svgarden11title: Paper cutout12slug: paper-cutout13category: filters14tags: [filter, paper, layers, depth]15difficulty: intermediate16techniques: [feDropShadow, layered-composition, translucent-stacking, drift-animation]17how_it_works: >18  Each wavy layer carries its own feDropShadow filter, and the offsets grow19  with depth — 1.5px of shadow for the top sheet, 6px for the deepest — which20  is exactly how physically stacked paper casts light, so the eye reads21  elevation without any 3D transform. The sheets share one fill color and22  differ only in opacity; where translucent layers overlap they compound into23  darker shades, giving a free tonal ramp that adapts to any background. A slow24  horizontal drift at a different speed per layer keeps the parallax alive so25  the depth reads even in peripheral vision.26customizable:27  - { var: "--sg-color",    label: "Paper", type: color, default: "#7F77DD" }28  - { var: "--sg-size",     label: "Width", type: range, min: 160, max: 400, default: 250, unit: px }29  - { var: "--sg-duration", label: "Drift", type: range, min: 2, max: 12, step: 0.5, default: 6, unit: s }30created: 2026-08-1031-->32<div class="sg-paper-cutout" style="--sg-color:#7F77DD; --sg-size:250px; --sg-duration:6s;">33  <svg viewBox="0 0 240 140" aria-hidden="true" focusable="false">34    <defs>35      <filter id="sg-paper-cutout-s1"><feDropShadow dx="0" dy="1.5" stdDeviation="1.5" flood-opacity="0.3" /></filter>36      <filter id="sg-paper-cutout-s2"><feDropShadow dx="0" dy="2.5" stdDeviation="2.5" flood-opacity="0.3" /></filter>37      <filter id="sg-paper-cutout-s3"><feDropShadow dx="0" dy="4" stdDeviation="3.5" flood-opacity="0.3" /></filter>38      <filter id="sg-paper-cutout-s4"><feDropShadow dx="0" dy="6" stdDeviation="5" flood-opacity="0.3" /></filter>39    </defs>40    <path class="sg-paper-cutout-l1" filter="url(#sg-paper-cutout-s1)"41      d="M-20 52 C 30 30, 90 66, 130 48 C 170 32, 210 52, 260 40 V150 H-20 Z" />42    <path class="sg-paper-cutout-l2" filter="url(#sg-paper-cutout-s2)"43      d="M-20 78 C 40 60, 90 94, 140 76 C 185 62, 215 82, 260 70 V150 H-20 Z" />44    <path class="sg-paper-cutout-l3" filter="url(#sg-paper-cutout-s3)"45      d="M-20 102 C 35 88, 95 118, 145 100 C 190 86, 220 106, 260 96 V150 H-20 Z" />46    <path class="sg-paper-cutout-l4" filter="url(#sg-paper-cutout-s4)"47      d="M-20 124 C 45 112, 100 136, 150 122 C 195 110, 225 128, 260 120 V150 H-20 Z" />48  </svg>49</div>50<style>51  .sg-paper-cutout {52    width: var(--sg-size);53  }54  .sg-paper-cutout svg {55    display: block;56    width: 100%;57    overflow: hidden;58  }59  .sg-paper-cutout path {60    fill: var(--sg-color);61    animation: sg-paper-cutout-drift var(--sg-duration) ease-in-out infinite alternate;62  }63  .sg-paper-cutout-l1 { opacity: 0.32; }64  .sg-paper-cutout-l2 { opacity: 0.5;  animation-duration: calc(var(--sg-duration) * 1.35); }65  .sg-paper-cutout-l3 { opacity: 0.72; animation-duration: calc(var(--sg-duration) * 1.7); }66  .sg-paper-cutout-l4 { animation-duration: calc(var(--sg-duration) * 2.1); }67  @keyframes sg-paper-cutout-drift {68    from { transform: translateX(-5px); }69    to   { transform: translateX(5px); }70  }71</style>72