How to implement custom node-based reshaping for SVG ellipse inside a resizable reference box?...

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 <ellipse> and experimenting with <path> for more flexibility, but I couldn’t get rotation to work properly.

Question:

• 
  Is using an SVG <path> 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.

Continue reading...