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 lets you draw and edit common geometric shapes, adjust their dimensions and appearance, and export SVG, CSS, or HTML. It also displays calculated geometry such as area, perimeter, and centroid for supported shapes.

Use the grid and optional snapping to help align shapes. Some reported values are approximations, and measurements may not account for rotation; check the exported drawing if you need exact geometry.

It can be useful for sketches, simple diagrams, and shape experiments; review exported code before using it in a production project.

How it works

Shape Drawer draws and calculates shapes in your browser using SVG.

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 to the drawing and the displayed calculations update. Some metrics are approximate, and displayed bounding boxes may not reflect rotation.

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 viewBox coordinates, namespace declaration, and inline styles. An optional grid layer can be included. Check the result in your target browser or 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

Rendering performance depends on your device and the complexity of the drawing. Animation uses requestAnimationFrame; large drawings may still affect responsiveness.

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 shape types: rectangle, square, circle, ellipse, triangle, polygon, star, arc, line, and arrow. Each has adjustable properties such as radius, vertex count, or corner radius.

Can I export my drawings for use in websites?

Yes. Export to SVG for scalable vector graphics, CSS for supported simple shapes, or HTML for a standalone document containing SVG. Review exported code and appearance in your target application before use.

Does Shape Drawer work offline?

The drawing and calculations run in your browser. Once the page is loaded, the tool can be used without an internet connection.

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 manual placement, disable snap and edit the coordinates in the Edit panel. Displayed geometry values are approximate for some shapes and may not account for rotation.

What calculations does Shape Drawer perform automatically?

The tool displays area and perimeter values for each shape type, along with other measurements where available. Some values are approximations (such as star area and ellipse perimeter); line and arrow areas are zero, and bounding boxes may not account for rotation.

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?

There is no fixed shape-count limit. Performance depends on your device and drawing complexity; large drawings may become slower.

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 save-and-resume or import. Export your drawing as SVG or HTML to keep or use it elsewhere; to continue editing in the tool later, you will need to recreate the shapes.

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

Visualize common JavaScript regex syntax with a railroad diagram, token explanations, and a match tester. Includes a heuristic warning for some nested quantifiers.