Trying to draw an SVG line using the mouse

svg
SVG line drawn free hand with a mouse

Here’s the deal.

As I start to eat my own dog food (ie, play around with XVG as an end-user), I realized that clicking on markers to create a line is just way too rigid, man.

I wanted to be able to click on the SVG surface and just use the mouse to create a new line anywhere I want.

The thing is, how do you even begin to do that in SVG?

Like, hey man, how do you draw a line by dragging a mouse?

I thought about it some, and came up with an idea involving mouse events. So I created a mini HTML/JS doc that looks like XVG and worked on it.

The pic above shows my first attempts at implementing this idea.

I will have a more accurate and flexible version up on CodePen as soon as I figure out the secret sauce.