MetricGauge

metricgauge-1779388705696.tsx

'use client';
import { useState, useEffect } from 'react';

export default function MetricGauge({ value = 73, max = 100, label = "Performance Score", unit = "%" }) {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => setAnimated(value), 300);
    return () => clearTimeout(timer);
  }, [value]);

  const size = 180, cx = 90, cy = 100, r = 70;
  const startAngle = -210, endAngle = 30;
  const totalArc = endAngle - startAngle;
  const filled = (animated / max) * totalArc;
  const toRad = d => (d * Math.PI) / 180;
  const arcPath = (start, end) => {
    const s = { x: cx + r * Math.cos(toRad(start)), y: cy + r * Math.sin(toRad(start)) };
    const e = { x: cx + r * Math.cos(toRad(end)), y: cy + r * Math.sin(toRad(end)) };
    const large = end - start > 180 ? 1 : 0;
    return `M ${s.x} ${s.y} A ${r} ${r} 0 ${large} 1 ${e.x} ${e.y}`;
  };

  const color = animated >= 80 ? '#4ade80' : animated >= 60 ? '#C9A84C' : '#ef4444';

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', textAlign: 'center', display: 'inline-block' }}>
      <svg width={size} height={size * 0.85}>
        <path d={arcPath(startAngle, endAngle)} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="12" strokeLinecap="round" />
        <path
          d={arcPath(startAngle, startAngle + filled)}
          fill="none" stroke={color} strokeWidth="12" strokeLinecap="round"
          style={{ transition: 'all 1.2s cubic-bezier(0.4,0,0.2,1)', filter: `drop-shadow(0 0 8px ${color}80)` }}
        />
        <text x={cx} y={cy - 4} textAnchor="middle" fill="#F5F5F0" fontSize="32" fontWeight="800" fontFamily="system-ui">{animated}</text>
        <text x={cx} y={cy + 20} textAnchor="middle" fill="rgba(245,245,240,0.4)" fontSize="14" fontFamily="system-ui">{unit}</text>
      </svg>
      <p style={{ margin: '0', color: 'rgba(245,245,240,0.6)', fontSize: '13px' }}>{label}</p>
    </div>
  );
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

SVG arc gauge with animated fill

More from Data Visualization

'use client'
import { useState } from 'react'

const SEGMENTS = [
  { label: 'Buttons', value: 12, color: '#C9A84C' },
  { label: 'Forms', value: 10, color: '#6366f1' },
  { label: 'Navigation', value: 8, color: '#22c55e' },
  { label: 'Dashboard', v

DonutChart

Data Visualization

'use client'
import { useEffect, useState } from 'react'

interface Metric {
  label: string
  value: number
  max: number
  color: string
  unit: string
}

const metrics: Metric[] = [
  { label: 'CPU Usage', value: 72, max: 100, color: '#C9A84C', un

RadialProgress

Data Visualization

'use client';
import { useState, useEffect, useRef } from 'react';

export default function NetworkGraph() {
  const svgRef = useRef(null);
  const [nodes] = useState([
    { id: 0, x: 150, y: 80, label: 'Core API', type: 'primary' },
    { id: 1, x:

NetworkGraph

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function SplitTestWidget() {
  const [animating, setAnimating] = useState(false);
  const tests = [
    { name: 'CTA Button Color', varA: { label: 'Blue', value: 3.2, users: 4

SplitTestWidget

Data Visualization