all great

src/App.jsx

@@ -5,8 +5,8 @@ export default function App() {
   const handleMount = (editor) => {
     const centerX = 300;
     const centerY = 200;
-    const width = 40;
-    const height = 100;
+    const petal_width = 10;
+    const petal_height = 20;
     const angles = [0, (Math.PI * 2) / 3, (Math.PI * 4) / 3];
 
     // Create shapes with adjusted positions and dimensions
@@ -15,13 +15,13 @@ export default function App() {
       ...angles.map((angle, index) => {
         const id = createShapeId(`bgEllipse${index + 1}`);
         // Adjust position calculations to use the new dimensions
-        const x = centerX + Math.sin(angle) * (width / 2);
-        const y = centerY - Math.cos(angle) * (width / 2);
-        return {id,type: "geo",x,y,rotation: angle,props: { h: width, w: height, color: "violet", dash: "draw", fill: "solid", font: "draw", geo: "ellipse", size: "xl" },
+        const x = centerX + Math.sin(angle) * (petal_width / 2);
+        const y = centerY - Math.cos(angle) * (petal_width / 2);
+        return {id,type: "geo",x,y,rotation: angle,props: { h: petal_width, w: petal_height, color: "violet", dash: "draw", fill: "solid", font: "draw", geo: "ellipse", size: "xl" },
         };
       }),
       // Center Ellipse
-      {id: createShapeId("centerEllipse"),type: "geo",x: centerX - 25,y: centerY - 25,props: { h: 50, w: 50, color: "yellow", dash: "draw", fill: "solid", font: "draw", geo: "ellipse", size: "m" },
+      {id: createShapeId("centerEllipse"),type: "geo",x: centerX - 2.5,y: centerY - 2.5,props: { h: 5, w: 5, color: "yellow", dash: "draw", fill: "solid", font: "draw", geo: "ellipse", size: "xl" },
       },
     ];