Using Mouse Events to Cause Subtle Movement on SVG Paths

[SammyC123 25 Likes (Newbie)]

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

[OSUblake 18,535 Likes (Superhero)]

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...

http://schepers.cc/svg/path/dotty.svg

 

 

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

[Carl 11,326 Likes (Superhero)]

 

 

             

 

 

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

[PointC 14,466 Likes (Superhero)]

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

[SammyC123 25 Likes (Newbie)]

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.

[OSUblake 18,535 Likes (Superhero)]

Thanks!

 

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. 

 

https://www.w3.org/2011/10/28-svg-minutes.html#item26