Jump to content
Search Community

drawing an svg path with the mouse

kaplan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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. 

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 8 months later...

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.

Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...