The Wave Animation

wave.module.scss

.wave {
    background: linear-gradient(60deg, rgba(0, 143, 175, 0.42) 0%, rgba(0, 208, 255, 0.12) 100%);
    position: absolute;
    z-index: 0;
    width: 100%;
    height: min(65vh, 500px);

    --color--page-background-rgb: var(--bg-color);
    --color--page-background: rgb(var(--bg-color));

    @media (max-width: 767px) {
        height: min(75vh, 400px)
    }

    svg {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 15vh;
        min-height: 100px;
        max-height: 150px;
    }


    .waves.of6vnk.of6vnk {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 15vh;
        min-height: 100px;
        max-height: 150px
    }

    @media screen and (prefers-reduced-motion: no-preference) {
        .parallax.of6vnk>use.of6vnk {
            animation: of6vnk-move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
        }
    }

    .parallax.of6vnk>use.of6vnk:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s
    }

    .parallax.of6vnk>use.of6vnk:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s
    }

    .parallax.of6vnk>use.of6vnk:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s
    }

    .parallax.of6vnk>use.of6vnk:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s
    }

    @keyframes of6vnk-move-forever {
        0% {
            transform: translate3d(-90px, 0, 0)
        }

        to {
            transform: translate3d(85px, 0, 0)
        }
    }
}

wave.tsx

import React from 'react'
import style from './wave.module.scss'

type Props = {
    shouldUseGradient?: boolean,
    style?: {
        readonly [key: string]: string;
    }
}

export default function Wave(props: Props) {

    return (
        <div className={`${style.wave}`}>
            <svg
                className={`${style.waves} ${style.of6vnk}`}
                xmlns="http://www.w3.org/2000/svg"
                xmlnsXlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28"
                preserveAspectRatio="none"
                shapeRendering="auto">
                <defs>
                    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                </defs>
                <defs>
                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style={{ stopColor: 'rgba(0, 143, 175, 0.42)' }}></stop>
                        <stop offset="100%" style={{ stopColor: 'rgba(0, 143, 175, 0.12)' }}></stop>
                    </linearGradient>
                </defs>
                <g className={`${style.parallax} ${style.of6vnk}`}>
                    <use xlinkHref="#gentle-wave" x="48" y="0" fill={props.shouldUseGradient ? "url(#gradient)" : "rgba(var(--color--page-background-rgb),0.7)"} className={style.of6vnk}></use>
                    <use xlinkHref="#gentle-wave" x="48" y="3" fill={props.shouldUseGradient ? "url(#gradient)" : "rgba(var(--color--page-background-rgb),0.5)"} className={style.of6vnk}></use>
                    <use xlinkHref="#gentle-wave" x="48" y="5" fill={props.shouldUseGradient ? "url(#gradient)" : "rgba(var(--color--page-background-rgb),0.3)"} className={style.of6vnk}></use>
                    <use xlinkHref="#gentle-wave" x="48" y="7" fill={props.shouldUseGradient ? "url(#gradient)" : "var(--color--page-background)"} className={style.of6vnk}></use>
                </g>
            </svg>
        </div>
    )
}