Svg Path Vs Line. See the SVG specifications for more information on what each parameter means. There are four other commands that are essentially simpler versions of the line commands.
It works by transforming a 0 dash 100 gap line into a 50 dash 0 gap version. Path element uses Path data which comprises of number of commands. Every element in SVG is positioned absolutely relative to the SVG viewport and the position inside the viewport is governed by the current coordinate system in useBut this similarity in positioning elements should not conceal the fact that there is a fundamental.
Its not often very useful because of all the things that can be drawn one single straight line is not a thing that people commonly need.
By turning the path you have at hand into one long dash and then animating the offset of that dash along the path you can mimic a line drawing effect using nothing but CSS and an SVG path. Youve drawn one of the lines half way off the canvas though. One of your lines is drawn at 150px from the top of the canvas so half its width is clipped off. Any shape or line.