Gauge

<div class="gauge">
  <svg class="gauge-svg" width="180" height="110" viewBox="0 0 180 110">
    <!-- Track (background arc) -->
    <path class="gauge-track" d="M 20 100 A 70 70 0 0 1 160 100" stroke-width="10" />
    <!-- Fill (value arc) -->
    <path class="gauge-fill" d="M 20 100 A 70 70 0 0 1 160 100" stroke-width="10"
          stroke-dasharray="220" stroke-dashoffset="66" />
    <!-- Ticks -->
    <line class="gauge-tick gauge-tick-major" x1="20" y1="100" x2="20" y2="90" />
    <line class="gauge-tick" x1="55" y1="35" x2="55" y2="45" />
    <line class="gauge-tick gauge-tick-major" x1="90" y1="30" x2="90" y2="20" />
    <line class="gauge-tick" x1="125" y1="35" x2="125" y2="45" />
    <line class="gauge-tick gauge-tick-major" x1="160" y1="100" x2="160" y2="90" />
  </svg>
  <div class="gauge-value-container" style="bottom: 10px; left: 50%; transform: translateX(-50%);">
    <span class="gauge-value">70</span>
    <span class="gauge-unit">%</span>
  </div>
  <div class="gauge-labels">
    <span class="gauge-min">0</span>
    <span class="gauge-max">100</span>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-flex flex-col items-center">
  <svg width="180" height="110" viewBox="0 0 180 110">
    <path d="M 20 100 A 70 70 0 0 1 160 100" fill="none" stroke-width="10" class="stroke-base-200" stroke-linecap="round" />
    <path d="M 20 100 A 70 70 0 0 1 160 100" fill="none" stroke-width="10" class="stroke-primary" stroke-linecap="round"
          stroke-dasharray="220" stroke-dashoffset="66" />
  </svg>
  <div class="absolute bottom-2.5 left-1/2 -translate-x-1/2 text-center">
    <span class="text-3xl font-bold tabular-nums">70</span>
    <span class="text-sm text-base-content/60 block">%</span>
  </div>
</div>

Requires: tw.min.css

// Update gauge value:
// const pct = value / max;
// const offset = circumference * (1 - pct);
// fill.setAttribute('stroke-dashoffset', offset);

<div class="gauge">
  <svg class="gauge-svg" width="180" height="110" viewBox="0 0 180 110">
    <path class="gauge-track" d="M 20 100 A 70 70 0 0 1 160 100" stroke-width="10" />
    <!-- Needle (rotated to point at value) -->
    <polygon class="gauge-needle" points="90,35 85,100 95,100" style="transform: rotate(-25deg)" />
    <circle class="gauge-needle-center" cx="90" cy="100" r="8" />
  </svg>
  <div class="gauge-value-container" style="bottom: 25px; left: 50%; transform: translateX(-50%);">
    <span class="gauge-label">Speed</span>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-flex flex-col items-center">
  <svg width="180" height="110" viewBox="0 0 180 110" class="block overflow-visible">
    <path d="M 20 100 A 70 70 0 0 1 160 100" fill="none" stroke-width="10" class="stroke-base-200" stroke-linecap="round" />
    <polygon points="90,35 85,100 95,100" class="fill-base-content" style="transform: rotate(-25deg); transform-origin: 90px 100px; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)" />
    <circle cx="90" cy="100" r="8" class="fill-base-100 stroke-base-300" stroke-width="2" />
  </svg>
  <div class="absolute bottom-6 left-1/2 -translate-x-1/2 text-center">
    <span class="text-xs font-medium uppercase tracking-wider text-base-content/50">Speed</span>
  </div>
</div>

Requires: tw.min.css

// Rotate needle: needle.style.transform = 'rotate(' + angle + 'deg)';
// Angle maps from min (-90) to max (90) based on value

<div class="gauge">
  <svg class="gauge-svg" width="180" height="110" viewBox="0 0 180 110">
    <!-- Danger segment (0-30%) -->
    <path class="gauge-segment gauge-segment-danger gauge-segment-active"
          d="M 20 100 A 70 70 0 0 1 60 45" stroke-width="10" />
    <!-- Warning segment (30-60%) -->
    <path class="gauge-segment gauge-segment-warning"
          d="M 60 45 A 70 70 0 0 1 120 45" stroke-width="10" />
    <!-- Success segment (60-100%) -->
    <path class="gauge-segment gauge-segment-success"
          d="M 120 45 A 70 70 0 0 1 160 100" stroke-width="10" />
  </svg>
  <div class="gauge-value-container" style="bottom: 10px; left: 50%; transform: translateX(-50%);">
    <span class="gauge-value" style="color: var(--color-error)">25</span>
    <span class="gauge-unit">rpm</span>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-flex flex-col items-center">
  <svg width="180" height="110" viewBox="0 0 180 110" class="block overflow-visible">
    <path d="M 20 100 A 70 70 0 0 1 60 45" fill="none" stroke-width="10" class="stroke-error" stroke-linecap="round" />
    <path d="M 60 45 A 70 70 0 0 1 120 45" fill="none" stroke-width="10" class="stroke-warning opacity-25" stroke-linecap="round" />
    <path d="M 120 45 A 70 70 0 0 1 160 100" fill="none" stroke-width="10" class="stroke-success opacity-25" stroke-linecap="round" />
  </svg>
  <div class="absolute bottom-2.5 left-1/2 -translate-x-1/2 text-center">
    <span class="text-3xl font-bold tabular-nums text-error">25</span>
    <span class="text-sm text-base-content/60 block">rpm</span>
  </div>
</div>

Requires: tw.min.css

// Highlight active segment based on value range
// segments.forEach(s => s.classList.toggle('gauge-segment-active', inRange));