cyan-bootup-mask.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="editorial" viewBox="0 24 150 28" preserveAspectRatio="none">
<style>
.parallax &gt; use{
  animation:move-forever 12s linear infinite;
}
.parallax &gt; use:nth-child(1){animation-delay:-2s;}
.parallax &gt; use:nth-child(2){animation-delay:-2s; animation-duration:5s}
.parallax &gt; use:nth-child(3){animation-delay:-4s; animation-duration:3s}

@keyframes move-forever{
  0%{transform: translate(-90px , 0%)}
  100%{transform: translate(85px , 0%)} 
}

.editorial {
  display: block;
  width: 100%;
  height: 17em;
  margin: 0;
}

body {
  background-color: #0e0f11;
  display: flex;
  align-items: end;
  justify-content: end;
  margin: 0;
}
</style>
 <defs>
 <path id="gentle-wave" d="M-160 44c30 0      58-18 88-18s     58 18 88 18      58-18 88-18      58 18 88 18     v44h-352z"/>
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#000" opacity=".6"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#000" opacity=".6"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#000" opacity=".6"/>  
  </g>
</svg>