How to offset circle from cursor?

Question

JavaScript

I generated a bunch of circles in SVG and now I want to learn how to move them away from the cursor, but so that when the cursor leaves, they return back to their place ...

Through getBoundingClientRect() I recorded all the coordinates of the array ... and then I don’t know what to

do is being done? Please teach me - this is not a task and has nothing to do with commerce - I'm learning for myself ...

https://codepen.io/topicstarter/pen/MWjVmoK

Answer 1

Specify the maximum distance from the cursor at which elements should start moving. On the mousemove event on the parent, count the distances to the elements (Pythagorean theorem), those who are close enough, set the translate. To make the change of position smooth, define a transition for translate in styles.
https://jsfiddle.net/w6jf480k/1/