<div class="curveWrap">
  <svg width="100%" height="100%" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg">
    <g class="curve" fill="none">
      <!-- You can add more, fewer, and tweak paths... -->
      <path d="M 0, 60 S 300, -60, 600, 60, 800, -120, 1200 60" />
      <path d="M 0, 60 S 200, -60, 400, 60, 900, -120, 1200 60" />
      <path d="M 0, 60 S 200, -70, 400, 70, 800, -120, 1200 60" />
      <path d="M 0, 60 S 200, -60, 400, 80, 600, -120, 1200 60" />
<!--  <path d="M 0, 60 S 300, -60, 600, 60, 800, -120, 1200 60" /> -->
    </g>
  </svg>
</div>

// This number should match the number of <paths> in the HTML.
$pathCount: 4;

.curveWrap {
  opacity: 1;
  width: 150vw;
  height: 100vh;
  position: absolute;
  transform: translateX(-30vw) rotate(-15deg);
  will-change: transform;
  .curve {
    stroke-linecap: round;
    stroke-opacity: 0;
    path {
      transform-origin: center;
    }

    @for $i from 1 through $pathCount {
      
      // Path Widths (random + minimum)
      $randomNumber: random((40) + 10);

      & path:nth-child(#{$i}) {
        stroke-width: $randomNumber;

        // Path rotate speed then fadein delay
        animation: curve 35s linear $i * 1.6s infinite;
      }

      // Path Colors
      $colors: 
        goldenrod, 
        cornflowerBlue, 
        GreenYellow, 
        lightblue, 
        darkgreen,
        olive;

      @for $i from 1 through length($colors) {
        & path:nth-child(#{length($colors)}n + #{$i}) {
          stroke: nth($colors, $i);
        }
      }
    }
  }
  @keyframes curve {
    50% {
      transform: rotateX(360deg) scaley(1) skewY(8deg);
      stroke-opacity: 1;
    }
  }
}



///////////// Layout ///////////////

html,
body {
  height: 100vh;
}

body {
  background: radial-gradient(#222, #000);
  background-repeat: no-repeat;
}
View Compiled
// move along.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.