SVG Rotation Point Setter

\n setSvgUrl(e.target.value)}\n placeholder=\"Paste SVG URL here\"\n className=\"url-input\"\n />\n {svgContent && (\n

\n \n

\n )}\n

\n Coordinates: ({coordinates.x}, {coordinates.y})\n

\n {rotationPoint && (\n

Rotation point set at: ({rotationPoint.x}, {rotationPoint.y})

Instructions for AI:

\n \n Rotate the SVG around the point ({rotationPoint.x}, {rotationPoint.y}).\n \n \n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n SVG Rotation Point Setter\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\n.container {\n max-width: 100%;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n color: #333;\n}\n\n.url-input {\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.svg-container {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 75%; /* Adjust this value to change the aspect ratio */\n border: 1px solid #ddd;\n overflow: hidden;\n}\n\n.svg-container > div,\n.svg-container > svg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.grid-overlay {\n pointer-events: none;\n}\n\n.coordinates, .rotation-instructions {\n margin-top: 20px;\n font-weight: bold;\n}\n\n.rotation-instructions code {\n display: block;\n background-color: #f4f4f4;\n padding: 10px;\n margin: 10px 0;\n border-radius: 4px;\n}\n\ntext {\n font-size: 12px;\n fill: #333;\n}\n\nbutton {\n margin-top: 10px;\n padding: 5px 10px;\n background-color: #f44336;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #d32f2f;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/Svgcoordonates/code/main.tsx","extension","actionData","errors"]