Imagine a line growing in the same pattern as this fiddle.
svg #path {
stroke-dasharray: 19;
stroke-dashoffset: 19;
animation: dash 4s linear 0s forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 19;
}
to {
stroke-dashoffset: 0;
}
} <svg viewBox="0 1 4.8666667 7.2777778" width="438px" height="655px">
<path id="path" fill="none" stroke="darkgoldenrod" stroke-width=".06" stroke-dashoffset="19" stroke-dasharray="19"
d="M 3.5465404,3.034946 C 3.4354313,3.6265215 4.030817,3.0359535 4.1671536,3.55319 4.2794157,4.1144845 3.4363811,4.1431996 3.0741807,4.4032244 2.4391877,4.9662761 4.4061645,6.2801514 4.3786782,6.7247724 4.4096446,7.0948023 4.0390679,7.0007891 3.8245189,7.429004 3.7009337,7.6691977 3.3346032,7.6270496 2.8948462,7.6490553 2.4536728,7.6318087 1.6152485,7.8291298 1.0767182,7.6694802 0.73107147,7.5240403 0.80398481,7.2706043 0.80398481,7.2706043 0.83861231,6.866754 1.5732839,7.0445965 1.7753715,6.5292039 1.953487,5.950891 1.7063462,5.2323625 1.511576,5.18339 1.1230225,5.0822327 0.82998045,5.712977 0.41672909,5.2491666 0.28482631,5.098227 0.24895285,4.7880749 0.46248017,4.5821824 0.7446934,4.3573654 1.0821233,4.6451318 1.3127029,4.5397796 c 0.1144564,-0.024614 0.030353,-0.2123847 0.0053,-0.9407053">
</path>
</svg>However, how can I achieve this effect with a dashed line? I am using "stroke-dashoffset" for path animation, so I cannot use it to create a dashed path.