<html>
<head>
<title>Animated Water Wave Text Effect</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
  <div class="content">
    <h2>Animated</h2>
    <h2>Animated</h2>
  </div>
</body>
</html>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat';
  font-size: 800;
  min-height: 100vh;
  background: #000;
}

.content {
  position: relative;
}

.content h2 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 5em;
}


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

.content h2:nth-child(2) {
  color: #03a9f4;
  animation: animate 5s 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% 40%, 100% 100%, 0% 100%)
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.