Water Effect On Name.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: space-between;
    background: #000;
    text-transform: uppercase;
    letter-spacing: 0.7rem;
}

.content{
    position: relative;
    height: 100vh;
    width: 100vw;
}

.content h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    
    
}

.content h1:nth-child(1){
    color:transparent;
    -webkit-text-stroke: 3px #ffffff;
}

.content h1:nth-child(2){
    color: #ff6400;
    animation: animate 3s ease-in-out infinite;
}

@keyframes animate
{
    0%, 100%{
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50%{
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}
    </style>
    <title>Water Effect On Name</title>
</head>
<body>
    <div class="content">
        <h1>TechCode</h1>
        <h1>TechCode</h1>
    </div>
</body>
</html>