das/public/css/wave.scss

.wave {
    background-color: #f3f6f9;
    overflow: hidden;
    position: relative;
}

.wave > div {
    z-index: 1;
}

.wave:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: -1;
}

.wave:after {
    content: " ";
    width: 1000px;
    height: 1025px;
    position: absolute;
    bottom: 65%;
    left: -250px;
    border-radius: 35%;
    background: #fff;
    z-index: 0;
}

.wave:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wave-animate:after {
    -webkit-animation: animate-wave 15s infinite linear;
    animation: animate-wave 15s infinite linear;
}

.wave-animate-slower:after {
    -webkit-animation: animate-wave 30s infinite linear;
    animation: animate-wave 30s infinite linear;
}

.wave-animate-slow:after {
    -webkit-animation: animate-wave 25s infinite linear;
    animation: animate-wave 25s infinite linear;
}

.wave-animate-fast:after {
    -webkit-animation: animate-wave 10s infinite linear;
    animation: animate-wave 10s infinite linear;
}

.wave-animate-faster:after {
    -webkit-animation: animate-wave 5s infinite linear;
    animation: animate-wave 5s infinite linear;
}

.wave.wave-primary {
    background-color: var(--primary-light) !important;
}

.wave.wave-primary .svg-icon svg g [fill] {
    fill: var(--primary-light);
}

.wave.wave-secondary {
    background-color: rgba(228, 230, 239, 0.1) !important;
}

.wave.wave-secondary .svg-icon svg g [fill] {
    fill: #e4e6ef;
}

.wave.wave-success {
    background-color: rgba(27, 197, 189, 0.1) !important;
}

.wave.wave-success .svg-icon svg g [fill] {
    fill: #43a047;
}

.wave.wave-info {
    background-color: rgba(137, 80, 252, 0.1) !important;
}

.wave.wave-info .svg-icon svg g [fill] {
    fill: #8950fc;
}

.wave.wave-warning {
    background-color: rgba(255, 168, 0, 0.1) !important;
}

.wave.wave-warning .svg-icon svg g [fill] {
    fill: #ffa800;
}

.wave.wave-danger {
    background-color: rgba(246, 78, 96, 0.1) !important;
}

.wave.wave-danger .svg-icon svg g [fill] {
    fill: #039be5;
}

.wave.wave-light {
    background-color: rgba(243, 246, 249, 0.1) !important;
}

.wave.wave-light .svg-icon svg g [fill] {
    fill: #f3f6f9;
}

.wave.wave-dark {
    background-color: rgba(24, 28, 50, 0.1) !important;
}

.wave.wave-dark .svg-icon svg g [fill] {
    fill: #181c32;
}

.wave.wave-white {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.wave.wave-white .svg-icon svg g [fill] {
    fill: #fff;
}

@-webkit-keyframes animate-wave {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animate-wave {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.content-notif {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
}