CODEWITHSUNDEEP
htmlcsssvg
A.F.N
A.F.N

Reputation: 198

How make a animated dashed line (path) in SVG

Consider a line that grow like 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>

But how i do this with a dashed line? i use "stroke-dashoffset" to make path animate so i cant use it to make path dashed.

Upvotes: 1

Views: 1330

Answers (1)

Christoph
Christoph

Reputation: 1630

You could try using a longer stroke-dasharray for it. I guess you have to play a bit with the values to get it right.

 svg #path {
    stroke-dasharray: 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 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>

Upvotes: 1

Related Questions