waves

by Grzegorz Matyszewski

HTML

<div class="waves waves--6">
  <span><b></b><b></b><b></b><b></b><b></b><b></b></span>
  <span><u></u><u></u><u></u><u></u><u></u><u></u></span>
</div>
<div class="waves waves--5">
  <span><b></b><b></b><b></b><b></b><b></b></span>
  <span><u></u><u></u><u></u><u></u><u></u></span>
</div>
<div class="waves waves--4">
  <span><b></b><b></b><b></b><b></b></span>
  <span><u></u><u></u><u></u><u></u></span>
</div>
<div class="waves waves--3">
  <span><b></b><b></b><b></b></span>
  <span><u></u><u></u><u></u></span>
</div>

SCSS

body { background-color: #A6E2D6; }

.waves {
  margin: 60px;
  position: relative;
  overflow: hidden;
  
  span {
    display: flex;
    justify-content: space-evenly;
    height: 50%;
    position: relative;
    overflow: hidden;
  }
  
  b, u {
    height: 0;
  }
  
  &--6 b, &--6 u {
    width: 1 / 12 * 100%;
    padding-bottom: 1 / 12 * 100%;
  }
  
  &--5 b, &--5 u {
    width: 1 / 10 * 100%;
    padding-bottom: 1 / 10 * 100%;
  }
  
  &--4 b, &--4 u {
    width: 1 / 8 * 100%;
    padding-bottom: 1 / 8 * 100%;
  }
  
  &--3 b, &--3 u {
    width: 1 / 6 * 100%;
    padding-bottom: 1 / 6 * 100%;
  }
  
  b {
    background: rgba(#fff, 0.5);
    background: linear-gradient(90deg, rgba(#fff, 0.5) 0%, rgba(#fff, 0) 100%), url("https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png");
    mix-blend-mode: overlay;
    border-radius: 50% 50% 0 0;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: -1 / 12 * 50%;
    animation: vertical 3s ease-in-out infinite;
    
    &:first-child { margin-left: 0; }
    
    @for $i from 1 through 6 {
      &:nth-child(#{$i}) { animation-delay: $i * -0.2s; }
    }
  }
  
  u {
    background: rgba(#000, 0.3);
    background: linear-gradient(90deg, rgba(#000, 0) 0%, rgba(#000, 0.3) 100%), url("https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png");
    mix-blend-mode: multiply;
    opacity: 0.5;
    filter: brightness(165%) contrast(220%);
    border-radius: 0 0 50% 50%;
    margin-left: auto;
    margin-top: -1 / 12 * 50%;
    margin-bottom: 20px;
    animation: vertical 3s ease-in-out infinite;
  
    &:last-child { margin-right: 0; }
    
    
    @for $i from 1 through 6 {
      &:nth-child(#{$i}) { animation-delay: -0.3s + $i * -0.2s; }
    }
  }
}

@keyframes vertical {
  0% { transform: translateY(-7%); }
  50% { transform: translateY(7%); }
  100% { transform: translateY(-7%); }
}