Wave Water
<!DOCTYPE html> <html> <head> <title> Water </title> </head> <body> <div class =" content "> <h2> Water </h2> <h2> Water </h2> </div> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; font-family: arial; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .content{ position: relative; } .content h2{ position: absolute; transform: translate(-50%, -50%); font-size: 8em; } .content h2:nth-child(1){ color: transparent; -webkit-text-stroke : 2px #03a9f4; } .content h2:nth-child(2){ color: #03a9f4; -webkit-text-stroke : 2px #03a9f4; animation: animate 4s ease-in-out infinite; } @keyframes animate{ 0%,100% { clip-path: polygon(0% 39%, 13% 39%, 25% 40%, 34% 41%, 46% 45%, 58% 48%, 65% 52%, 72% 56%, 83% 59%, 88% 59%, 96% 59%, ...