如何在css中制作这个背景？

body {
  margin: 0;
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: -10000;
}

.background path {
  fill: lightblue;
}

.content {
  width: 600px;
  margin: auto;
}

.content p {
  margin: 30px auto;
  font-size: 20px;
  font-family: sans-serif;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deleniti inventore animi in dolorum praesentium ducimus magnam? Magni, est incidunt iste reiciendis eos ipsam non itaque dolore quod commodi delectus.</p>
  <p>Corporis nisi tempore vitae similique? Dolor nam praesentium nisi. Totam illum odit quod atque, non consectetur suscipit numquam fuga voluptatum possimus! Itaque at quaerat quibusdam ullam modi magnam eius quos.</p>
  <p>Quidem nostrum non recusandae facere ducimus voluptatum esse nisi. Dignissimos recusandae nam voluptates minus eos perspiciatis, cupiditate tempore ea placeat qui ipsa hic! Eligendi, ex quis. Facilis magni commodi est!</p>
  <p>Cumque, excepturi. Beatae inventore perspiciatis ratione temporibus ipsa quae aspernatur dicta ipsam magni commodi, necessitatibus adipisci animi. Rem ipsa eum minus inventore unde, fugit corrupti officiis beatae voluptate vitae facere!</p>
</div>


<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deleniti inventore animi in dolorum praesentium ducimus magnam? Magni, est incidunt iste reiciendis eos ipsam non itaque dolore quod commodi delectus.</p>
  <p>Corporis nisi tempore vitae similique? Dolor nam praesentium nisi. Totam illum odit quod atque, non consectetur suscipit numquam fuga voluptatum possimus! Itaque at quaerat quibusdam ullam modi magnam eius quos.</p>
  <p>Quidem nostrum non recusandae facere ducimus voluptatum esse nisi. Dignissimos recusandae nam voluptates minus eos perspiciatis, cupiditate tempore ea placeat qui ipsa hic! Eligendi, ex quis. Facilis magni commodi est!</p>
  <p>Cumque, excepturi. Beatae inventore perspiciatis ratione temporibus ipsa quae aspernatur dicta ipsam magni commodi, necessitatibus adipisci animi. Rem ipsa eum minus inventore unde, fugit corrupti officiis beatae voluptate vitae facere!</p>
</div>

<svg viewBox="0 0 10 1" class="background">
 <path d="M0,0 0,1 0.18,1"/>
 <path d="M0,0 0.24,1 0.6,1"/>
 <path d="M0,0 0.75,1 1.2,1"/>
 <path d="M0,0 1.3,1 2,1"/>
 <path d="M0,0 2.3,1 3.2,1"/>
 <path d="M0,0 3.5,1 6.5,1"/>
 <path d="M0,0 9,1 17,1"/>
</svg>

* {
  margin: 0;
  padding: 0;
}

body:before {
  z-index: -1;
  content: "";
  display: block;
  position: fixed;
  top: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: lightblue;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 80%);
  background-image: repeating-radial-gradient(center center, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 80%);
  -webkit-background-size: 3px 3px;
  background-size: 3px 3px;
  clip-path: polygon( 40% 0%, 100% 0%, 100% 10%, 40% 0%, 22% 0%, 100% 20%, 100% 50%, 12% 0%, 9% 0%, 100% 80%, 100% 100%, 80% 100%, 7% 0%, 5% 0%, 50% 100%, 20% 100%, 3% 0%, 1% 0%, 10% 100%, 0% 100%, 0% 0%);
}