<div class="background">
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>
  <div class="background__tile"></div>

  <!-- The SVG providing the path and the actual div which gets clipped could be separate. I'm clipping the SVG box itself for conciseness -->
  <svg class="complex-shape" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
    <defs>
      <clipPath id="clipping-shape">
        <path d="m36.438 79.031c-2 1.5-3.9375 2.8438-5.75 4.0312-2.6289-1.5703-5.0547-3.4609-7.2188-5.625-9.4805-9.4805-13.18-23.293-9.7109-36.242 3.4688-12.949 13.582-23.062 26.531-26.531 12.949-3.4688 26.762 0.23047 36.242 9.7109 2.1719 2.1719 4.0625 4.6055 5.625 7.25-1.2188 1.8125-2.5312 3.7188-4.0312 5.7188-5.9023 7.9023-12.391 15.348-19.406 22.281-6.9336 7.0156-14.379 13.504-22.281 19.406zm26.625-15.062c-6.1797 6.207-12.723 12.039-19.594 17.469-2.125 1.6875-4.2188 3.25-6.2812 4.6875 8.9844 3.2617 18.875 2.9688 27.652-0.82031 8.7734-3.7891 15.77-10.785 19.559-19.562 3.7891-8.7734 4.082-18.664 0.82031-27.648-1.4688 2.0625-3.0312 4.1562-4.6562 6.25-5.4414 6.8828-11.285 13.434-17.5 19.625zm-38.25 22.719c-8.1875 4.6562-13.625 5.9062-15.062 4.4688s-0.1875-6.8438 4.4688-15.031c-1.3711-1.9453-2.5703-4.0078-3.5938-6.1562-6.9688 11.219-9.9062 20.844-5.2188 25.531 1.6641 1.5742 3.8984 2.3984 6.1875 2.2812 5.0938 0 11.906-2.8438 19.375-7.4688 2.0312-1.25 4.0938-2.6562 6.2188-4.1875-2.2695-0.78906-4.4453-1.8164-6.5-3.0625-2.0938 1.375-4.0625 2.5938-5.875 3.625zm69.781-80.375c-4.0938-4.0938-12.125-2.6562-23.844 4.25-0.53125 0.3125-1.0938 0.65625-1.625 1 2.1172 1.0117 4.1484 2.2031 6.0625 3.5625 3.9414-2.6719 8.4609-4.3672 13.188-4.9375 0.66016-0.058594 1.3203 0.10547 1.875 0.46875 1.4375 1.4375 0.1875 6.875-4.4688 15.062-1.0312 1.8438-2.25 3.8125-3.625 5.9062 1.2461 2.043 2.2734 4.2109 3.0625 6.4688 1.5-2.125 2.9062-4.2188 4.1562-6.25 6.9688-11.219 9.9062-20.844 5.2188-25.531z" />
        <text x="0.0" y="117.5" font-size="5.0" font-weight="bold" font-family="Arbeit Regular, Helvetica, Arial-Unicode, Arial, Sans-serif">Created
          by Ricons</text>
        <text x="0.0" y="122.5" font-size="5.0" font-weight="bold" font-family="Arbeit Regular, Helvetica, Arial-Unicode, Arial, Sans-serif">from
          Noun Project</text>
      </clipPath>
    </defs>
  </svg>

  <div class="simple-rect">
    Scroll down! 🚀 <br />
  </div>
</div>

/* See the complete explanation on
https://movingparts.dev/posts/mix-blend-mode-black-white-only */

.complex-shape {
  width: 6.875rem; // Warning: this has to be really precise!

  /* Magic happens here */
  mix-blend-mode: difference;
  backdrop-filter: grayscale(1) contrast(100);
  clip-path: url(#clipping-shape);
  background-color: white;

  /* Layout stuff */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
}

.simple-rect {
  position: fixed;
  bottom: 5%;
  right: 5%;
  /* No need to clip path for a simple rect */

  backdrop-filter: grayscale(1) contrast(100);
  mix-blend-mode: difference;
  background-color: white;
  color: black;
  padding: 0.6rem 1rem;
  text-align: center;
}

/* Courtesy of TailwindCSS */
:root {
  --color-blue-50: oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.059 254.128);
  --color-blue-300: oklch(0.809 0.105 251.813);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-800: oklch(0.424 0.199 265.638);
  --color-blue-900: oklch(0.379 0.146 265.522);
  --color-blue-950: oklch(0.282 0.091 267.935);
}

body {
  background-color: white;
  font-family: sans-serif;
}

.background {
  &__tile {
    width: 100%;
    height: 10rem;

    &:nth-child(even) {
      background-color: var(--color-blue-300);
    }
    &:nth-child(odd) {
      background-color: var(--color-blue-600);
    }
  }
}