Saksham Digital Technology - Best Coding Institute in Bhopal

Text Wave Animation

https://youtube.com/shorts/T-qGObbS7MQ?si=wUnnO0MiZYuRLtCn

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
</head>
<body>
<div class="container">
    <h2>Saksham</h2>
    <h2>Saksham</h2>
</div>
</body>
</html>

CSS CODE:-

    body{
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
.container{
    position: relative;
}
.container h2{
    position: absolute;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 180px;
}
.container h2:nth-child(1){
    color: transparent;
    -webkit-text-stroke: 2px #0290d6;
}
.container h2:nth-child(2){
    color: #64c8fa;
    animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
    0%{
        clip-path: polygon(
            0% 45%,
            16% 44%,
            33% 50%,
            54% 60%,
            70% 61%,
            84% 59%,
            100% 52%,
            100% 100%,
            0% 100%
        );
    }
    50%{
        clip-path: polygon(
            0% 60%,
            15% 65%,
            34% 66%,
            51% 62%,
            67% 50%,
            84% 45%,
            100% 46%,
            100% 100%,
            0% 100%
        );
    }
    100%{
        clip-path: polygon(
            0% 45%,
            16% 44%,
            33% 50%,
            54% 60%,
            70% 61%,
            84% 59%,
            100% 52%,
            100% 100%,
            0% 100%
        );
    }
}