SVG Design Tool – first look

SVG design tool
Click to view working demo

Per this earlier post, I gave myself a week to come up with a prototype for my SVG design tool idea.

It took exacly 7 days — give or take a life I have to lead in between — to get an “early beta” version up and running.

Although it’s missing a lot of functionality, I’m pleased with the result — bones to hang things on.

I’m learning a great deal about DOM programming internals in the process. That is not really saying much, since I knew zilch not that long ago.

Next step is to provide the end user with the ability to dynamically create line elements that join “markers” (ie points on the circle) simply by mouse-clicking over any desired pair of points.

MY SVG tool already supports the markers concept.

Now it has to learn how to let the end user do this:

  1. click on marker x
  2. click on marker y
  3. draw a line joining the two “active” points.

There are a bunch of scenarios I have to figure out, like what happens when a user strays from the happy click path.

So I am going to take a refresher deep read or two on on JS mouse click events, and try to go with the flow (if I can) with arrow functions and other JS language features that can make JS hard to understand.

A concise, unflashy vanilla implementation is what I’m after in Round 2.

See u next Wednesday.