SOURCE

<div class="container">
    <h2>Water</h2>
    <h2>Water</h2>
  </div>

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

.container {
    position: relative;
}

.container h2 {
    position: absolute;
    font-size: 20em;
    transform: translate(-50%,-50%);
}
.container h2:nth-child(1){
    color: transparent;
    /* 设置对象文字的描边 */
    -webkit-text-stroke: 2px #03a9f4;
}

.container h2:nth-child(2){
    color: #03a9f4;
    animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
    /* 使用裁剪方式创建元素的可显示区域,区域内的部分显示，区域外的隐藏 */
    0%, 100%{
        clip-path: polygon(1% 65%, 32% 75%, 44% 75%, 69% 70%, 86% 62%, 97% 57%, 100% 54%, 100% 99%, 3% 100%, 1% 100%);
    }
    50%{
      clip-path: polygon(1% 73%, 24% 74%, 40% 74%, 66% 59%, 87% 50%, 97% 45%, 100% 43%, 100% 99%, 3% 100%, 1% 100%);
    }
}