drawing an svg path with the mouse

[kaplan 7 Likes (Newbie)]

I'm looking for suggestions or references on how I can draw in the browser with the mouse. I'd like to have the mouse movement create a svg path. I've been looking at Paper.js and D3js. I know that I'm going to be doing some animation with GSAP in addition to the drawing, so I'm also thinking about potential gotchas. If I end up with a canvas and svg paths, is GSAP ok with Canvas?

 

This is a classic technique from the old ActionScript days, to scribble out lines created by the mouse and I'm hoping to do it with SVG path.

 

It looks like paper.js is small and works with canvas, (I need to keep the overall file weight down) and a d3js example looks like it's just straight svg.

 

Any advice or insight would be appreciated. 

[PointC 8,599 Likes (Superhero)]

Have you taken a look at Blake's Doodle Morpher Pen? 

See the Pen dYVNYd by osublake (@osublake) on CodePen

 

He's also got a cool Line Trails pen that may be of some help:

See the Pen mEpado by osublake (@osublake) on CodePen

 

Happy tweening.

[kaplan 7 Likes (Newbie)]

Wow! Thanks sharing those links Craig! Blake is awesome! Just realized I have some of your codepen work 'hearted' too.
 

[edit-edit] ( i do think Blake is from the Matrix )

[PointC 8,599 Likes (Superhero)]

Just realized I have some of your codepen work 'hearted' too.

Some? You have to 'heart' all my work. I'm very insecure. 

 

Glad to help. Happy tweening.

[OSUblake 9,990 Likes (Superhero)]

Haha! You've been poking around PointC's house of vectors.

 

Here's another good one...

See the Pen Bzamom by osublake (@osublake) on CodePen

 

This one would be too slow for an animation, but I use GSAP to set the transforms...

See the Pen PZyymg by osublake (@osublake) on CodePen

 

When it comes to mouse drawing, SVG has it's limits as performance scales with the complexity of your shapes, but for simple stuff you should be ok. 

 

If you want all the bells and whistles, Paper.js is probably the best tool out there for a drawing library. It's even used as the renderer for an SVG editor, Boxy SVG.

 

And you can mix canvas and svg together with no problem. 

Motion path - 

See the Pen XXbLer by osublake (@osublake) on CodePen

Morphing - 

See the Pen RWeOWX by osublake (@osublake) on CodePen

[kaplan 7 Likes (Newbie)]

Thanks guys!! I'm getting there and playing around. I've been cramming on SVG paths, polyline and masks. 

 

Paper.js looks cool, but I'm going to need to keep the filesize down. Found svg.js it looks handy and is pretty small, but I don't think I need it.

 

I'm starting to get there, just playing around to see what I figure out.

See the Pen zBjxrE by kaplan (@kaplan) on CodePen

[muskan 0 Likes (Newbie)]

Hey! Did you succeed? I have a similar problem where I want to draw a SVG path with lines with the help of the movements of my mouse and I am kinda stuck here. Have gone through Pen too and browsing stuff to see if I can use anything similar. I want a path to be dynamically created as and when the mouse moves.

[najmu 0 Likes (Newbie)]

i want to use this code for angular 6 to draw svg line.How can i achieve this can anyone help me.I am very new to your page.do i need to install any library?

[mikel 1,823 Likes (Superhero)]

Hi @najmu,

 

Welcome to the GreenSock Forum.

 

Please take a look at Get started ...

If you have specific GreenSock-related questions, get in touch.

And then open a new post please.

 

Kind regards

Mikel