CSS Animated wavy line not displaying properly in Chrome - css

Question

I have created a simple animated wavy line to use as a divider on one of my websites. Looks perfect in safari but it displays strange in Chrome.
Here's the safari screenshot:
Here's the chrome screenshot:
The safari one is perfect for me, but it seems chrome isn't liking it.
I have tried adding ALL vendor prefixes to the start of the selectors and various places but I cant seem to fix the issue.
Can anyone please tell me where I'm going wrong?
Here's a CODEPEN and here's a code snippet:
.wavy-line {
width: 150px;
height: 50px;
overflow: hidden;
margin: 0 auto 0 auto;
}
.wavy-line:before {
content: attr(data-text);
position: relative;
top: -35px;
color: rgba(0,0,0,0);
width: calc(100% + 27px);
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #25173A;
text-decoration-line: underline;
animation: animate .9s linear infinite;
-webkit-animation: animate .9s linear infinite;
}
#keyframes animate {
0% { left: -0px; }
100% { left: -30px;}
}
#-webkit-keyframes animate {
0% { left: -0px; }
100% { left: -30px;}
}
.wavy-line-green:before { text-decoration-color: #56AE5F; }
.wavy-line-blue:before { text-decoration-color: #1FB5D1; }
.wavy-line-yellow:before { text-decoration-color: #F9B930; }
<div class="wavy-line wavy-line-green" data-text="xxxxxxxxxxxxxx"></div>
<div class="wavy-line wavy-line-blue" data-text="xxxxxxxxxxxxxx"></div>
<div class="wavy-line wavy-line-yellow" data-text="xxxxxxxxxxxxxx"></div>

Answer 1

I will consider a previous answer to draw the waves using CSS and then you can easily animate them. You simply need to adjust the CSS variable to control the shape:
.wave {
--c:red; /* Color */
--t:5px; /* Thickness */
--h:50px; /* Height */
--w:120px; /* Width */
--p:13px; /* adjust this to correct the position when changing the other values*/
margin:5px auto;
width:calc(var(--w)*4);
height:calc(var(--h) + 10px);
overflow:hidden;
position:relative;
}
.wave:before {
content:"";
position:absolute;
padding:5px 0;
top:0;
left:0;
width:200%;
bottom:0;
background:
radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
radial-gradient(farthest-side at 50% calc(0% - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
background-size:var(--w) var(--h);
background-position:calc(var(--w)/2) calc(-1*(var(--h)/2)),0px calc(var(--h)/2);
background-repeat:repeat-x;
background-origin:content-box;
animation:move 3s infinite linear;
}
#keyframes move {
to {
transform:translateX(-50%);
}
}
<div class="wave"></div>
<div class="wave" style="--w:140px;--h:40px;--p:13px; --t:8px;--c:purple"></div>
<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>
<div class="wave" style="--w: 64px;--h: 22px;--p: 11px;--t: 7px;--c: orange;"></div>