Skip to content
ZeroServer.tools

SVG Shape Generator

Generate parametric star, polygon, heart, arrow, and speech bubble SVGs — export as markup or PNG.

Points5
Inner radius ratio0.50
Size70
Stroke width2px
SVG markup
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,30 120.572,71.684 166.574,78.369 133.287,110.816 141.145,156.631 100,135 58.855,156.631 66.713,110.816 33.426,78.369 79.428,71.684" fill="#7c6cf7" stroke="#1f1147" stroke-width="2" stroke-linejoin="round" />
</svg>

How the SVG Shape Generator works

Each shape is computed with plain trigonometry and Bezier curves, entirely in your browser. Stars and polygons place vertices around a circle using cos/sin at evenly spaced angles — stars alternate between an outer and an inner radius (controlled by the inner radius ratio) to create the points. The heart is built from two cubic Bezier lobes mirrored around a center line. The arrow is a shaft rectangle merged with a triangular head, and the speech bubble is a rounded rectangle with a small triangular tail cut into one corner. Adjust the controls and copy the resulting <svg> markup, or export a PNG rendered at 4x scale for crisp raster use.

Private & free — this tool runs entirely in your browser.

Recommended: Kinsta Fast managed hosting — up to $500 + 10% recurring.affiliate

Related Design & CSS tools