<div class="block">
  <svg class="block__bg">
    <defs>
      <mask id="bg-mask">
        <rect width="100%" height="100%" fill="#fff" />
        <!-- top -->
        <svg width="100%" height="100%" preserveAspectRatio="xMidYMin meet" viewBox="0 0 1500 100">
          <path d="M1502 -2H-2V100H0V60C0 31.7157 0 17.5736 8.7868 8.7868C17.5736 0 31.7157 0 60 0H1440C1468.28 0 1482.43 0 1491.21 8.7868C1500 17.5736 1500 31.7157 1500 59.9999V100H1502V-2Z" fill="#000" />
        </svg>

        <!-- bottom -->
        <svg width="100%" height="100%" preserveAspectRatio="xMidYMax meet" viewBox="0 0 1500 358">
          <path d="M0 0V298C0 326.284 0 340.426 8.7868 349.213C17.5735 358 31.7155 358 59.9994 358H1158.79C1184.51 358 1197.36 358 1208.81 353.024C1220.25 348.047 1229.02 338.645 1246.55 319.841L1246.55 319.84L1467.76 82.6287C1483.69 65.551 1491.65 57.0122 1495.82 46.4134C1500 35.8146 1500 24.1391 1500 0.788208V0L1502 0V360H-2V0L0 0Z" fill="#000" />
        </svg>
      </mask>

      <pattern id="noize" viewBox="0 0 626 626" width="626" height="626" patternUnits="userSpaceOnUse">
        <image width="626" height="626" href="https://img.freepik.com/free-photo/noisy-background_1194-7547.jpg" />
      </pattern>
    </defs>

    <g mask="url(#bg-mask)">
      <rect width="100%" height="100%" fill="#311c54" />
      <rect width="100%" height="100%" fill="url(#noize)" style="mix-blend-mode: overlay" />
    </g>
  </svg>

  <div class="block__content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eaque harum adipisci, officiis maiores cupiditate culpa deleniti neque eligendi nihil repellat sint repudiandae voluptas quo? Sit at dicta labore esse adipisci expedita vel sed a architecto aperiam alias impedit enim magni ullam, maxime quos consectetur omnis cum iure, mollitia numquam amet inventore voluptas. Cupiditate magnam esse magni voluptates labore officia fugit doloribus beatae, error autem hic, atque ad mollitia rem consequuntur ipsam quasi iusto quisquam nisi aspernatur, iste nobis aliquam quibusdam. Unde, voluptatum itaque in consequatur alias inventore amet doloremque natus laboriosam quibusdam, corrupti suscipit qui quod beatae, dolores earum.
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 10px;
  background:
    linear-gradient(to right, #0001 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, #0001 1px, transparent 1px) 0 0 / 8px 8px;
}

.block {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  z-index: 0;
}

.block__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.block__content {
  font-size: 1.5rem;
  padding: 1em;
  color: #fff;
}