SVG stroke animation issue: need smooth flow from node to edge (or vice versa)

Question

can't resolve the issue with dashoffset animation. The moving stroke is stopping on the node of the .svg file and then resumes from the edge. Is there any way to make the flow from node to edge smoother?

:root {
  --c3: #ffffff;
  --c6: #68b6c8;
}

body {
  background: linear-gradient(90deg, #0a0427, #1a0083);
}

.home-svg {
  width: 80vw;
  height: 50vh;
  fill: transparent;
  transition: all 0.5s cubic-bezier(0.6, 0.38, 0.29, 0.92) 0.5s, transform 1s cubic-bezier(0.6, 0.38, 0.29, 0.92) 0s;
}

@media screen and (min-width: 1000px) {
  .home-svg {
    position: absolute;
    top: calc(50% + (var(--offset) * 3));
    left: -30%;
    transform: translate(50%, 50%);
    z-index: -1;
  }
}

@media screen and (max-width: 999px) {
  .home-svg {
    position: absolute;
    top: calc(50% + (var(--offset) * 3));
    left: -30%;
    transform: translate(50%, 50%);
    z-index: -1;
  }
}

.home-svg .stroke {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 0.25px;
}

@media screen and (max-width: 999px) {
  .home-svg .stroke {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 0.4px;
  }
}

.home-svg .stroke-anim {
  stroke: var(--c3);
  stroke-width: 0.4px;
  stroke-dasharray: 30;
  -webkit-animation: home-svg linear reverse 12s infinite;
  animation: home-svg linear 12s infinite;
}

@media screen and (max-width: 999px) {
  .home-svg .stroke-anim {
    stroke-width: 0.4px;
  }
}

.home-svg .stroke-anim .home-svg__2,
.home-svg .stroke-anim .home-svg__4 {
  stroke: var(--c6);
}

@-webkit-keyframes home-svg {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 300;
  }
}

@keyframes home-svg {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 300;
  }
}

<svg class="home-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 177.906 50">
  <g class="stroke">
    <path class="home-svg__1" d="M33.5491 50l13.9965 0 -15.3458 -50 -16.7217 0.0001 -15.4781 49.9999 14.1287 0c2.9104,-12.9287 6.2177,-25.6941 9.3663,-38.5683l0.6879 0.0001c3.1485,12.9558 6.4558,25.6395 9.3662,38.5682l0 0z" />
  </g>
  <g class="stroke-anim">
    <path class="home-svg__1" d="M33.5491 50l13.9965 0 -15.3458 -50 -16.7217 0.0001 -15.4781 49.9999 14.1287 0c2.9104,-12.9287 6.2177,-25.6941 9.3663,-38.5683l0.6879 0.0001c3.1485,12.9558 6.4558,25.6395 9.3662,38.5682l0 0z" />
  </g>
</svg>

Answer 1

Set a pathLength that's the same value as your offset animation. The pathLength gives you the total distance of the path and if you set the offset to the same value, it animates seamlessly.

:root {
  --c3: #ffffff;
  --c6: #68b6c8;
}

body {
  background: linear-gradient(90deg, #0a0427, #1a0083);
}

.home-svg {
  width: 80vw;
  height: 50vh;
  fill: transparent;
  transition: all 0.5s cubic-bezier(0.6, 0.38, 0.29, 0.92) 0.5s, transform 1s cubic-bezier(0.6, 0.38, 0.29, 0.92) 0s;
}

@media screen and (min-width: 1000px) {
  .home-svg {
    position: absolute;
    top: calc(50% + (var(--offset) * 3));
    left: -30%;
    transform: translate(50%, 50%);
    z-index: -1;
  }
}

@media screen and (max-width: 999px) {
  .home-svg {
    position: absolute;
    top: calc(50% + (var(--offset) * 3));
    left: -30%;
    transform: translate(50%, 50%);
    z-index: -1;
  }
}

.home-svg .stroke {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 0.25px;
}

@media screen and (max-width: 999px) {
  .home-svg .stroke {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 0.4px;
  }
}

.home-svg .stroke-anim {
  stroke: var(--c3);
  stroke-width: 0.4px;
  stroke-dasharray: 30;
  -webkit-animation: home-svg linear reverse 12s infinite;
  animation: home-svg linear 12s infinite;
}

@media screen and (max-width: 999px) {
  .home-svg .stroke-anim {
    stroke-width: 0.4px;
  }
}

.home-svg .stroke-anim .home-svg__2,
.home-svg .stroke-anim .home-svg__4 {
  stroke: var(--c6);
}

@-webkit-keyframes home-svg {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 300;
  }
}

@keyframes home-svg {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 300;
  }
}

<svg class="home-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 177.906 50">
  <g class="stroke">
    <path class="home-svg__1" d="M33.5491 50l13.9965 0 -15.3458 -50 -16.7217 0.0001 -15.4781 49.9999 14.1287 0c2.9104,-12.9287 6.2177,-25.6941 9.3663,-38.5683l0.6879 0.0001c3.1485,12.9558 6.4558,25.6395 9.3662,38.5682l0 0z" pathLength="300"  />
  </g>
  <g class="stroke-anim">
    <path class="home-svg__1" d="M33.5491 50l13.9965 0 -15.3458 -50 -16.7217 0.0001 -15.4781 49.9999 14.1287 0c2.9104,-12.9287 6.2177,-25.6941 9.3663,-38.5683l0.6879 0.0001c3.1485,12.9558 6.4558,25.6395 9.3662,38.5682l0 0z" pathLength="300" />
  </g>
</svg>