I’m working on a feature similar to Figma or Lucidchart where an ellipse (or circle) is placed inside a reference box (a square) with four corner handles for resizing.

Screen recording expectation

Current functionality:

• Dragging a corner handle resizes the ellipse while keeping the opposite corner fixed.

• Dragging a side handle adjusts the width or height proportionally.

This works fine for ellipses.

Now, I want to add:

• custom node-based reshaping of the ellipse using a rotation handle.

I tried multiple approaches, including using SVG and experimenting with for more flexibility, but I couldn’t get rotation to work properly.

Question:

• Is using an SVG the right approach for enabling rotation and node-based reshaping?

• Are there any recommended patterns or libraries for implementing this functionality?

Any guidance or code examples would be greatly appreciated.