<!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
>