<svg width=”100″ height=”100″ xmlns=”http://www.w3.org/2000/svg">
<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>