Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Wave inside Text using pure CSS

  • Last Updated : 01 Sep, 2021

Wave inside Text is one of the coolest text effects that is used for text decoration in websites. This animation is an extraordinary illustration of a wave inside the text that grabs your eye. This effect can be used to create wave inside text, UI, water wave effect on Text.

Approach: The methodology is to put animation on 2nd child using @keyframes, here we target the 2nd child of the body by h5:nth-child(2) and put animation inside it, now for wave-like animation, we need to use the clip-path property of CSS and now by this property we shape the polygon path for wave-like structure. Now let’s understand some basic concepts of CSS like @keyframes, n-th child property, and clip-path property:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • nth-child property: The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings.
  • @keyframes: The @keyframes property is utilized to set animations utilizing CSS and give option to divide animation time into parts/rate and play out an animation that is determined for that piece of the entire term of the animation. 
  • clip-path property: The clip-path property of CSS is utilized to cut the specific segment of the picture to such an extent that piece of picture inside the segment are shown and part of picture outside the segment are not shown.

Below is the implementation of the above approach:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Wave inside Text Animation</title>
  
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
  
        /* Giving 1st child(first text in body) 
        basic transparent color and border */
        h5:nth-child(1) {
            color: transparent;
            -webkit-text-stroke: 1px green;
        }
  
        /* Giving 2nd child(second text in body) 
        green colour along with animation property */
        h5:nth-child(2) {
            color: rgb(10, 124, 16);
            animation: animate 7s ease-in-out infinite;
        }
  
        h5 {
            top: 50%;
            text-transform: uppercase;
            position: absolute;
            font-family: 'Segoe UI', Tahoma, 
                    Geneva, Verdana, sans-serif;
            transform: translate(calc(50vw - 50%), -55%);
            font-size: 2em;
        }
  
        /* giving animation to 2nd child using @keyframes
        and making wave like path using clip-path property */
        @keyframes animate {
  
            0%,
            100% {
                clip-path: polygon(0 45%, 6% 38%, 20% 27%, 
                    38% 24%, 40% 47%, 49% 64%, 51% 72%, 
                    74% 78%, 79% 75%, 100% 67%, 100% 100%, 
                    0 100%);
            }
  
            50% {
                clip-path: polygon(0 59%, 5% 71%, 24% 86%, 
                    34% 71%, 41% 64%, 41% 46%, 51% 35%, 
                    74% 21%, 89% 35%, 100% 42%, 100% 100%, 
                    0 100%);
            }
        }
    </style>
</head>
  
<body>
    <h5>GeeksForGeeks</h5>
    <h5>GeeksForGeeks</h5>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!