sketchmark 2.1.0 → 2.1.2

package/examples/modal-dialog.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600" role="img"><defs><filter id="sketchmark-filter-0" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="0" dy="8" stdDeviation="32" flood-color="#000000" flood-opacity="0.15"/></filter></defs><rect x="0" y="0" width="800" height="600" fill="#64748b"/><path id="overlay" opacity="0.5" d="M 0 0 L 800 0 L 800 600 L 0 600 Z" fill="#0f172a" stroke="none" stroke-width="0"/><path id="modal-bg" filter="url(#sketchmark-filter-0)" d="M 152 60 L 648 60 Q 660 60 660 72 L 660 528 Q 660 540 648 540 L 152 540 Q 140 540 140 528 L 140 72 Q 140 60 152 60 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="modal-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="168" y="98">Delete Project</tspan></text><text id="modal-desc" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#475569"><tspan x="168" y="127">This action will permanently remove the project and all associated</tspan><tspan x="168" y="148.7">data. This cannot be undone.</tspan></text><path id="warning-bg" d="M 174 176 L 626 176 Q 632 176 632 182 L 632 226 Q 632 232 626 232 L 174 232 Q 168 232 168 226 L 168 182 Q 168 176 174 176 Z" fill="#fef2f2" stroke="#fecaca" stroke-width="1"/><text id="warning-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#991b1b"><tspan x="182" y="196">Warning: 3 team members will lose access immediately. Any</tspan><tspan x="182" y="214">active integrations connected to this project will stop working.</tspan></text><text id="field1-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#1e293b"><tspan x="168" y="262.5">Project Name</tspan></text><text id="field1-helper" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#64748b"><tspan x="168" y="284">Enter the project name exactly as shown to confirm deletion.</tspan><tspan x="168" y="302">This helps prevent accidental removal of important data.</tspan></text><path id="field1-input-bg" d="M 174 320 L 626 320 Q 632 320 632 326 L 632 352 Q 632 358 626 358 L 174 358 Q 168 358 168 352 L 168 326 Q 168 320 174 320 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="field1-placeholder" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="180" y="339">acme-dashboard-v2</tspan></text><text id="field2-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#1e293b"><tspan x="168" y="384.5">Confirmation Phrase</tspan></text><text id="field2-helper" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#64748b"><tspan x="168" y="406">Type "delete my project" to enable the delete button.</tspan></text><path id="field2-input-bg" d="M 174 426 L 626 426 Q 632 426 632 432 L 632 458 Q 632 464 626 464 L 174 464 Q 168 464 168 458 L 168 432 Q 168 426 174 426 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="field2-placeholder" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="180" y="445">delete my project</tspan></text><path id="footer-bg" d="M 140 472 L 660 472 L 660 528 Q 660 540 648 540 L 152 540 Q 140 540 140 528 Z" fill="#f8fafc" stroke="none" stroke-width="0"/><path id="footer-border" d="M 140 472 L 660 472" fill="none" stroke="#e2e8f0" stroke-width="1"/><path id="btn-cancel-bg" d="M 426 487 L 494 487 Q 500 487 500 493 L 500 519 Q 500 525 494 525 L 426 525 Q 420 525 420 519 L 420 493 Q 420 487 426 487 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="btn-cancel-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#475569"><tspan x="460" y="506">Cancel</tspan></text><path id="btn-delete-bg" d="M 518 487 L 626 487 Q 632 487 632 493 L 632 519 Q 632 525 626 525 L 518 525 Q 512 525 512 519 L 512 493 Q 512 487 518 487 Z" fill="#dc2626" stroke="none" stroke-width="0"/><text id="btn-delete-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#ffffff"><tspan x="572" y="506">Delete Project</tspan></text></svg>

package/examples/modal-dialog.visual.json

@@ -1,239 +0,0 @@
-{
-  "version": 1,
-  "canvas": {
-    "width": 800,
-    "height": 600,
-    "background": "#64748b"
-  },
-  "elements": [
-    {
-      "id": "overlay",
-      "type": "path",
-      "d": "M 0 0 L 800 0 L 800 600 L 0 600 Z",
-      "fill": "#0f172a",
-      "opacity": 0.5,
-      "stroke": "none"
-    },
-    {
-      "id": "modal-bg",
-      "type": "path",
-      "d": "M 152 60 L 648 60 Q 660 60 660 72 L 660 528 Q 660 540 648 540 L 152 540 Q 140 540 140 528 L 140 72 Q 140 60 152 60 Z",
-      "fill": "#ffffff",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1,
-      "effects": {
-        "shadow": {
-          "dx": 0,
-          "dy": 8,
-          "blur": 32,
-          "color": "#000000",
-          "opacity": 0.15
-        }
-      }
-    },
-    {
-      "id": "modal-title",
-      "type": "text",
-      "x": 168,
-      "y": 88,
-      "text": "Delete Project",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 20,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 700,
-      "fill": "#0f172a"
-    },
-    {
-      "id": "modal-desc",
-      "type": "text",
-      "x": 168,
-      "y": 120,
-      "text": "This action will permanently remove the project and all associated\ndata. This cannot be undone.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.55,
-      "fill": "#475569",
-      "maxWidth": 464
-    },
-    {
-      "id": "warning-bg",
-      "type": "path",
-      "d": "M 174 176 L 626 176 Q 632 176 632 182 L 632 226 Q 632 232 626 232 L 174 232 Q 168 232 168 226 L 168 182 Q 168 176 174 176 Z",
-      "fill": "#fef2f2",
-      "stroke": "#fecaca",
-      "strokeWidth": 1
-    },
-    {
-      "id": "warning-text",
-      "type": "text",
-      "x": 182,
-      "y": 190,
-      "text": "Warning: 3 team members will lose access immediately. Any\nactive integrations connected to this project will stop working.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 500,
-      "lineHeight": 1.5,
-      "fill": "#991b1b",
-      "maxWidth": 436
-    },
-    {
-      "id": "field1-label",
-      "type": "text",
-      "x": 168,
-      "y": 256,
-      "text": "Project Name",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "field1-helper",
-      "type": "text",
-      "x": 168,
-      "y": 278,
-      "text": "Enter the project name exactly as shown to confirm deletion.\nThis helps prevent accidental removal of important data.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.5,
-      "fill": "#64748b",
-      "maxWidth": 464
-    },
-    {
-      "id": "field1-input-bg",
-      "type": "path",
-      "d": "M 174 320 L 626 320 Q 632 320 632 326 L 632 352 Q 632 358 626 358 L 174 358 Q 168 358 168 352 L 168 326 Q 168 320 174 320 Z",
-      "fill": "#ffffff",
-      "stroke": "#cbd5e1",
-      "strokeWidth": 1
-    },
-    {
-      "id": "field1-placeholder",
-      "type": "text",
-      "x": 180,
-      "y": 339,
-      "text": "acme-dashboard-v2",
-      "align": "left",
-      "valign": "middle",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "field2-label",
-      "type": "text",
-      "x": 168,
-      "y": 378,
-      "text": "Confirmation Phrase",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "field2-helper",
-      "type": "text",
-      "x": 168,
-      "y": 400,
-      "text": "Type \"delete my project\" to enable the delete button.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#64748b",
-      "maxWidth": 464
-    },
-    {
-      "id": "field2-input-bg",
-      "type": "path",
-      "d": "M 174 426 L 626 426 Q 632 426 632 432 L 632 458 Q 632 464 626 464 L 174 464 Q 168 464 168 458 L 168 432 Q 168 426 174 426 Z",
-      "fill": "#ffffff",
-      "stroke": "#cbd5e1",
-      "strokeWidth": 1
-    },
-    {
-      "id": "field2-placeholder",
-      "type": "text",
-      "x": 180,
-      "y": 445,
-      "text": "delete my project",
-      "align": "left",
-      "valign": "middle",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "footer-bg",
-      "type": "path",
-      "d": "M 140 472 L 660 472 L 660 528 Q 660 540 648 540 L 152 540 Q 140 540 140 528 Z",
-      "fill": "#f8fafc",
-      "stroke": "none"
-    },
-    {
-      "id": "footer-border",
-      "type": "path",
-      "d": "M 140 472 L 660 472",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1,
-      "fill": "none"
-    },
-    {
-      "id": "btn-cancel-bg",
-      "type": "path",
-      "d": "M 426 487 L 494 487 Q 500 487 500 493 L 500 519 Q 500 525 494 525 L 426 525 Q 420 525 420 519 L 420 493 Q 420 487 426 487 Z",
-      "fill": "#ffffff",
-      "stroke": "#cbd5e1",
-      "strokeWidth": 1
-    },
-    {
-      "id": "btn-cancel-label",
-      "type": "text",
-      "x": 460,
-      "y": 506,
-      "text": "Cancel",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 500,
-      "fill": "#475569"
-    },
-    {
-      "id": "btn-delete-bg",
-      "type": "path",
-      "d": "M 518 487 L 626 487 Q 632 487 632 493 L 632 519 Q 632 525 626 525 L 518 525 Q 512 525 512 519 L 512 493 Q 512 487 518 487 Z",
-      "fill": "#dc2626",
-      "stroke": "none"
-    },
-    {
-      "id": "btn-delete-label",
-      "type": "text",
-      "x": 572,
-      "y": 506,
-      "text": "Delete Project",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#ffffff"
-    }
-  ]
-}

package/examples/origin-effects-lab-check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="760" viewBox="0 0 1280 760" role="img"><rect x="0" y="0" width="1280" height="760" fill="#07111f"/><text id="lab_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="38" font-weight="700" fill="#f8fafc"><tspan x="70" y="71">Origin Transform Lab</tspan></text><text id="lab_body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#94a3b8"><tspan x="70" y="104">Same rounded rectangle, animated as a group. Only the origin changes.</tspan></text><text id="scale_row_label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="700" fill="#7dd3fc"><tspan x="70" y="131">Scale tests</tspan></text><text id="rotate_row_label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="700" fill="#7dd3fc"><tspan x="70" y="406">Rotation tests</tspan></text><path id="scale_top_left_panel" d="M 92 150 L 318 150 Q 340 150 340 172 L 340 368 Q 340 390 318 390 L 92 390 Q 70 390 70 368 L 70 172 Q 70 150 92 150 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="scale_top_left_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="90" y="176">Top-left origin</tspan></text><text id="scale_top_left_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="90" y="198">[0, 0]</tspan></text><path id="scale_top_left_guide_h" d="M 90 298 L 320 298" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="scale_top_left_guide_v" d="M 208 218 L 208 370" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="scale_top_left_origin" transform="translate(128 248)"><path id="scale_top_left_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_top_left_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_top_left_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="scale_top_left_group" transform="translate(128 248) translate(0 0) scale(0.9681869211307477 0.9681869211307477) translate(0 0)"><path id="scale_top_left_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#818cf8" stroke="#dbeafe" stroke-width="2"/></g><path id="rotate_top_left_panel" d="M 92 435 L 318 435 Q 340 435 340 457 L 340 653 Q 340 675 318 675 L 92 675 Q 70 675 70 653 L 70 457 Q 70 435 92 435 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="rotate_top_left_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="90" y="461">Top-left origin</tspan></text><text id="rotate_top_left_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="90" y="483">[0, 0]</tspan></text><path id="rotate_top_left_guide_h" d="M 90 583 L 320 583" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="rotate_top_left_guide_v" d="M 208 503 L 208 655" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="rotate_top_left_origin" transform="translate(128 533)"><path id="rotate_top_left_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_top_left_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_top_left_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="rotate_top_left_group" transform="translate(128 533) rotate(21.33289850236273 0 0)"><path id="rotate_top_left_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#818cf8" stroke="#dbeafe" stroke-width="2"/></g><path id="scale_center_panel" d="M 387 150 L 613 150 Q 635 150 635 172 L 635 368 Q 635 390 613 390 L 387 390 Q 365 390 365 368 L 365 172 Q 365 150 387 150 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="scale_center_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="385" y="176">Center origin</tspan></text><text id="scale_center_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="385" y="198">[80, 50]</tspan></text><path id="scale_center_guide_h" d="M 385 298 L 615 298" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="scale_center_guide_v" d="M 503 218 L 503 370" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="scale_center_origin" transform="translate(503 298)"><path id="scale_center_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_center_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_center_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="scale_center_group" transform="translate(423 248) translate(80 50) scale(0.9681869211307477 0.9681869211307477) translate(-80 -50)"><path id="scale_center_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#38bdf8" stroke="#dbeafe" stroke-width="2"/></g><path id="rotate_center_panel" d="M 387 435 L 613 435 Q 635 435 635 457 L 635 653 Q 635 675 613 675 L 387 675 Q 365 675 365 653 L 365 457 Q 365 435 387 435 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="rotate_center_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="385" y="461">Center origin</tspan></text><text id="rotate_center_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="385" y="483">[80, 50]</tspan></text><path id="rotate_center_guide_h" d="M 385 583 L 615 583" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="rotate_center_guide_v" d="M 503 503 L 503 655" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="rotate_center_origin" transform="translate(503 583)"><path id="rotate_center_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_center_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_center_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="rotate_center_group" transform="translate(423 533) rotate(21.33289850236273 80 50)"><path id="rotate_center_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#38bdf8" stroke="#dbeafe" stroke-width="2"/></g><path id="scale_bottom_right_panel" d="M 682 150 L 908 150 Q 930 150 930 172 L 930 368 Q 930 390 908 390 L 682 390 Q 660 390 660 368 L 660 172 Q 660 150 682 150 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="scale_bottom_right_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="680" y="176">Bottom-right origin</tspan></text><text id="scale_bottom_right_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="680" y="198">[160, 100]</tspan></text><path id="scale_bottom_right_guide_h" d="M 680 298 L 910 298" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="scale_bottom_right_guide_v" d="M 798 218 L 798 370" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="scale_bottom_right_origin" transform="translate(878 348)"><path id="scale_bottom_right_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_bottom_right_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_bottom_right_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="scale_bottom_right_group" transform="translate(718 248) translate(160 100) scale(0.9681869211307477 0.9681869211307477) translate(-160 -100)"><path id="scale_bottom_right_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#22c55e" stroke="#dbeafe" stroke-width="2"/></g><path id="rotate_bottom_right_panel" d="M 682 435 L 908 435 Q 930 435 930 457 L 930 653 Q 930 675 908 675 L 682 675 Q 660 675 660 653 L 660 457 Q 660 435 682 435 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="rotate_bottom_right_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="680" y="461">Bottom-right origin</tspan></text><text id="rotate_bottom_right_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="680" y="483">[160, 100]</tspan></text><path id="rotate_bottom_right_guide_h" d="M 680 583 L 910 583" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="rotate_bottom_right_guide_v" d="M 798 503 L 798 655" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="rotate_bottom_right_origin" transform="translate(878 633)"><path id="rotate_bottom_right_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_bottom_right_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_bottom_right_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="rotate_bottom_right_group" transform="translate(718 533) rotate(21.33289850236273 160 100)"><path id="rotate_bottom_right_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#22c55e" stroke="#dbeafe" stroke-width="2"/></g><path id="scale_outside_right_panel" d="M 977 150 L 1203 150 Q 1225 150 1225 172 L 1225 368 Q 1225 390 1203 390 L 977 390 Q 955 390 955 368 L 955 172 Q 955 150 977 150 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="scale_outside_right_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="975" y="176">Outside-right origin</tspan></text><text id="scale_outside_right_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="975" y="198">[200, 50]</tspan></text><path id="scale_outside_right_guide_h" d="M 975 298 L 1205 298" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="scale_outside_right_guide_v" d="M 1093 218 L 1093 370" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="scale_outside_right_origin" transform="translate(1213 298)"><path id="scale_outside_right_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_outside_right_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="scale_outside_right_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="scale_outside_right_group" transform="translate(1013 248) translate(200 50) scale(0.9681869211307477 0.9681869211307477) translate(-200 -50)"><path id="scale_outside_right_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#f59e0b" stroke="#dbeafe" stroke-width="2"/></g><path id="rotate_outside_right_panel" d="M 977 435 L 1203 435 Q 1225 435 1225 457 L 1225 653 Q 1225 675 1203 675 L 977 675 Q 955 675 955 653 L 955 457 Q 955 435 977 435 Z" fill="#0d1a2e" stroke="#193252" stroke-width="1.5"/><text id="rotate_outside_right_title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#f8fafc"><tspan x="975" y="461">Outside-right origin</tspan></text><text id="rotate_outside_right_note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#94a3b8"><tspan x="975" y="483">[200, 50]</tspan></text><path id="rotate_outside_right_guide_h" d="M 975 583 L 1205 583" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><path id="rotate_outside_right_guide_v" d="M 1093 503 L 1093 655" fill="none" stroke="#173054" stroke-width="1" stroke-dasharray="6 6"/><g id="rotate_outside_right_origin" transform="translate(1213 583)"><path id="rotate_outside_right_origin_cross_h" d="M -16 0 L 16 0" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_outside_right_origin_cross_v" d="M 0 -16 L 0 16" fill="none" stroke="#fde047" stroke-width="2" stroke-linecap="round"/><path id="rotate_outside_right_origin_dot" d="M -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0" fill="#fde047" stroke="#0f172a" stroke-width="1.5"/></g><g id="rotate_outside_right_group" transform="translate(1013 533) rotate(21.33289850236273 200 50)"><path id="rotate_outside_right_rect" d="M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z" fill="#f59e0b" stroke="#dbeafe" stroke-width="2"/></g></svg>