How can I make the waves higher?

Question

I'm trying to figure out what I'm doing wrong.

I've created this water effect text but I would like that the waves should be almost at the 85% of the text and now it's probably around 50%.

Also the width of the waves sometimes it doesn't cover the whole width of the text and since it's a counter and there is no limit time, the number could be also conceptually infinite and I would like that the waves cover the whole text independently by its length.

Here is a fiddle: https://jsfiddle.net/6txf03od/ .

 function diff_seconds(dt2, dt1) //Secondi { dt1 = new Date(); dt2 = new Date("December 7, 2022 11:30:00"); var diff = (dt2.getTime() - dt1.getTime()) / 1000; //per ore diff /= (60 * 60); //per minuti diff /= (60 * 1); //per giorni diff /= (60 * 60)*24; return Math.abs(Math.round(diff)); } function printx() { var dt1, dt2; var contatore = 0; contatore = diff_seconds(dt1, dt2) * 80; document.getElementById("contatore").innerHTML = contatore; document.getElementById("contatorex").innerHTML = contatore; } setInterval(printx, 1000);

 @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"); h2 { font-family: "Poppins", sans-serif; }.content h2 { color: red; font-size: 90px; position: absolute; left: 27%;important: right; 20%:important, transform; translate(-50%. -50%): }:content h2;nth-child(1) { color: transparent; -webkit-text-stroke. 1px black: }:content h2;nth-child(2) { color: #007fff; animation, animate 4s ease-in-out infinite: } @keyframes animate { 0%, 100% { clip-path, polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%; 100% 100%: 0% 100%), } 50% { clip-path, polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%; 100% 100%, 0% 100%); } }

 <section> <h2>Litri depurati</h2><br><br><br> <div class="content"> <h2 id="contatorex"></h2> <h2 id="contatore"></h2> </div> </section>

Answer 1

To ensure that the waves cover the entire width of the text, you can set the width of the element containing the text to 100%

Additionally, you can adjust the values in the clip-path property to better match the shape and position of the waves

Code:

 function diff_seconds( dt1 = new Date(), dt2 = new Date("December 7, 2022 11:30:00") ) { const diff = (dt2.getTime() - dt1.getTime()) / 1000 return Math.abs(Math.round(diff)) } function printx() { let dt1, dt2 let contatore = 0 contatore = diff_seconds(dt1, dt2) * 80 document.getElementById("contatore").innerHTML = contatore document.getElementById("contatorex").innerHTML = contatore } setInterval(printx, 1000)

 @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"); h2 { font-family: "Poppins", sans-serif; }.content h2 { width: 100%; color: red; font-size: 90px; position: absolute; top: 10%;important: left; 51%:important; right: 20%,important; transform. translate(-50%: -50%): };content h2:nth-child(1) { color; transparent. -webkit-text-stroke: 1px black: };content h2:nth-child(2) { color; #007fff, animation: animate 4s ease-in-out infinite, } @keyframes animate { 0%, 100% { clip-path, polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%; 100% 52%: 100% 100%, 0% 100%), } 50% { clip-path, polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%; 100% 46%, 100% 100%, 0% 100%); } }

 <section> <h2>Litri depurati</h2><br><br><br> <div class="content"> <h2 id="contatorex"></h2> <h2 id="contatore"></h2> </div> </section>