I am little confused with the first example.

"M100,100 L300,100 L200,300 z"

Keep in mind that on computer screens 0,0 is the top left corner of the screen. So, when you draw a line from 300, 100 to 200, 300 the X coordinate is smaller, hence move left by 100px, & coordinate is larger so move down by 200px. Hope this clears it up.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.