captured (1).gif

    index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Loading...</title>
    7.     <link rel="stylesheet" type="text/css" href="style.css" />
    8. </head>
    9. <body>
    10.     <div class="content">
    11.         <h2>water</h2>
    12.         <h2>water</h2>
    13.     </div>
    14. </body>
    15. </html>

    style.css

    *{
    padding:  0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

body{
    display: flex;

    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #121213;
}

div.content{
    position: relative;
}

div.content h2{
    position: absolute;
    transform: translate(-50%,-50%);
    font-size: 8em;
    /* color: #fff; */
}

div.content h2:nth-child(1){
    color: transparent;
    -webkit-text-stroke: 3px #03a9f4;
}

div.content h2:nth-child(2){
    color: #03a9f4;
    animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
    0%,100%{
        clip-path: polygon(0 56%, 15% 46%, 31% 54%, 49% 46%, 65% 60%, 81% 50%, 100% 51%, 100% 100%, 0% 100%);
   }
    50%{
        clip-path: polygon(1% 36%, 16% 56%, 34% 41%, 50% 57%, 70% 44%, 81% 60%, 100% 66%, 100% 100%, 0% 100%);

    }
}