<section class="first">
  <svg class="first__bg"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <defs>
      <linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="100%">
        <stop offset="0" stop-color="#662d91"/>
        <stop offset="1" stop-color="#93278f"/>
      </linearGradient>

      <mask id="mask-bottom">
        <rect width="100%" height="100%" fill="#fff"/>
        <svg viewBox="0 0 1480 160" width="100%" height="100%" preserveAspectRatio="xMidYMax meet">
          <circle cx="740" cy="1872" r="1865" fill="#000"/>
        </svg>
      </mask>
    </defs>

    <g mask="url(#mask-bottom)">
      <rect width="100%" height="100%" fill="#242424"/>
      
      <!-- left side -->
      <svg x="0" width="12.15%" height="1286.38"
           viewBox="0 0 179.68 1286.38"
           preserveAspectRatio="xMinYMin meet">
        <g fill="url(#linear-gradient)">
          <path d="M0,798.92c92.23-43.74,205.85,95.46,135.32,173.82-31.54,35-110.43,68-135.32,70.16Z"/>
          <path d="M0,0C27.47,12.69,62.23,18.22,82.81,40.39c54.22,58.41,7.75,182.72-68.69,196C8.91,236.16,0,235.44,0,233.44Z"/>
          <path d="M0,397c50.23-37.34,92.23-18.43,132.16,12,17.42,13.29,73.41,56.37,33.42,71.5-21.41,8.1-44.53,4.42-66.8,2.63-17.85-1.43-34-9.33-52.57-9.27C15.53,474,9.51,542.45,0,560.94Z"/>
          <path d="M0,1193.88c21.42-5.79,39.53-21.16,60.15-29.61,66.92-27.44,100.56-18.89,56,50.64-28.53,44.48-62.38,81.63-116.12,69C0,1254.28,0,1223.68,0,1193.88Z"/>
          <path d="M74.22,1122.11c-26.79.17-35-26.45-32.13-44.32.55-3.46,8.58-5.85,16-8.42,29.86-10.27,5.09-34.72,32.61-35.69,26.1-.91,47.53,24.06,43.93,49.83C131.47,1106.4,88,1122,74.22,1122.11Z"/>
          <path d="M133.07,560.51c.57,16.64-21.07,41.71-36.27,28.24-5.45-4.83-6.08-14.11-11-18.6-11.53-10.58-22.46-10.82-24.41-26.7-3.21-26.17,22.63-51.27,34.3-24.05C106.32,544.11,131.86,525.3,133.07,560.51Z"/>
        </g>
      </svg>
      
      <!-- right side -->
      <svg x="87.85%" width="12.15%" height="1454.75"
           viewBox="0 0 193.6 1454.75"
           preserveAspectRatio="xMaxYMin meet">
        <g fill="url(#linear-gradient)">
          <path d="M193.6,26.85v228c-38.52-2.08-73.84-22-107.36-39.84C-24.44,156.12,33.11,57.29,72.69,27.49,102.23,5.24,141.21-10.16,175,8,184.64,13.19,193.45,20.11,193.6,26.85Z"/>
          <path d="M193.6,784.77C44.5,862.12-5.32,725.63,22.54,677.81,36.11,654.51,74,660.27,95.14,642,128.6,612.92,106,583,127.63,565c15.25-12.7,66,.82,66,.82Z"/>
          <path d="M193.6,1096.74c-21.49,9.45-43.84,1.6-62.78-11.27C68.73,1043.28,56,936.43,102.43,899c26.35-21.26,63.68-24,91.17-44.22Z" fill="url(#linear-gradient-3)"/>
          <path d="M193.6,1448.7c-11.15-10.78-15.3-26.11-20.08-40.38-8.85-26.39-13.6-57.75-28-66.53-16.15-9.82-35.14,1.13-52.3,3.3-26.55,3.35-57.32,7.53-79.65-1-56.19-21.58,79.07-103.63,103.75-103.27,27.48.41,76.31,24.51,76.31,38.75Z"/>
          <path d="M193.6,490.8C127.85,508.74,99.28,478.31,67.05,431c-67.48-99,19.55-75.92,78-43.91,15.39,8.42,30.93,24.54,48.52,11.71Z"/>
          <path d="M104.94,332.48C3.34,312.93,52,241.19,89.41,243.86c24.17,1.73,8.9,21.79,23,31,7.63,4.95,19.8,4.34,24,11.8C146.64,304.88,126.81,336.69,104.94,332.48Z"/>
          <path d="M46.55,1423.78c-1.23-36.23,30.52-18.83,38.56-44.08,4.57-14.35,18.11-8.84,25.36-.4s9.19,21.1,7.2,31.5c-2.68,13.92-20.11,14.68-25.43,24.41C72.41,1471.51,47.48,1451.06,46.55,1423.78Z"/>
        </g>
      </svg>
    </g>
  </svg>

  <div class="first__content container">
    1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum et, hic, eaque accusamus sint maiores labore libero rerum deleniti amet, eveniet incidunt possimus ipsam harum sunt vitae architecto impedit aliquam vero. Quia quaerat eveniet ab nisi, laudantium, ipsum ipsa nostrum. Nam esse, molestiae molestias similique voluptas autem id magni natus omnis deleniti, ratione quisquam neque mollitia deserunt dicta et rem cum aut? Id nemo cum perferendis quos eos voluptate voluptatem suscipit, sequi veritatis tempora et tenetur nulla mollitia quo ad sint illum vel debitis? Dolorem molestias in labore debitis quis exercitationem ad quas, omnis culpa. Accusamus perspiciatis vero quidem dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum et, hic, eaque accusamus sint maiores labore libero rerum deleniti amet, eveniet incidunt possimus ipsam harum sunt vitae architecto impedit aliquam vero. Quia quaerat eveniet ab nisi, laudantium, ipsum ipsa nostrum. Nam esse, molestiae molestias similique voluptas autem id magni natus omnis deleniti, ratione quisquam neque mollitia deserunt dicta et rem cum aut? Id nemo cum perferendis quos eos voluptate voluptatem suscipit, sequi veritatis tempora et tenetur nulla mollitia quo ad sint illum vel debitis? Dolorem molestias in labore debitis quis exercitationem ad quas, omnis culpa. Accusamus perspiciatis vero quidem dolorum.
  </div>
</section>

<section class="second">
  <div class="second__content container">
    2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dignissimos maxime aliquid, tenetur repellendus beatae recusandae aperiam nemo facere ipsam! Nobis, magni totam tempora architecto odit, assumenda delectus amet quam corporis, dolores debitis sequi repellat nesciunt quasi! Autem animi dicta aut porro, earum enim, laborum libero voluptatum, magnam velit iure praesentium suscipit molestias repudiandae quaerat aliquam omnis nemo tenetur placeat repellat eius hic accusamus. In veritatis cum atque ratione rem suscipit, provident libero quos, amet fugit quaerat repudiandae omnis nemo necessitatibus, beatae obcaecati iste architecto, consequuntur impedit vero est modi itaque quia ad! Itaque soluta obcaecati, ullam atque, cumque totam.
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.first {
  position: relative;
  color: #fff;
  z-index: 0;
  padding: 15px 15px 11%;
}

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

.second {
  color: #fff;
  padding: 11% 15px 15px;
  margin-top: -11%;
  background-color: #242424;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23662d91' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.container {
  margin: 0 auto;
  max-width: 576px;
}