I am experiencing a small issue with my SVG animation. Once the animation is completed, blank points appear on the SVG text. I have included my code pen with the complete code for you to see it firsthand. Interestingly, this problem only occurs in Chrome, Opera, and Edge browsers, while Firefox works fine. After checking the "can i use" website, it seems that my code is correct. Can someone please explain why these blank points are appearing after the animation?
const logo = document.querySelectorAll('#logo path');
for (i = 8; i < logo.length; i++) {
console.log(`outline: ${logo[i].getTotalLength()}`);
console.log(`mask: ${logo[i-8].getTotalLength()}`);
}
// Function adding appropriate commands to each path
const svgText = () => {
const pathLengths = ['580', '470', '505', '235', '645', '614', '473', '558'];
const delayArray = ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4'];
const delayArray2 = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000];
for (i = 8; i < logo.length; i++) {
logo[i].style.strokeDasharray = pathLengths[i - 8] + 'px';
logo[i].style.strokeDashoffset = pathLengths[i - 8] + 'px';
logo[i].style.animationFillMode = 'forwards';
debugger;
logo[i].animate([{
strokeDashoffset: '0'
}], {
duration: 3500,
delay: delayArray2[i - 8],
fill: 'forwards'
})
logo[i - 8].animate([{
fill: 'white'
}], {
duration: 2000,
delay: 5000,
fill: 'forwards'
})
}
}
svgText();body,
html {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.container {
background-color: black;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.as-console-wrapper {
max-height: 50px !important;
}<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://kit.fontawesome.com/6c45422137.js" crossorigin="anonymous"></script>
<title>SVGG</title>
</head>
<body>
<div class="container">
<div class="svg">
<svg id="logo" width="400" height="118" viewBox="0 0 672 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.908325" y="0.335995" width="671" height="117" fill="black">
<rect fill="white" x="0.908325" y="0.335995" width="671" height="117"/>
<path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7...
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>