📊 SVG Gauge Generator

Create circular progress gauges and meters as scalable SVG graphics

Values

Current Value: 75

Maximum Value

Label Text

Appearance

Start Color

End Color

Size (px): 200

Stroke Width: 20

Show ValueShow Label

Preview

SVG Code

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  
    <defs>
      <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#00ff00;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
      </linearGradient>
    </defs>
  
    <circle
      cx="100"
      cy="100"
      r="90"
      fill="none"
      stroke="#e0e0e0"
      stroke-width="20"
    />
  
    <circle
      cx="100"
      cy="100"
      r="90"
      fill="none"
      stroke="url(#gaugeGradient)"
      stroke-width="20"
      stroke-dasharray="565.4866776461628"
      stroke-dashoffset="141.37166941154067"
      stroke-linecap="round"
      transform="rotate(-90 100 100)"
    />
  
    <text
      x="100"
      y="100"
      text-anchor="middle"
      dominant-baseline="middle"
      font-size="40"
      font-weight="bold"
      fill="#333"
    >
      75
    </text>
  
    <text
      x="100"
      y="130"
      text-anchor="middle"
      dominant-baseline="middle"
      font-size="16"
      fill="#666"
    >
      Progress
    </text>
</svg>

Features

• Scalable vector graphics (SVG)
• Gradient color support
• Customizable size and stroke
• Optional value and label text
• Copy or download as .svg file