:root {
}
/* ----------------------------------------------- */


#svg_animation4 > rect {
    clip-path: url(#wave);
}

#wave > path {
    scale: 100% 100%;
    transform-origin: 0% 1%;
    animation-name: wave;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}


@keyframes wave {
    0% {
        scale: 1000% 10%;
        transform: translate(0%,0%);
    }
    50% {
        scale: 1000% 80%;
    }
    100% {
        scale: 1000% 10%;
        transform: translate(-1%,0%);
    }
}

#wave2 > path {
    scale: 100% 100%;
    transform-origin: 0% 1%;
    animation-name: wave2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}


@keyframes wave2 {
    0% {
        scale: 500% 0%;
        transform: translate(0%,0%);
    }
    15% {
        scale: 500% 0%;
        transform: translate(0%,0%);
    }
    50% {
        scale: 500% 105%;
    }
    85% {
        scale: 500% 0%;
        transform: translate(-1%,0%);
    }
    100% {
        scale: 500% 0%;
        transform: translate(-1%,0%);
    }
}

#svg_animation4 > #textPath {
    clip-path: url(#wave2);
    fill: red;
    transform-origin: 12.5% -5%;
    animation-name: seeShake;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
}

@keyframes seeShake {
    0% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(10deg);
        /* transform: rotate(0deg); */
    }
    10% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(-10deg);
        /* transform: rotate(0deg); */
    }
    20% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(10deg);
        /* transform: rotate(360deg); */
    }
    30% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(-10deg);
        /* transform: rotate(360deg); */
    }
    40% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(10deg);
        /* transform: rotate(360deg); */
    }
    50% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(-10deg);
        /* transform: rotate(360deg); */
    }
    60% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(10deg);
        /* transform: rotate(360deg); */
    }
    70% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(-10deg);
        /* transform: rotate(360deg); */
    }
    80% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(10deg);
        /* transform: rotate(360deg); */
    }
    90% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(-10deg);
        /* transform: rotate(360deg); */
    }
    100% {
        transform: translate(40%, 60%) scale(200%,200%) rotate(0deg);
        /* transform: rotate(360deg); */
    }
}

#svg_animation4 {
    background-color: lightblue;
}