I have an svg whose lines i want move in the direction of mouse movement (like the grokking of bezier path).

[AvaterClasher]

I want the svg's lines to move a bit due to my mouse position and then snap back to its original position. Like this codepen but without the draggability.It should read my mouse's position. CODEPEN Link -> 

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

. And then do the same things on this svg --> 

See the Pen MWZJaOy by AvaterClasher (@AvaterClasher) on CodePen

[Trapti]

Hi, 

 

I think the problem is not clear. 

 

Final SVG is a path which has many points which point you want to move on cursor? Changing the point on a cursor move is easy. All you have to do is convert SVG path to Template literals and change the particular coordinate with cursor's coordinate in JS. If the shape needs to modify, then use morph plugin gsap. 
Here it is not clear the behaviour you are trying to achieve. 

 

This is the pen I did for line drawing SVG on the cursor move. 

See the Pen VwLZEZB?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

 

[AvaterClasher]

Um i was clear on my question . But what want is the lines to curve a bit on the mouse movement and then return to normal.

[GreenSock]

10 hours ago, AvaterClasher said:

Um i was clear on my question . But what want is the lines to curve a bit on the mouse movement and then return to normal.

That's a much more complicated effect, but it's totally doable. It's beyond the scope of help we can provide for free in these forums, though. Please read the forum guidelines. You'd basically need to figure out where the control points are for the curves and then influence them when they're in a close enough proximity to the pointer. 

 

If you'd like to explore paid consulting options, feel free to reach out to us directly or post in the "Jobs & Freelance" forum. 

 

Good luck!