Hola a todos, quiero hacer una animación de onda con dos SVG, una animación debe hacerse en la parte superior y otra en la parte inferior. Ya logré la ola de arriba, pero estoy atascado en hacer otra de abajo. ¿Alguien puede darme algunos consejos? Muchas gracias.

Aquí está mi código:

Onda.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); } }