ToolBunny LogoToolBunny
Back to Homepage
SVG Shape Generator

Design your SVG shape, then copy the code or download the file.

Controls
4px
100px
100px
Preview
Generated SVG Code
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="#3b82f6" stroke="#1e40af" stroke-width="4" />
</svg>
About This Tool

The SVG Shape Generator is a creative tool for quickly generating Scalable Vector Graphics (SVG) code for basic shapes. It's perfect for developers, designers, and hobbyists who need simple icons, placeholders, or graphical elements for their web projects. You can choose from various shapes like rectangles, circles, stars, and polygons, and customize their properties—such as size, color, and stroke—with a live preview. Once you're done, you can copy the generated SVG code or download the shape as a `.svg` file.

How to Use
  1. Select a shape type from the tabs: Rectangle, Circle, Star, or Polygon.
  2. Use the controls on the left to customize the shape's properties. These controls will change depending on the selected shape (e.g., "Points" for a star, "Sides" for a polygon).
  3. Adjust common properties like "Fill Color," "Stroke Color," "Stroke Width," and the overall "Width," and "Height" of the SVG canvas.
  4. The "Preview" card will update in real-time to show your customized shape.
  5. The "Generated SVG Code" box will display the raw SVG markup for your shape.
  6. Click "Copy Code" to copy the SVG markup to your clipboard, or click "Download .svg" to save the shape as a file.
Related Tools

CSS Animation Generator

Visually create and customize CSS animations. Select a preset, adjust properties like duration and timing, and get the generated @keyframes and CSS code instantly.

CSS Border Generator

Visually create and customize CSS borders with styles, radius, and gradients. This tool provides a live preview and generates the corresponding CSS code for you to copy and paste.

AI Color Palette Generator

Unleash your creativity with our AI Color Palette Generator. Simply describe a mood, theme, or scene (e.g., "a calm beach sunset"), and our AI will generate a beautiful, harmonious color palette of 5 colors. Perfect for designers, artists, and brand managers looking for color inspiration.

Gradient Generator

Visually design and generate beautiful, smooth CSS gradients. Our interactive tool allows you to add multiple color stops, change the gradient type (linear or radial), and adjust the angle. Once you have the perfect gradient, just copy the generated CSS code.