Skip to content

Shape Drawer

Create and edit geometric shapes with precise measurements, live calculations, and export to SVG, CSS, or HTML

Updated

What is the Shape Drawer?

Shape Drawer is a professional geometric design tool that combines precision drawing with real-time mathematical calculations. Create rectangles, circles, polygons, stars, arcs, and arrows with exact dimensions, then export your work as production-ready SVG, CSS, or HTML code.

Unlike simple drawing apps, Shape Drawer treats every shape as a mathematical object. You control precise parameters like radius, rotation, opacity, and vertex position while the tool calculates area, perimeter, angles, and centroid coordinates automatically. The built-in grid system with optional snapping ensures perfect alignment for technical diagrams, UI elements, icons, and educational illustrations.

Whether you need a quick icon for a website, a precise geometric diagram for a presentation, or scalable vector graphics for print, Shape Drawer delivers professional results without requiring complex design software.

How it works

Shape Drawer operates entirely in your browser using React and SVG rendering. No data leaves your device, and no account is required.

Canvas and Coordinate System

The drawing canvas uses a Cartesian coordinate system with the origin at the top-left corner. Enable Grid to display alignment guides, and toggle Snap to constrain placement to grid increments. The Axes option shows center lines for symmetric designs.

Shape Types and Parameters

Each shape type exposes specific mathematical properties:

Shape Key Parameters Calculated Properties
Rectangle width, height, corner radius area, perimeter, centroid
Square size area, perimeter, centroid
Circle radius area, circumference, centroid
Ellipse radiusX, radiusY area, approximate perimeter, centroid
Triangle base, height, vertex offset area, perimeter, three angles, centroid
Polygon sides, radius area, perimeter, interior angles, centroid
Star points, outer radius, inner radius approximate area, perimeter, centroid
Arc radius, start angle, end angle, closed area (if closed), arc length, bounding box
Line start point, end point length, midpoint
Arrow start point, end point, head size length, direction

Creating Shapes

Switch to Draw mode and select a shape type. Click anywhere on the canvas to place the shape at that location. With snapping enabled, shapes align to the nearest grid intersection. Each new shape receives a unique ID and appears in the shape list for selection.

Editing Properties

Select Edit mode and click any shape to modify it. The sidebar displays all editable properties:

  • Position: X and Y coordinates
  • Dimensions: Width, height, radius, or other type-specific values
  • Appearance: Fill color, stroke color, stroke width, opacity
  • Transform: Rotation in degrees

Changes apply instantly, and calculated properties update in real time.

Grid and Snapping

Adjust Grid Size from 10 to 100 pixels. Subdivisions create finer guide lines without affecting snapping. Disable Snap for free placement when precise positioning matters more than alignment.

Animation

Enable Animate in Edit mode to continuously rotate all shapes. This helps verify visual balance and center of mass for complex compositions.

Presets

Quick-start buttons generate complete illustrations:

  • House: Purple walls, red roof, yellow door, blue windows, gray chimney
  • Flower: Pink petals rotating around an orange center with green stem
  • Rocket: Silver body with red nose cone, blue window, orange flame
  • Clear: Remove all shapes instantly

Export Formats

SVG: Scalable vector graphics with proper viewBox, xmlns declarations, and inline styles. Includes optional grid layer. Compatible with all modern browsers and design software.

CSS: Pure CSS shapes using border-radius, transforms, and absolute positioning. Limited to rectangles, circles, and ellipses; complex shapes fall back to SVG comments.

HTML: Complete standalone HTML document with embedded SVG, ready to save and open in any browser. Includes viewport meta tag and centered container styling.

Keyboard and Interaction

  • Click canvas in Draw mode: place new shape
  • Click shape in Edit mode: select for editing
  • Click selected shape: deselect
  • Shape list: click any entry to select and edit

Performance

Shape Drawer handles hundreds of shapes smoothly by using React's useMemo for expensive calculations and SVG's efficient path rendering. The animation loop uses requestAnimationFrame for 60fps updates without blocking the main thread.

Examples

Draw a precise hexagon

Create a regular hexagon with exact radius and calculate its area and perimeter instantly

Select Polygon tool, set sides to 6, radius to 100px
 
Regular hexagon with area 25,980 px² and perimeter 600 px

Design a five-pointed star

Create a star with custom inner and outer radius for badges or icons

Select Star tool, set points to 5, outer radius 80px, inner radius 30px
 
Symmetric five-pointed star ready for export as SVG

Export responsive shapes

Generate clean SVG code for web development with proper viewBox and scalable coordinates

Draw rectangle and circle, click Export, select SVG format
 
Valid SVG markup with proper xmlns and styling attributes

Calculate triangle properties

Create a triangle and see real-time angle measurements and centroid position

Draw triangle with base 120px, height 100px, vertex offset 0.2
 
Triangle with angles 67°, 56°, 57° and centroid coordinates displayed

Build a house icon

Use the house preset to quickly generate a complete building illustration

Click House preset button
 
Multi-layer house with roof, walls, door, windows and chimney

Frequently asked questions

What shapes can I create with Shape Drawer?

Shape Drawer supports ten geometric primitives: rectangle, square, circle, ellipse, triangle, polygon, star, arc, line, and arrow. Each shape exposes precise parameters like radius, vertex count, or corner radius for mathematical accuracy.

Can I export my drawings for use in websites?

Yes. Export to SVG for scalable vector graphics, CSS for pure CSS shapes, or HTML for complete standalone documents. SVG export includes proper viewBox coordinates and works in all modern browsers and design tools like Figma, Illustrator, and Inkscape.

Does Shape Drawer work offline?

Yes. Shape Drawer runs entirely in your browser with no server communication. Once loaded, it functions without an internet connection. Your drawings never leave your device.

How do I align shapes precisely?

Enable Grid to display alignment guides, then toggle Snap to constrain placement to grid increments. Adjust the Grid Size slider to control spacing from 10 to 100 pixels. For ultimate precision, disable snap and enter exact coordinates in the Edit panel.

What calculations does Shape Drawer perform automatically?

For every shape, Shape Drawer calculates area and perimeter. Triangles display all three interior angles. Polygons show interior angle measures. Circles and ellipses reveal circumference or approximation. Every shape reports its centroid (geometric center) and bounding box coordinates.

Can I animate my shapes?

Yes. In Edit mode, enable the Animate switch to continuously rotate all shapes. This helps visualize balance and symmetry. Disable animation to resume static editing.

Why do some shapes export differently in CSS format?

CSS shapes rely on border-radius and transforms, which only approximate rectangles, circles, and ellipses. Triangles use border tricks. Stars, polygons, arcs, and arrows require SVG path data and export with explanatory comments in CSS mode. Use SVG export for complete fidelity.

How do I duplicate a shape?

Select the shape in Edit mode, then click the Duplicate button in the sidebar. The copy appears offset by 20 pixels for easy selection. Alternatively, note the shape's parameters and create a new one manually.

What is vertex offset in triangles?

Vertex offset controls the horizontal position of the triangle's apex relative to its base center. At 0, the triangle is isosceles. Negative values shift the apex left; positive values shift it right. This creates scalene triangles for more dynamic compositions.

Can I change colors after creating a shape?

Yes. Select any shape in Edit mode to reveal color pickers for fill and stroke. Choose from preset swatches or enter custom hex codes. Changes apply instantly.

Is there a limit to how many shapes I can draw?

No fixed limit exists. Performance depends on your device's capabilities. Hundreds of shapes render smoothly on modern hardware. For complex illustrations, consider grouping shapes in your exported SVG using external editors.

How do I delete a single shape?

Select the shape in Edit mode and click the Delete button in the sidebar, or use the Clear button in the toolbar to remove all shapes at once.

What browsers support Shape Drawer?

Shape Drawer requires a modern browser with ES2020, React 18, and SVG support. This includes Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+. Internet Explorer is not supported.

Can I save my work and resume later?

Shape Drawer does not include built-in persistence. To save work, export as SVG or HTML and re-import by viewing the source code. For frequent projects, keep exported files organized and re-open in Shape Drawer by recreating parameters from the SVG coordinates.

Related tools

More utilities you might find handy.

Visualizer

Binary Search Visualizer

Visualize binary search algorithm step by step
Visualizer

Recursion Tree Visualizer

Visualize recursive call trees step by step
Visualizer

Regex Visualizer — Railroad Diagram Generator for Regular Expressions

Free online regex visualizer that renders any JavaScript regular expression as an interactive railroad diagram, with a plain-English breakdown, live match tester, and ReDoS warnings — all in your browser.