Jump to content


Using Mouse Events to Cause Subtle Movement on SVG Paths

Moderator Tag
Go to solution Solved by OSUblake,

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 have an SVG with a number of drawn paths/lines.  How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them?


For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them.  But how can I make them go whichever direction the mouse passes through?


Or maybe even something cooler, like the particles.js repulsion effect?


I'm not looking for an entire code solution; just a helping hand to get me started.  I'll be updating my Codepen slowly as I work out how to go about this.


Thank you in advance.

See the Pen rxKvMj by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

The easiest way to animate a path is to use the MorphSVG plugin. If you need finer control, you can animate the points on a path directly. However, this can lead to a lot of undesired behavior because you can't accurately interpolate a Bezier because of their control points.


To make working with a path easier, you can use a spline that goes through all the points. The most common one used in computer graphics is probably a catmull-rom. If you've ever used the BezierPlugin, a catmull-rom works just like the BezierPlugin set to type "thru". I don't know if the plugin is actually using a catmull-rom, but it's behavior is very similar.


A catmull-rom can basically combine all the commands into one command. You can test it out here...





It's currently not part of the SVG spec, although there have been talks about adding it. However, this doesn't mean you can use them. I know that Snap.svg can parse a catmull-rom command in a path, designated by an "R".

<path d="M20,380 R58,342,100,342,100,300,140,250,190,210,220,197"/>

And here's a script I wrote that will convert an array of points into an open path. You can change the tension variable at the top of code to change the curviness of the path. 1 is the default, 0 will look like a polyline, and -1 will create loops around the points.


See the Pen BowJed?editors=0010 by osublake (@osublake) on CodePen


I took a stab at creating a repulsion effect with a path. However, instead of doing a straight up repulsion, I used the VelocityTracker to add some momentum to the points when you knock them around.


See the Pen ?editors=0010 by osublake (@osublake) on CodePen

  • Like 6
Link to comment
Share on other sites




:-P  :-P  :-P  :-P  :-P  :-P  :-P  :-P



nice one, Blake. don't know how you do it.

  • Like 6
Link to comment
Share on other sites

Blake, I think I'm gonna need some proof that you're human. I'm starting to suspect that you're in the Matrix.  :-P

  • Like 1
Link to comment
Share on other sites

That is probably the most comprehensive, well-structured, and brilliant answer I've ever received for any question on the internet.

Thank you for being you.

  • Like 2
Link to comment
Share on other sites



A catmull-rom doesn't always produce the best looking curve, but it should be ok for most uses cases.


In the future this is going to be much easier. I was just looking around, and it looks like catmull-rom is going to be part of the path syntax in SVG2.  :-)



Link to comment
Share on other sites

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.