SVG progressive line drawing animation

Question

I need to create a simple straight line, progressive drawing animation through svg. But am new to this and hence am not able to proceed. My desired output is an image at center and 5 straight lines growing out of it. Can anyone help me?

Answer 1

The way I do this is with an animation on the stroke-dashoffset attribute, which you set initially to be the length of the lines (so they are invisibile):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="540pt" height="511pt" viewBox="0 0 540 511" version="1.1">
<rect x="0" y="0" width="540" height="511" style="fill:rgb(100%,100%,100%);fill-opacity:1;stroke:none;"/>
   <g id='lines' stroke="black" style="stroke-dasharray:100;stroke-dashoffset:100">
 <path d="M 200 250 l100 0" transform='rotate(72,200,250)'/>
 <path d="M 200 250 l100 0" transform='rotate(144,200,250)'/>
 <path d="M 200 250 l100 0" transform='rotate(216,200,250)'/>
 <path d="M 200 250 l100 0" transform='rotate(288,200,250)'/>
 <path d="M 200 250 l100 0"/>
 <animate attributeName="stroke-dashoffset" fill="freeze" dur="5s" values="100;0;"/>
   </g>
</svg>

See here for additional: https://css-tricks.com/svg-line-animation-works/