Hi everyone I want to make a wave animation with two SVG, one animation should be made on the top and another on the bottom. I already succeeded the wave on top, but I am stuck to making another to the bottom. Can anyone give me some pieces of advice? Thanks a lot.

Here is my code:

Wave.js:

<div className="container">
<svg
          className="curved"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 720 400"
        >
          <path
            fill="#e53935"
            d="M0,128L60,122.7C120,117,240,107,360,122.7C480,139,600,181,720,202.7C840,224,960,224,1080,192C1200,160,1320,96,1380,64L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
          ></path>
        </svg>
        <svg
          className="curved1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1440 320"
        >
          <path
            fill="#e53935"
            fill-opacity="1"
            d="M0,288L60,293.3C120,299,240,309,360,288C480,267,600,213,720,176C840,139,960,117,1080,112C1200,107,1320,117,1380,122.7L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
          ></path>
        </svg>
</div>

wave-styles.css:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 50px 0;
}
.curved path {
  animation: pathAnim 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.curved1 path {
  display: block;
  transform-origin: bottom;
  animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes pathAnim {
  0% {
    d: path(
      "M0,192   C220,100,440,100,660,192 C880,290,1100,290,1320,192 L1320 500 L0 500"
    );
  }
  25% {
    d: path(
      "M0,100   C220,100,440,292,660,292 C880,292,1100,100,1320,100 L1320 500 L0 500"
    );
  }
  50% {
    d: path(
      "M0,192   C220,290,440,290,660,192 C880,100,1100,100,1320,192 L1320 500 L0 500"
    );
  }
  75% {
    d: path(
      "M0,292   C220,292,440,100,660,100 C880,100,1100,292,1320,292 L1320 500 L0 500"
    );
  }
  100% {
    d: path(
      "M0,192   C220,100,440,100,660,192 C880,290,1100,290,1320,192 L1320 500 L0 500"
    );
  }
}
@keyframes animateWave {
  0% {
    transform: scale(1, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}