Motion waves

This animation showing a water movement could be used to reflect peace, calm, zen and of course water.

In order to achieve it you will find below the various codes to be used. Despite using bricks builder, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting it into the code block in order to avoid FOUC as the code block is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

The JavaScript is added to avoid having the animation running when it is not in viewport.

HTML:

<div class="wave-section">
  <div class="wave-ctn">
    <span class="wave"></span>
    <span class="wave"></span>
    <span class="wave"></span>
    <span class="wave"></span>
    <span class="wave"></span>
  </div>
</div>

CSS:

.wave-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
  width: 100%;
  background-color: #202020;
}
.wave-ctn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.wave {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 10px solid #202020;
  filter: drop-shadow(16px 16px 25px #555555)
    drop-shadow(-16px -16px 25px #111111);
}
.wave:before {
  position: absolute;
  content: "";
  top: -10px;
  right: -10px;
  bottom: -10px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  box-shadow: 6px 6px 28px #1a1a1a inset, -6px -6px 28px #555555 inset;
}
.wave-animation:nth-child(1) {
  animation: wave 5s both infinite;
}
.wave-animation:nth-child(2) {
  animation: wave 5s both infinite 1s;
}
.wave-animation:nth-child(3) {
  animation: wave 5s both infinite 2s;
}
.wave-animation:nth-child(4) {
  animation: wave 5s both infinite 3s;
}
.wave-animation:nth-child(5) {
  animation: wave 5s both infinite 4s;
}
.wave-animation:nth-child(1):before {
  animation: inside 5s both infinite;
}
.wave-animation:nth-child(2):before {
  animation: inside 5s both infinite 1s;
}
.wave-animation:nth-child(3):before {
  animation: inside 5s both infinite 2s;
}
.wave-animation:nth-child(4):before {
  animation: inside 5s both infinite 3s;
}
.wave-animation:nth-child(5):before {
  animation: inside 5s both infinite 4s;
}
@keyframes wave {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1.2);
    filter: drop-shadow(0px 0px 0px #202020) drop-shadow(0px 0px 0px #202020);
  }
}
@keyframes inside {
  100% {
    box-shadow: 0px 0px 0px #202020 inset, 0px 0px 0px #202020 inset;
  }
}
@media screen and (max-width: 479px) {
  .wave {
    width: 250px;
    height: 250px;
  }
  .wave:before {
    width: 250px;
    height: 250px;
  }
}

JavaScript:

let cards = document.querySelectorAll(".wave");

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      entry.target.classList.toggle("wave-animation", entry.isIntersecting);
    });
  },
  {
    rootMargin: "300px",
  }
);

cards.forEach((card) => {
  observer.observe(card);
});