title: Drawing SVG with Mouse
body: <p>I having be exploring several options for building an open-source HTML5 based application like Sketch, which will basically be vector based app for creating UI screens etc. </p>
  
  <p>I saw several great JS Libraries like <a href="http://snapsvg.io" rel="noreferrer">http://snapsvg.io</a>, <a href="http://paperjs.org" rel="noreferrer">http://paperjs.org</a>etc...</p>
  
  <p>And creating a static SVG element is as simple as below:</p>
  
  <pre><code>var s = Snap("#svg");
  // Lets create big circle in the middle:
  var bigCircle = s.circle(150, 150, 100);
  </code></pre>
  
  <p>What I am not having clue about is, binding the job to mouse move event. So if user click and drag, depending on the distance they dragged, the element should be created. The basic feature all editors have. I would need implement similar functionality for resizing also. </p>