Q:

svg line of length "l" with distance "d" between two lines

I am trying to draw vertical lines of length 60 at a distance of 180 from each other.
depth is an arithmetic series with a1 = 1 and d = 1

Attempt:
`<svg viewBox="0 0 200 200" width="200" height="200">
    ${[1, 2, 3, 4, 5].map( function (depth) {
        function getY1 (depth) {
            return (depth * 180) 
        }   

        function getY2 (depth) {
            return (depth * 180) + 60
        }

        return `<line x1="100" y1="${getY1(depth)}" x2="100" y2="${getY2(depth)}" stroke="black" />`
    }).join('')
}
</svg>`

I get lines of length 60 at distance of 120. How can I get them to be at a distance 180?
More generally, how can I draw lines of length l at distance d from each other?

A:

To make line stroke length 60 and empty distance 180, you need to make increment    180+60=240  (in general L+d)
return (depth * 240) 
..
return (depth * 240) + 60

