1

I've created a bunch of cubic bezier curves in 1 svg path and now trying to fill the path from top to bottom with dasharray and offset, but the animation keeps starting at every cubic bezier curve start point, so at every C in the path. how can I combine the lines, so the animation goes from the very top to the very bottom?

Here's my svg animation: https://codepen.io/mj2023/pen/wvEMwyB

<style>
svg {
width: 600px;
overflow:visible;
}
#lined-svg path {
stroke-dasharray: 7867.43;
stroke-dashoffset: 7867.43;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 7867.43;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<svg id="lined-svg" viewBox="0 0 600 4088">
<path stroke="red" fill="none" stroke-width="6" d="M 300, 0 C 300, 114, 600, 76, 600, 190 C 600, 304, 300, 266, 300, 380 M 300, 380, C 300, 542.6, 600, 488.4, 600, 651 C 600, 813.6, 300, 759.4, 300, 922 M 300, 922, C 300, 1003.6, 600, 976.4, 600, 1058 C 600, 1139.6, 300, 1112.4, 300, 1194 M 300, 1194, C 300, 1308, 600, 1270, 600, 1384 C 600, 1498, 300, 1460, 300, 1574 M 300, 1574, C 300, 1655.6, 600, 1628.4, 600, 1710 C 600, 1791.6, 300, 1764.4, 300, 1846 M 300, 1846, C 300, 2008.6, 600, 1954.4, 600, 2117 C 600, 2279.6, 300, 2225.4, 300, 2388 M 300, 2388, C 300, 2604.6, 600, 2532.4, 600, 2749 C 600, 2965.6, 300, 2893.4, 300, 3110 M 300, 3110, C 300, 3224, 600, 3186, 600, 3300 C 600, 3414, 300, 3376, 300, 3490 M 300, 3490, C 300, 3555.4, 600, 3533.6, 600, 3599 C 600, 3664.4, 300, 3642.6, 300, 3708 M 300, 3708, C 300, 3822, 600, 3784, 600, 3898 C 600, 4012, 300, 3974, 300, 4088"></path>
</svg>
PLD2021
  • 11
  • 1
  • 2
    it's the way you draw the path. If you take a look at the d attribute you will see several M commands. Those are discontinuity points. You will need to draw the path as if you never lift the pencil – enxaneta Feb 20 '23 at 07:25
  • 1
    There is also a typo in your path commands: Remove the comma before the C commands. – ccprog Feb 20 '23 at 10:51
  • for a single path, use the editor: https://yqnn.github.io/svg-path-editor/# – Danny '365CSI' Engelman Feb 20 '23 at 17:09

0 Answers0