diff --git a/gallery/src/pages/lovelace/gauge-card.ts b/gallery/src/pages/lovelace/gauge-card.ts
index 5472b7f02b..9988e3424b 100644
--- a/gallery/src/pages/lovelace/gauge-card.ts
+++ b/gallery/src/pages/lovelace/gauge-card.ts
@@ -149,6 +149,38 @@ const CONFIGS = [
   max: 1.9
   unit: GBP/h`,
   },
+  {
+    heading: "A lot of segments",
+    config: `
+- type: gauge
+  needle: true
+  name: Percent gauge
+  entity: sensor.brightness_high
+  unit: "%"
+  min: 0
+  max: 100
+  segments:
+    - from: 0
+      color: "#db4437"
+    - from: 10
+      color: "#cc4d39"
+    - from: 20
+      color: "#bd563a"
+    - from: 30
+      color: "#ad603c"
+    - from: 40
+      color: "#9e693d"
+    - from: 50
+      color: "#8f723f"
+    - from: 60
+      color: "#807b41"
+    - from: 70
+      color: "#718442"
+    - from: 80
+      color: "#618e44"
+    - from: 90
+      color: "#43a047"`,
+  },
 ];
 
 @customElement("demo-lovelace-gauge-card")
diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts
index 6b65afd8a3..600c399be1 100644
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@@ -132,8 +132,6 @@ export class HaGauge extends LitElement {
 
           const x1 = -arcRadius * Math.cos((startAngle * Math.PI) / 180);
           const y1 = -arcRadius * Math.sin((startAngle * Math.PI) / 180);
-          const x2 = -arcRadius * Math.cos((endAngle * Math.PI) / 180);
-          const y2 = -arcRadius * Math.sin((endAngle * Math.PI) / 180);
 
           const isFirst = i === 0;
           const isLast = i === arr.length - 1;
@@ -144,7 +142,7 @@ export class HaGauge extends LitElement {
                 class="level"
                 stroke="${level.stroke}"
                 style="stroke-linecap: butt"
-                d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
+                d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0"
               />
             `;
           }
@@ -157,9 +155,9 @@ export class HaGauge extends LitElement {
 
             return svg`
                 <path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
-                      d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${xm} ${ym}" />
+                      d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0" />
                 <path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
-                      d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 ${x2} ${y2}" />
+                      d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 40 0" />
             `;
           }
 
@@ -168,7 +166,7 @@ export class HaGauge extends LitElement {
               class="level"
               stroke="${level.stroke}"
               style="stroke-linecap: butt"
-              d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
+              d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0"
             ></path>
           `;
         })}
@@ -178,7 +176,7 @@ export class HaGauge extends LitElement {
             ? svg`
                 <path
                 class="needle"
-                d="M -34,-3 L -48,-1 A 1,1,0,0,0,-48,1 L -34,3 A 2,2,0,0,0,-34,-3 Z"
+                d="M -34,-3 L -40,-1 A 1,1,0,0,0,-40,1 L -34,3 A 2,2,0,0,0,-34,-3 Z"
 
                 style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
               />