*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(39, 8, 68);
}

.wave{
    width: 500px;
    height: 500px;
    position: relative;
}

.wave h2{
    position: absolute;
    line-height: 500px;
    text-align: center;
    font-size: 170px;
    text-transform: uppercase;
}

.wave1{
    color: transparent;
    -webkit-text-stroke: 2px rgb(133, 73, 83);
}

.wave2{
    color: rgb(133, 73, 83);
    animation: wave 2s linear infinite;

}

@keyframes wave{
    0%{
        clip-path: polygon(100% 48%, 100% 100%, 0 100%, 0 45%, 10% 54%, 19% 55%, 25% 62%, 35% 58%, 44% 51%, 54% 45%, 62% 39%, 69% 34%, 80% 31%, 88% 33%, 97% 39%);
    }

    50%{
        clip-path: polygon(100% 48%, 100% 100%, 0 100%, 0 45%, 5% 39%, 15% 36%, 27% 37%, 32% 45%, 40% 53%, 51% 55%, 63% 48%, 72% 47%, 80% 49%, 88% 53%, 95% 51%);
    }

    100%{
        clip-path: polygon(100% 48%, 100% 100%, 0 100%, 0 45%, 10% 54%, 19% 55%, 25% 62%, 35% 58%, 44% 51%, 54% 45%, 62% 39%, 69% 34%, 80% 31%, 88% 33%, 97% 39%);
    }
}

