Animating SVG: Move shape in direction of mouse/rotate around fixed point?

Question

After looking through similar questions posted to the forum and not finding something that helped me solve my own problem, I'm posting it.

I'm using SVG.js to generate SVG shapes in a web document. I'd like one of those shapes to ”follow” the mouse/cursor.

By that I mean: The shape has a fixed position/anchor point (at its original center) and it can only move a limited distance (let's say 50px) away from this fixed point. I want the shape to move in the direction of the cursor, whenever the cursor moves, but never further than a defined distance away from its orignal position. I'm attaching a short animation to illustrate my description:

If the cursor were to disappear, the shape would snap back to its original center.

I know my way around Javascript, HTML and CSS. This type of element-manipulation is new to me and the math is giving my quite the headache, any help would be great.

It looks like I need the shape to basically rotate around its original center, with an angle relative to the cursor? I'm really unsure how to solve this. I have tried using a method to calculate the angle described in this post. My shape moves, but not as intended:

// init
var draw = SVG().addTo('body')

// draw 
window.shape = draw.circle(25, 25).stroke({
  color: '#000',
  width: 2.5
}).fill("#fff");
shape.attr("id", "circle1");
shape.move(50, 50)


// move
var circle = $("#circle1");
var dist = 10;

$(document).mousemove(function(e) {

  // angle
  var circleCenter = [circle.offset().left + circle.width() / 2, circle.offset().top + circle.height() / 2];
  var angle = Math.atan2(e.clientX - circleCenter[0], -(e.clientY - circleCenter[1])) * (180 / Math.PI);

  var x = Math.sin(angle) * dist;
  var y = (Math.cos(angle) * dist) * -1;

  shape.animate().dmove(x, y);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Note: It does not matter to me whether the solution depends on jQuery or not (ideally it doesn't).

Answer 1

After more fiddling around with some solutions to calculating angles and distances, I found the answer.

I'm using a fixed reference point to calculate the angle of the direct line between the center of the shape and the cursor. Then I move the shape relative to this reference point and by a given amount:

// Init canvas
var draw = SVG().addTo('body')

// Draw reference/anchor
var shape_marker_center = draw.circle(3,3).fill("#f00").move(150, 150);;
var grafikCenter = [shape_marker_center.attr("cx"), shape_marker_center.attr("cy")]

// Draw shapes
var shape = draw.circle(25, 25).stroke({color: '#000', width: 2.5 }).fill("none");
shape.attr("id", "circle1").attr({cx: grafikCenter[0], cy:grafikCenter[1]})
var shape2 = draw.circle(50, 50).stroke({color: '#000', width: 2.5 }).fill("none");
shape2.attr("id", "circle2").attr({cx: grafikCenter[0], cy:grafikCenter[1]})
var shape3 = draw.circle(75, 75).stroke({color: '#000', width: 2.5 }).fill("none");
shape3.attr("id", "circle3").attr({cx: grafikCenter[0], cy:grafikCenter[1]})

$(document).mousemove(function(e) {
  var pointA = [shape_marker_center.attr("cx"), shape_marker_center.attr("cy")];
  var pointB = [e.clientX, e.clientY];
  var angle = Math.atan2(pointB[1] - pointA[1], pointB[0] - pointA[0]) * 180 / Math.PI ;
  //
  var distance_x_1 = Math.cos(angle*Math.PI/180) * 16;
  var distance_y_1 = Math.sin(angle*Math.PI/180) * 16;
  var distance_x_2 = Math.cos(angle*Math.PI/180) * 8;
  var distance_y_2 = Math.sin(angle*Math.PI/180) * 8;
  //
  shape.center((grafikCenter[0] + distance_x_1), (grafikCenter[1] + distance_y_1));
  shape2.center((grafikCenter[0] + (distance_x_2) ), (grafikCenter[1] + (distance_y_2)));
})

svg {
  width: 100vw;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>