SVG Path Arc Commands Demystified

Why Arc Commands Intimidate Developers

Among all SVG path commands (M, L, H, V, C, S, Q, T, Z), the Elliptical Arc (A / a) is uniquely notorious. While lines and Bézier curves use direct control points, the W3C specification uses endpoint parameterization for arcs.

Instead of defining the center coordinates of an ellipse and sweeping an angle, you define two physical points on a canvas and let the browser solve a system of quadratic equations to determine which ellipse connects them. Given two points and two radii, exactly four distinct arcs can connect them:

/* Syntax Breakdown */
d="M startX startY A rx ry x-axis-rotation large-arc-flag sweep-flag endX endY"

The 4 Boolean Combinations Visualized

The two boolean flags (large-arc-flag and sweep-flag) dictate which of the four possible geometric solutions the browser draws:

1. large-arc-flag=0, sweep-flag=1 (Most Common)

Draws the shorter arc (≤ 180°) sweeping clockwise. This is the default setting for standard pie wedges under 50% and rounded UI corners.

2. large-arc-flag=1, sweep-flag=1

Draws the longer arc (> 180°) sweeping clockwise. Used for radial progress bars and donut meters filled past the 50% threshold.

3. large-arc-flag=0, sweep-flag=0

Draws the shorter arc (≤ 180°) sweeping counter-clockwise.

4. large-arc-flag=1, sweep-flag=0

Draws the longer arc (> 180°) sweeping counter-clockwise.

Polar-to-Cartesian Trigonometry in JavaScript

To dynamically render interactive radial progress meters, donut charts, or speedometers without pulling in 150 KB charting libraries, convert angles to Cartesian coordinates using standard trigonometry:

// Converts polar coordinates (radius, angle in degrees) to SVG Cartesian coordinates (x, y)
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  // Subtract 90 degrees to orient 0 degrees at the 12 o'clock position
  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

// Generates dynamic SVG path data for any arc from startAngle to endAngle
function describeArc(x, y, radius, startAngle, endAngle) {
  const start = polarToCartesian(x, y, radius, endAngle);
  const end = polarToCartesian(x, y, radius, startAngle);

  // If the angular span exceeds 180 degrees, set large-arc-flag to 1
  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

  return [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");
}

Building a Zero-Dependency Circular Progress Gauge

Here is a complete, production-ready React component rendering an interactive radial gauge using our pure arc math:

import React from 'react';

interface GaugeProps {
  percentage: number; // 0 to 100
  size?: number;
  strokeWidth?: number;
}

export const RadialGauge: React.FC<GaugeProps> = ({ 
  percentage, 
  size = 120, 
  strokeWidth = 10 
}) => {
  const center = size / 2;
  const radius = center - strokeWidth;
  const sweepAngle = (percentage / 100) * 359.99; // Cap at 359.99 to prevent point collision

  const arcPath = describeArc(center, center, radius, 0, sweepAngle);

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {/* Background Track Circle */}
      <circle 
        cx={center} 
        cy={center} 
        r={radius} 
        fill="none" 
        stroke="#1F1F1F" 
        strokeWidth={strokeWidth} 
      />
      {/* Dynamic Foreground Arc */}
      <path 
        d={arcPath} 
        fill="none" 
        stroke="#C1DD2D" 
        strokeWidth={strokeWidth} 
        strokeLinecap="round" 
      />
    </svg>
  );
};

Frequently Asked Questions