CSS stroke-dasharray not going all the way

Question

I am a complete CSS beginner trying to make a simple animation where the stroke travels around the letters. The letters are in a SVG.

The animation works but the stroke does not go all the way from beginning to the end, leaving a small but very irritating "blank" spot.

In the picture above you can very clearly see the spot I am talking about. And below you have a code snippet replicating this. Is there a way to make the stroke go all the way?

 * { padding: 0; margin: 0; } body { width: 100%; height: 100vh; background-color: black; } #logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #logo path { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: line-anim 4s ease forwards; } @keyframes line-anim { to { stroke-dashoffset: 0; } }

 <svg id="logo" width="257" height="75" viewBox="0 0 257 75" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M57.08 23.48C55.224 19.576 52.536 16.568 49.016 14.456C45.496 12.28 41.4 11.192 36.728 11.192C32.056 11.192 27.832 12.28 24.056 14.456C20.344 16.568 17.4 19.64 15.224 23.672C13.112 27.64 12.056 32.248 12.056 37.496C12.056 42.744 13.112 47.352 15.224 51.32C17.4 55.288 20.344 58.36 24.056 60.536C27.832 62.648 32.056 63.704 36.728 63.704C43.256 63.704 48.632 61.752 52.856 57.848C57.08 53.944 59.544 48.664 60.248 42.008H33.56V34.904H69.56V41.624C69.048 47.128 67.32 52.184 64.376 56.792C61.432 61.336 57.56 64.952 52.76 67.64C47.96 70.264 42.616 71.576 36.728 71.576C30.52 71.576 24.856 70.136 19.736 67.256C14.616 64.312 10.552 60.248 7.54399 55.064C4.59999 49.88 3.12799 44.024 3.12799 37.496C3.12799 30.968 4.59999 25.112 7.54399 19.928C10.552 14.68 14.616 10.616 19.736 7.73601C24.856 4.79201 30.52 3.32001 36.728 3.32001C43.832 3.32001 50.104 5.08001 55.544 8.60001C61.048 12.12 65.048 17.08 67.544 23.48H57.08Z" stroke="white" stroke-width="5"/> <path d="M116.343 71L100.407 43.64H89.8467V71H81.1107V4.08801H102.711C107.767 4.08801 112.023 4.95201 115.479 6.68001C118.999 8.40801 121.623 10.744 123.351 13.688C125.079 16.632 125.943 19.992 125.943 23.768C125.943 28.376 124.599 32.44 121.911 35.96C119.287 39.48 115.319 41.816 110.007 42.968L126.807 71H116.343ZM89.8467 36.632H102.711C107.447 36.632 110.999 35.48 113.367 33.176C115.735 30.808 116.919 27.672 116.919 23.768C116.919 19.8 115.735 16.728 113.367 14.552C111.063 12.376 107.511 11.288 102.711 11.288H89.8467V36.632Z" stroke="white" stroke-width="5"/> <path d="M192.125 71H183.389L148.253 17.72V71H139.517V3.99201H148.253L183.389 57.176V3.99201H192.125V71Z" stroke="white" stroke-width="5"/> <path d="M240.521 36.536C242.953 36.92 245.161 37.912 247.145 39.512C249.193 41.112 250.793 43.096 251.945 45.464C253.161 47.832 253.769 50.36 253.769 53.048C253.769 56.44 252.905 59.512 251.177 62.264C249.449 64.952 246.921 67.096 243.593 68.696C240.329 70.232 236.457 71 231.977 71H207.017V4.08801H231.017C235.561 4.08801 239.433 4.85601 242.633 6.39201C245.833 7.86401 248.233 9.88001 249.833 12.44C251.433 15 252.233 17.88 252.233 21.08C252.233 25.048 251.145 28.344 248.969 30.968C246.857 33.528 244.041 35.384 240.521 36.536ZM215.753 32.984H230.441C234.537 32.984 237.705 32.024 239.945 30.104C242.185 28.184 243.305 25.528 243.305 22.136C243.305 18.744 242.185 16.088 239.945 14.168C237.705 12.248 234.473 11.288 230.249 11.288H215.753V32.984ZM231.209 63.8C235.561 63.8 238.953 62.776 241.385 60.728C243.817 58.68 245.033 55.832 245.033 52.184C245.033 48.472 243.753 45.56 241.193 43.448C238.633 41.272 235.209 40.184 230.921 40.184H215.753V63.8H231.209Z" stroke="white" stroke-width="5"/> </svg>

Answer 1

You might make your paths a bit longer to cross the gaps, or play with stroke-linecap property:

 * { padding: 0; margin: 0; } body { width: 100%; height: 100vh; background-color: black; } #logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #logo path { stroke-dasharray: 2000; stroke-dashoffset: 2000; stroke-linecap: round; animation: line-anim 4s ease forwards; } @keyframes line-anim { to { stroke-dashoffset: 0; } }

 <svg id="logo" width="257" height="75" viewBox="0 0 257 75" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M57.08 23.48C55.224 19.576 52.536 16.568 49.016 14.456C45.496 12.28 41.4 11.192 36.728 11.192C32.056 11.192 27.832 12.28 24.056 14.456C20.344 16.568 17.4 19.64 15.224 23.672C13.112 27.64 12.056 32.248 12.056 37.496C12.056 42.744 13.112 47.352 15.224 51.32C17.4 55.288 20.344 58.36 24.056 60.536C27.832 62.648 32.056 63.704 36.728 63.704C43.256 63.704 48.632 61.752 52.856 57.848C57.08 53.944 59.544 48.664 60.248 42.008H33.56V34.904H69.56V41.624C69.048 47.128 67.32 52.184 64.376 56.792C61.432 61.336 57.56 64.952 52.76 67.64C47.96 70.264 42.616 71.576 36.728 71.576C30.52 71.576 24.856 70.136 19.736 67.256C14.616 64.312 10.552 60.248 7.54399 55.064C4.59999 49.88 3.12799 44.024 3.12799 37.496C3.12799 30.968 4.59999 25.112 7.54399 19.928C10.552 14.68 14.616 10.616 19.736 7.73601C24.856 4.79201 30.52 3.32001 36.728 3.32001C43.832 3.32001 50.104 5.08001 55.544 8.60001C61.048 12.12 65.048 17.08 67.544 23.48H57.08Z" stroke="white" stroke-width="5"/> <path d="M116.343 71L100.407 43.64H89.8467V71H81.1107V4.08801H102.711C107.767 4.08801 112.023 4.95201 115.479 6.68001C118.999 8.40801 121.623 10.744 123.351 13.688C125.079 16.632 125.943 19.992 125.943 23.768C125.943 28.376 124.599 32.44 121.911 35.96C119.287 39.48 115.319 41.816 110.007 42.968L126.807 71H116.343ZM89.8467 36.632H102.711C107.447 36.632 110.999 35.48 113.367 33.176C115.735 30.808 116.919 27.672 116.919 23.768C116.919 19.8 115.735 16.728 113.367 14.552C111.063 12.376 107.511 11.288 102.711 11.288H89.8467V36.632Z" stroke="white" stroke-width="5"/> <path d="M192.125 71H183.389L148.253 17.72V71H139.517V3.99201H148.253L183.389 57.176V3.99201H192.125V71Z" stroke="white" stroke-width="5"/> <path d="M240.521 36.536C242.953 36.92 245.161 37.912 247.145 39.512C249.193 41.112 250.793 43.096 251.945 45.464C253.161 47.832 253.769 50.36 253.769 53.048C253.769 56.44 252.905 59.512 251.177 62.264C249.449 64.952 246.921 67.096 243.593 68.696C240.329 70.232 236.457 71 231.977 71H207.017V4.08801H231.017C235.561 4.08801 239.433 4.85601 242.633 6.39201C245.833 7.86401 248.233 9.88001 249.833 12.44C251.433 15 252.233 17.88 252.233 21.08C252.233 25.048 251.145 28.344 248.969 30.968C246.857 33.528 244.041 35.384 240.521 36.536ZM215.753 32.984H230.441C234.537 32.984 237.705 32.024 239.945 30.104C242.185 28.184 243.305 25.528 243.305 22.136C243.305 18.744 242.185 16.088 239.945 14.168C237.705 12.248 234.473 11.288 230.249 11.288H215.753V32.984ZM231.209 63.8C235.561 63.8 238.953 62.776 241.385 60.728C243.817 58.68 245.033 55.832 245.033 52.184C245.033 48.472 243.753 45.56 241.193 43.448C238.633 41.272 235.209 40.184 230.921 40.184H215.753V63.8H231.209Z" stroke="white" stroke-width="5"/> </svg>