css water filling effect
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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>DUCKY</h1>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
body{
display: flex;
justify-content: center;
font-family: 'Rubik', sans-serif;
}
.container{
border: 2px solid gray;
margin-top: 10vh;
width: 70vh;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
animation: ani 7s linear infinite;
background-color: aqua;
}
h1 {
font-size: 15vh;
}
@keyframes ani{
0%{
clip-path: polygon(0 90%, 9% 93%, 18% 95%, 29% 94%,
39% 93%, 51% 93%, 62% 94%, 73% 95%, 85% 95%, 100% 93%,
100% 100%, 0% 100%);
}
10%{
clip-path: polygon(0 86%, 8% 89%, 17% 90%, 26% 89%,
37% 88%, 48% 89%, 61% 89%, 74% 87%, 88% 86%, 100% 86%,
100% 100%, 0% 100%);
}
20%{
clip-path: polygon(0 70%, 13% 73%, 23% 76%, 33% 81%,
40% 84%, 51% 85%, 64% 84%, 76% 82%, 89% 78%, 100% 74%,
100% 100%, 0% 100%);
}
30%{
clip-path: polygon(0 66%, 11% 68%, 22% 69%, 33% 69%,
45% 68%, 58% 70%, 68% 71%, 78% 70%, 89% 68%, 100% 65%,
100% 100%, 0% 100%);
}
40%{
clip-path: polygon(0 52%, 12% 60%, 24% 63%, 35% 64%,
47% 63%, 57% 57%, 68% 54%, 81% 54%, 91% 57%, 100% 61%,
100% 100%, 0% 100%);
}
50%{
clip-path: polygon(0 43%, 14% 43%, 26% 45%, 36% 50%,
47% 53%, 59% 53%, 70% 51%, 81% 50%, 91% 50%, 100% 51%,
100% 100%, 0% 100%);
}
60%{
clip-path: polygon(0 39%, 10% 42%, 23% 42%, 35% 41%,
48% 39%, 60% 39%, 71% 40%, 83% 43%, 93% 44%, 100% 44%,
100% 100%, 0% 100%);
}
70%{
clip-path: polygon(0 33%, 11% 31%, 23% 32%, 36% 34%,
50% 36%, 62% 37%, 73% 36%, 83% 35%, 92% 33%, 100% 31%,
100% 100%, 0% 100%);
}
80%{
clip-path: polygon(0 26%, 11% 27%, 20% 27%, 35% 25%,
50% 23%, 61% 21%, 75% 21%, 85% 23%, 92% 26%, 100% 30%,
100% 100%, 0% 100%);
}
90%{
clip-path: polygon(0 6%, 15% 8%, 27% 11%, 38% 13%,
49% 13%, 61% 11%, 72% 10%, 81% 9%, 91% 7%, 100% 3%,
100% 100%, 0% 100%);
}
100%{
clip-path: polygon(0 0, 14% 0, 24% 0, 33% 0, 47% 2%,
59% 2%, 72% 3%, 80% 4%, 91% 4%, 100% 3%, 100% 100%,
0% 100%);
}
}