The Geometria SVG Visualiser App is an interactive design tool that allows users to generate, customise, preview, and export SVG shapes in real time. Users can select geometric shapes, apply colours, modify strokes, scale objects, rotate designs, and instantly copy generated SVG code.
Users can choose between multiple SVG shapes including circles, squares, triangles, pentagons, hexagons, octagons, stars, hearts, and arrows.
Every change instantly updates the SVG preview area in real time using JavaScript and dynamic SVG element generation.
The app includes a colour picker for applying custom fill colours to any shape. Hex colour values are also displayed live.
Users can change stroke colours and stroke width using modern slider controls for precise SVG styling.
Shapes can be scaled and rotated dynamically using SVG transform attributes.
The generated SVG markup is displayed inside a textarea and can be copied directly to the clipboard using the built-in copy button.
When the page loads, JavaScript waits for the DOMContentLoaded event. The application then retrieves all interface elements such as buttons, sliders, colour pickers, and the SVG preview container.
Clicking a shape button updates the current selected shape. The application dynamically creates SVG elements using document.createElementNS().
Fill colour, stroke colour, stroke width, scaling, and rotation are applied directly to the generated SVG element through SVG attributes.
Complex polygon shapes such as triangles, pentagons, hexagons, and octagons are generated mathematically using trigonometry and coordinate calculations.
The app serialises the generated SVG using XMLSerializer(), formats the code, and displays it inside the output textarea.
The copy button selects the generated SVG code and copies it to the user's clipboard for use in websites, projects, or design systems.
Displays the application logo, title, and navigation link back to the main menu.
Contains all interactive controls including shape selectors, colour pickers, sliders, and transformation settings.
Shows the live SVG output in a scalable responsive preview container.
Displays generated SVG markup and includes a button for clipboard copying.
The application automatically creates clean SVG markup similar to the example below:
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
width="200"
height="200">
<circle
cx="100"
cy="100"
r="80"
fill="#4a80f0"
stroke="#ffffff"
stroke-width="2"
/>
</svg>
Quickly generate simple vector icons and export the SVG code directly into websites or apps.
Use transformation controls to experiment with rotations and scaling before final production.
The live code output helps beginners understand how SVG elements and attributes work together.