svg 線條動畫

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg&quot;>

<line x1="10" y1="10" x2="10" y2="90" />
<polyline 
points="
30,0 
30,90 
80,90" 
fill="none" 
stroke="black" 
stroke-width="4"/>

</svg>

<style>
svg {

    background: #ccc;
}

svg line {
    /* stroke: #999; */
    stroke-width: 4;
    fill: none;
}
@keyframes depict {
    from {
        stroke: red;
        stroke-dashoffset: 200;
    }
    to {
        stroke: red;
        stroke-dashoffset: 0;
    }
}
svg polyline{
    stroke-dasharray: 200;
    animation: depict 2s linear 0s 1 normal forwards;
}  

</style>