Jump to content
kaplan

drawing an svg path with the mouse

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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.

:)

  • Like 5

Share this post


Link to post
Share on other sites

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 )

  • Like 3

Share this post


Link to post
Share on other sites

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

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

 

Glad to help. Happy tweening.

:)

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 5

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

 

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.