diff --git a/src/components/wave.css b/src/components/wave.css index 6c672c75af2acba418c65ca43ec60eefe7a91eb6..0b2c725f29232524fdc885f08d2cfd9f410ad857 100644 --- a/src/components/wave.css +++ b/src/components/wave.css @@ -16,25 +16,39 @@ animation: wave-animation-1 10s linear infinite; } +.wave9 { + animation: wave-animation-6 11s linear infinite; +} + .wave2 { animation: wave-animation-2 12s linear infinite; } +.wave8 { + animation: wave-animation-6 13s linear infinite; +} + .wave3 { animation: wave-animation-3 14s linear infinite; } +.wave6 { + animation: wave-animation-6 15s linear infinite; +} + .wave4 { animation: wave-animation-4 16s linear infinite; } +.wave7 { + animation: wave-animation-6 17s linear infinite; +} + .wave5 { animation: wave-animation-5 18s linear infinite; } -.wave6 { - animation: wave-animation-6 15s linear infinite; -} + @keyframes wave-animation-1 { 0% { transform: translateX(-50%); } diff --git a/src/components/wave.tsx b/src/components/wave.tsx index a202d45bb4c138da78738f00e0163a948b879d49..e4d69c16cad3d8b0a505bf35ff9d51a929e11cce 100644 --- a/src/components/wave.tsx +++ b/src/components/wave.tsx @@ -18,8 +18,11 @@ export function WaveAnimation() { </defs> <g className="parallax"> <use href="#gentle-wave" x="48" y="-2" className='wave1' fill="rgba(178,66,65,0.7)" /> + <use href="#gentle-wave" x="48" y="2" className='wave9' fill="rgba(245, 245, 220,0.3)" /> <use href="#gentle-wave" x="48" y="-1" className='wave2' fill="rgba(232,169,166,0.5)" /> + <use href="#gentle-wave" x="48" y="2" className='wave8' fill="rgba(245, 245, 220,0.3)" /> <use href="#gentle-wave" x="48" y="0" className='wave3' fill="rgba(205,68,50,0.3)" /> + <use href="#gentle-wave" x="48" y="2" className='wave7' fill="rgba(245, 245, 220,0.3)" /> <use href="#gentle-wave" x="48" y="2" className='wave6' fill="rgba(245, 245, 220,0.3)" /> <use href="#gentle-wave" x="48" y="1" className='wave4' fill="rgba(135,31,35,1)" /> <use href="#gentle-wave" x="48" y="2" className='wave5' fill="rgba(114, 47, 55, 1)" />