Repository: grommet/grommet (2025-07-15T16:35:06Z)

Issue:
Meter -- support "gap" between items
To support accessibility, Meter should provide ability for a "gap" to be added in between values.

Desired functionality:

<img width="216" alt="Image" src="https://github.com/user-attachments/assets/e8b15e41-457d-43f0-94eb-4375ca7ee632" />

<img width="202" alt="Image" src="https://github.com/user-attachments/assets/5380b523-78b6-49c3-8997-5a65fcbb8675" />

d3 charts has the desired capability: https://d3js.org/d3-shape/arc#arc_padAngle


Discussion:
Needed for WCAG compliance



Patch:
diff --git a/src/js/components/Meter/Bar.js b/src/js/components/Meter/Bar.js
index a4d7d394102..64955d03a84 100644
--- a/src/js/components/Meter/Bar.js
+++ b/src/js/components/Meter/Bar.js
@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import { parseMetricToNum } from '../../utils';
 
 import { StyledMeter } from './StyledMeter';
-import { strokeProps, defaultColor } from './utils';
+import { strokeProps, defaultColor, fillProps } from './utils';
 import { useThemeValue } from '../../utils/useThemeValue';
 
 const Bar = forwardRef((props, ref) => {
@@ -24,15 +24,20 @@ const Bar = forwardRef((props, ref) => {
   const thickness = parseMetricToNum(
     theme.global.edgeSize[thicknessProp] || thicknessProp,
   );
+
+  const gapTheme = theme.meter?.gap ?? 0;
+  const gap = parseMetricToNum(theme.global.edgeSize[gapTheme] || gapTheme);
+
   // account for the round cap, if any
-  const capOffset = round ? thickness / 2 : 0;
+  const capRadius = round ? thickness / 2 : 0;
   const mid = thickness / 2;
 
   const someHighlight = (values || []).some((v) => v.highlight);
-  let start =
-    direction === 'horizontal'
-      ? capOffset
-      : (max * (length - 2 * capOffset)) / max;
+  let start = direction === 'horizontal' ? capRadius : length - capRadius;
+
+  // Available space for the bar is the length of the meter minus an end cap
+  // on each end, minus the gap between bars.
+  const lengthAvailable = length - 2 * capRadius - gap * (values.length - 1);
 
   const paths = (values || [])
     .reduce((acc, valueArg, index) => {
@@ -40,11 +45,45 @@ const Bar = forwardRef((props, ref) => {
         const { color, highlight, label, onHover, value, ...pathRest } =
           valueArg;
         const key = `p-${index}`;
-        const delta = (value * (length - 2 * capOffset)) / max;
-        const d =
+        const delta = (value * lengthAvailable) / max;
+
+        // add a little bit extra to start to allow for larger rounded inset cap
+        // The extra needed can be calculated by the Pythagorean theorem
+        const extraGap =
+          round && index !== 0
+            ? Math.sqrt((thickness / 2 + gap / 4) ** 2 - (thickness / 2) ** 2)
+            : 0;
+        const initialStart =
+          direction === 'horizontal' ? start + extraGap : start - extraGap;
+
+        // define the x,y points for the corners of the bar.
+        const points =
           direction === 'horizontal'
-            ? `M ${start},${mid} L ${start + delta},${mid}`
-            : `M ${mid},${start} L ${mid},${start - delta}`;
+            ? [
+                `${initialStart},${thickness}`,
+                `${initialStart},0`,
+                `${start + delta},0`,
+                `${start + delta},${thickness}`,
+              ]
+            : [
+                `${thickness},${initialStart}`,
+                `0,${initialStart}`,
+                `0,${start - delta}`,
+                `${thickness},${start - delta}`,
+              ];
+
+        // if rounded, the starting cap is an arc. All but the first bar
+        // will have a gap and a slightly larger radius
+        const startRadius = index === 0 ? capRadius : capRadius + gap / 2;
+        const startCap = round
+          ? `A ${startRadius},${startRadius} 0 0 ${index === 0 ? 1 : 0} ${
+              points[1]
+            }`
+          : `L ${points[1]}`;
+        const endCap = round
+          ? `A ${capRadius},${capRadius} 0 0 1 ${points[3]}`
+          : `L ${points[3]}`;
+        const d = `M ${points[0]} ${startCap} L ${points[2]} ${endCap} Z`;
         const colorName =
           color || defaultColor(index, theme, values ? values.length : 0);
         let hoverProps;
@@ -54,33 +93,32 @@ const Bar = forwardRef((props, ref) => {
             onMouseLeave: () => onHover(false),
           };
         }
-        if (direction === 'horizontal') {
-          start += delta;
-        } else {
-          start -= delta;
-        }
+        const fill = fillProps(
+          someHighlight && !highlight ? background : colorName,
+          theme,
+        );
 
-        const result = (
+        acc.push(
           <path
             key={key}
             d={d}
-            fill="none"
-            {...strokeProps(
-              someHighlight && !highlight ? background : colorName,
-              theme,
-            )}
-            strokeWidth={direction === 'horizontal' ? thickness : length}
-            strokeLinecap={round ? 'round' : 'butt'}
+            {...fill}
+            strokeWidth={0}
+            stroke="none"
             {...hoverProps}
             {...pathRest}
-          />
+          />,
         );
 
-        acc.push(result);
+        if (direction === 'horizontal') {
+          start += delta + gap;
+        } else {
+          start -= delta + gap;
+        }
       }
       return acc;
     }, [])
-    .reverse(); // reverse so the caps looks right
+    .reverse(); // reverse so the caps look right
 
   let width;
   if (direction === 'horizontal') {
@@ -91,8 +129,8 @@ const Bar = forwardRef((props, ref) => {
 
   const backgroundPath =
     direction === 'horizontal'
-      ? `M ${capOffset},${mid} L ${length - capOffset},${mid}`
-      : `M ${mid},${capOffset} L ${mid},${length - capOffset}`;
+      ? `M ${capRadius},${mid} L ${length - capRadius},${mid}`
+      : `M ${mid},${capRadius} L ${mid},${length - capRadius}`;
 
   return (
     <StyledMeter
diff --git a/src/js/components/Meter/Circle.js b/src/js/components/Meter/Circle.js
index 231c6e5122c..854b48fc78f 100644
--- a/src/js/components/Meter/Circle.js
+++ b/src/js/components/Meter/Circle.js
@@ -1,9 +1,14 @@
 import React, { forwardRef } from 'react';
 
-import { arcCommands, parseMetricToNum, translateEndAngle } from '../../utils';
+import {
+  arcCommands,
+  wedgeCommands,
+  parseMetricToNum,
+  translateEndAngle,
+} from '../../utils';
 
 import { StyledMeter } from './StyledMeter';
-import { strokeProps, defaultColor } from './utils';
+import { strokeProps, defaultColor, fillProps } from './utils';
 import { useThemeValue } from '../../utils/useThemeValue';
 
 const Circle = forwardRef((props, ref) => {
@@ -15,7 +20,9 @@ const Circle = forwardRef((props, ref) => {
   const strokeWidth =
     type === 'pie'
       ? width / 2
-      : parseMetricToNum(theme.global.edgeSize[thickness] || thickness);
+      : Math.min(
+          width / 2 - 8,
+          parseMetricToNum(theme.global.edgeSize[thickness] || thickness));
   const centerX = width / 2;
   const centerY = width / 2;
   const radius = width / 2 - strokeWidth / 2;
@@ -27,16 +34,23 @@ const Circle = forwardRef((props, ref) => {
 
   const anglePer =
     Math.floor(((type === 'semicircle' ? 180 : 360) / max) * scale) / scale;
-  //  (type === 'semicircle' ? 180 : 360) / max;
+
   const someHighlight = (values || []).some((v) => v.highlight);
 
+  const gapTheme = theme.meter?.gap ?? '0';
+  const gap = parseMetricToNum(theme.global.edgeSize[gapTheme] || gapTheme);
+
+  const isSemi = type === 'semicircle';
+  const isFull =
+    values.reduce((total, currentValue) => total + currentValue.value, 0) >=
+    max;
   let startValue = 0;
-  let startAngle = type === 'semicircle' ? 270 : 0;
+  let startAngle = isSemi ? 270 : 0;
   const paths = [];
-  let pathCaps = [];
+
   (values || [])
     .filter((v) => v.value > 0)
-    .forEach((valueArg, index) => {
+    .forEach((valueArg, index, { length }) => {
       const { color, highlight, label, onHover, value, ...pathRest } = valueArg;
       const key = `p-${index}`;
       const colorName =
@@ -44,7 +58,7 @@ const Circle = forwardRef((props, ref) => {
 
       let endAngle;
       if (startValue + value >= max) {
-        endAngle = type === 'semicircle' ? 90 : 360;
+        endAngle = isSemi ? 90 : 360;
       } else {
         endAngle = translateEndAngle(startAngle, anglePer, value);
       }
@@ -59,64 +73,52 @@ const Circle = forwardRef((props, ref) => {
         someHighlight && !highlight ? background : colorName,
         theme,
       );
-      if (round) {
-        const d1 = arcCommands(centerX, centerY, radius, startAngle, endAngle);
-        paths.unshift(
-          <path
-            key={key}
-            d={d1}
-            fill="none"
-            {...stroke}
-            strokeWidth={strokeWidth}
-            strokeLinecap="round"
-            {...hoverProps}
-            {...pathRest}
-          />,
-        );
-
-        // To handle situations where the last values are small, redraw
-        // a dot at the end. Give just a bit of angle to avoid anti-aliasing
-        // leakage around the edge.
-        const d2 = arcCommands(
-          centerX,
-          centerY,
-          radius,
-          endAngle - 0.5,
-          endAngle,
-        );
-        const pathCap = (
-          <path
-            key={`${key}-`}
-            d={d2}
-            fill="none"
-            {...stroke}
-            strokeWidth={strokeWidth}
-            strokeLinecap="round"
-            {...hoverProps}
-            {...pathRest}
-          />
-        );
-        // If we are on a large enough path to not need re-drawing previous
-        // ones, clear the pathCaps we've collected already.
-        if (endAngle - startAngle > 2 * anglePer) {
-          pathCaps = [];
-        }
-        pathCaps.unshift(pathCap);
-      } else {
-        const d = arcCommands(centerX, centerY, radius, startAngle, endAngle);
-        paths.push(
-          <path
-            key={key}
-            d={d}
-            fill="none"
-            {...stroke}
-            strokeWidth={strokeWidth}
-            strokeLinecap="butt"
-            {...hoverProps}
-            {...pathRest}
-          />,
-        );
-      }
+      const fill = fillProps(
+        someHighlight && !highlight ? background : colorName,
+        theme,
+      );
+
+      const outerRadius = width / 2;
+      const innerRadius = type === 'pie' ? 0 : width / 2 - strokeWidth;
+
+      // We want a start gap if there's another segment before this one.
+      // A circle's last segment can bump against the first segment if at max.
+      const startGap =
+        index === 0 && (isSemi || length === 1 || (length > 1 && !isFull))
+          ? 0
+          : gap / 2;
+
+      // Similarly, we only need an end gap if there's a segment after this one.
+      const endGap =
+        index === length - 1 && (isSemi || length === 1) ? 0 : -gap / 2;
+      const startRound = index === 0 && isSemi ? false : round;
+
+      const d = wedgeCommands(
+        centerX,
+        centerY,
+        outerRadius,
+        innerRadius,
+        startAngle,
+        endAngle,
+        startGap,
+        endGap,
+        startRound,
+        round,
+        index === 0 ? 1 : 0,
+      );
+      paths.push(
+        <path
+          key={key}
+          d={d}
+          {...fill}
+          {...stroke}
+          strokeWidth={0}
+          strokeLinecap="butt"
+          {...hoverProps}
+          {...pathRest}
+        />,
+      );
+
       startValue += value;
       startAngle = endAngle;
     });
@@ -160,7 +162,6 @@ const Circle = forwardRef((props, ref) => {
     >
       {track}
       {paths}
-      {pathCaps}
     </StyledMeter>
   );
 });
diff --git a/src/js/components/Meter/stories/Circle.stories.js b/src/js/components/Meter/stories/Circle.stories.js
index f3a3b61542b..470070943f0 100644
--- a/src/js/components/Meter/stories/Circle.stories.js
+++ b/src/js/components/Meter/stories/Circle.stories.js
@@ -1,22 +1,16 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { Box, Meter } from 'grommet';
 
 export const Circle = () => {
   const [value, setValue] = useState(20);
 
-  const timer = useRef();
-  clearTimeout(timer.current);
-  timer.current = setTimeout(() => {
-    setValue(value < 100 ? value + 8 : 20);
-  }, 2000);
-
-  useEffect(
-    () => () => {
-      clearTimeout(timer.current);
-    },
-    [],
-  );
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setValue(value < 60 ? value + 8 : 20);
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [value]);
 
   return (
     // Uncomment <Grommet> lines when using outside of storybook
@@ -25,7 +19,9 @@ export const Circle = () => {
       <Meter
         type="circle"
         background="light-2"
-        values={[{ value, color: value > 50 ? 'accent-2' : 'accent-1' }]}
+        values={[
+          { value, color: value > 50 ? 'status-critical' : 'status-ok' },
+        ]}
       />
     </Box>
     // </Grommet>
diff --git a/src/js/components/Meter/utils.js b/src/js/components/Meter/utils.js
index b083d8ea2dc..8885c291c59 100644
--- a/src/js/components/Meter/utils.js
+++ b/src/js/components/Meter/utils.js
@@ -19,6 +19,25 @@ export const strokeProps = (color, theme) => {
   return result;
 };
 
+export const fillProps = (color, theme) => {
+  const result = {};
+  if (color) {
+    if (typeof color === 'object') {
+      result.fill = normalizeColor(color.color, theme);
+      if (color.opacity) {
+        result.fillOpacity = `${
+          color.opacity === true
+            ? theme.global.opacity.medium
+            : theme.global.opacity[color.opacity] || color.opacity
+        }`;
+      }
+    } else {
+      result.fill = normalizeColor(color, theme);
+    }
+  }
+  return result;
+};
+
 const neutralExp = /^neutral-\d+/;
 
 export const defaultColor = (index, theme, valuesLength) => {
@@ -32,14 +51,14 @@ export const defaultColor = (index, theme, valuesLength) => {
       theme.meter.colors[theme.dark ? 'dark' : 'light'] || theme.meter.colors;
     return colors[colorIndex % colors.length];
   }
-  const colors = Object.keys(theme.global.colors).filter(n =>
+  const colors = Object.keys(theme.global.colors).filter((n) =>
     n.match(/^graph-[0-9]$/),
   );
   if (colors.length > 0) {
     return colors[colorIndex % colors.length];
   }
   // Deprecate using "neutral-*" color names. Remove eventually.
-  const neutralColors = Object.keys(theme.global.colors).filter(k =>
+  const neutralColors = Object.keys(theme.global.colors).filter((k) =>
     neutralExp.test(k),
   );
   return neutralColors[colorIndex % neutralColors.length];
diff --git a/src/js/themes/base.d.ts b/src/js/themes/base.d.ts
index 3fec4a7bb67..29ca9ca9d81 100644
--- a/src/js/themes/base.d.ts
+++ b/src/js/themes/base.d.ts
@@ -1274,6 +1274,7 @@ export interface ThemeType {
     color?: ColorType;
     colors?: GraphColorsType;
     extend?: ExtendType;
+    gap?: GapType;
   };
   notification?: {
     actions?: AnchorProps;
diff --git a/src/js/themes/base.js b/src/js/themes/base.js
index 337f7eb3d42..d88d42d16e1 100644
--- a/src/js/themes/base.js
+++ b/src/js/themes/base.js
@@ -1282,6 +1282,7 @@ export const generate = (baseSpacing = 24, scale = 6) => {
       color: 'graph-0',
       // colors: [] || colors: ['graph-0', 'graph-1', 'graph-2', 'graph-3'],
       // extend: undefined,
+      // gap: undefined,
     },
     nameValueList: {
       gap: {
diff --git a/src/js/utils/graphics.js b/src/js/utils/graphics.js
index 0a73b29df61..9059573d6eb 100644
--- a/src/js/utils/graphics.js
+++ b/src/js/utils/graphics.js
@@ -10,6 +10,51 @@ export const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
   };
 };
 
+const intersection = (line1Point1, line1Point2, line2Point1, line2Point2) => {
+  const { x: x1, y: y1 } = line1Point1;
+  const { x: x2, y: y2 } = line1Point2;
+  const { x: x3, y: y3 } = line2Point1;
+  const { x: x4, y: y4 } = line2Point2;
+
+  // Calculate the denominator
+  const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+
+  // Check if lines are parallel (denominator is 0)
+  if (Math.abs(denominator) < 1e-10) {
+    return null; // Lines are parallel or coincident
+  }
+
+  // Calculate the intersection point
+  const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denominator;
+  const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denominator;
+
+  // Calculate intersection coordinates
+  const intersectionX = x1 + t * (x2 - x1);
+  const intersectionY = y1 + t * (y2 - y1);
+
+  return {
+    x: intersectionX,
+    y: intersectionY,
+    // Optional: check if intersection is within line segments
+    withinSegment1: t >= 0 && t <= 1,
+    withinSegment2: u >= 0 && u <= 1,
+  };
+};
+
+export const lineCommands = (centerX, centerY, radius, angle) => {
+  const start = polarToCartesian(centerX, centerY, radius, angle);
+
+  const d = [
+    'M',
+    centerX.toFixed(POST_DECIMAL_DIGITS),
+    centerY.toFixed(POST_DECIMAL_DIGITS),
+    'L',
+    start.x.toFixed(POST_DECIMAL_DIGITS),
+    start.y.toFixed(POST_DECIMAL_DIGITS),
+  ].join(' ');
+  return d;
+};
+
 export const arcCommands = (centerX, centerY, radius, startAngle, endAngle) => {
   // handle that we can't draw a complete circle
   let normalizedEndAngle = endAngle;
@@ -40,6 +85,198 @@ export const arcCommands = (centerX, centerY, radius, startAngle, endAngle) => {
   return d;
 };
 
+export const calcAngle = (radius, angle, midAngle, gap) => {
+  if (gap === 0) {
+    return angle;
+  }
+  const gapAngleRadians = Math.asin(Math.abs(gap) / radius);
+  const gapAngle = (gapAngleRadians * 180) / Math.PI;
+  return gap > 0
+    ? Math.min(angle + gapAngle, midAngle)
+    : Math.max(angle - gapAngle, midAngle);
+};
+
+const gapPoints = (
+  centerX,
+  centerY,
+  outerRadius,
+  innerRadius,
+  angle,
+  midAngle,
+  gap,
+) => {
+  const outerAngle = calcAngle(outerRadius, angle, midAngle, gap);
+  const outer = polarToCartesian(centerX, centerY, outerRadius, outerAngle);
+
+  let inner;
+  if (innerRadius > 0) {
+    const innerAngle = calcAngle(innerRadius, angle, midAngle, gap);
+    inner = polarToCartesian(centerX, centerY, innerRadius, innerAngle);
+  } else {
+    inner = polarToCartesian(
+      centerX,
+      centerY,
+      Math.abs(gap),
+      gap < 0 ? angle - 90 : angle + 90,
+    );
+  }
+
+  return { outer, inner };
+};
+
+export const wedgeCommands = (
+  centerX,
+  centerY,
+  outerRadius,
+  innerRadius,
+  startAngle,
+  endAngle,
+  startGap,
+  endGap,
+  startRound,
+  endRound,
+  startRoundDirection = 0,
+) => {
+  // handle that we can't draw a complete circle
+  let normalizedEndAngle = endAngle;
+  /* 
+   added endAngle - startAngle >= 360 
+   for SemiCircle the endAngle will never be greater then startAngle 
+   since it starts with a startAngle of 270.
+ */
+  if (endAngle > startAngle && endAngle - startAngle >= 359.99) {
+    normalizedEndAngle = startAngle + 359.99;
+  }
+
+  // if we're rounded we need to ajust the start points to
+  // account for a bigger cap radius
+
+  // add a little bit extra to start to allow for larger rounded inset cap
+  // The extra needed can be calculated by the Pythagorean theorem
+  const thickness = outerRadius - innerRadius;
+  const extraGap = startRound
+    ? Math.sqrt((thickness / 2 + startGap / 4) ** 2 - (thickness / 2) ** 2)
+    : 0;
+
+  // define the angle at the center of the wedge. We can't let the gap
+  // go past this angle.
+
+  // calculate the angle span between start and end
+  const angleSpan =
+    (endAngle < startAngle ? endAngle + 360 : endAngle) - startAngle;
+  const midAngle = startAngle + angleSpan / 2;
+
+  const start = gapPoints(
+    centerX,
+    centerY,
+    outerRadius,
+    innerRadius,
+    startAngle,
+    midAngle < startAngle ? midAngle + 360 : midAngle,
+    startGap + extraGap,
+    startRound,
+  );
+  const end = gapPoints(
+    centerX,
+    centerY,
+    outerRadius,
+    innerRadius,
+    normalizedEndAngle,
+    midAngle > endAngle ? midAngle - 360 : midAngle,
+    endGap,
+    endRound,
+  );
+
+  const largeAngle = normalizedEndAngle - startAngle > 180;
+
+  const arcSweep = largeAngle ? '1' : '0';
+  let innerCapRadius = innerRadius;
+  let innerArcSweep = arcSweep;
+  let middle;
+
+  if (innerRadius <= 0) {
+    // we're doing a pie wedge
+    innerArcSweep = arcSweep === '0' ? '1' : '0';
+    if (largeAngle) {
+      // for a large pie wedge it has an inner corner rather
+      // than a point. We need to round the inner corner
+      innerCapRadius = startGap || endGap || 0;
+    } else {
+      // for a small pie wedge we'll make a point in the center
+      middle = intersection(start.outer, start.inner, end.outer, end.inner);
+    }
+  }
+  const capRadius = (outerRadius - innerRadius) / 2;
+  const startCapRadius =
+    capRadius + (startRoundDirection === 0 ? startGap / 2 : 0);
+
+  const startPoint = middle || start.inner;
+  const endPoint = middle || end.inner;
+  const startCap = startRound
+    ? [
+        'A',
+        startCapRadius.toFixed(POST_DECIMAL_DIGITS),
+        startCapRadius.toFixed(POST_DECIMAL_DIGITS),
+        0,
+        0,
+        startRoundDirection,
+        start.outer.x.toFixed(POST_DECIMAL_DIGITS),
+        start.outer.y.toFixed(POST_DECIMAL_DIGITS),
+      ]
+    : [
+        'L',
+        start.outer.x.toFixed(POST_DECIMAL_DIGITS),
+        start.outer.y.toFixed(POST_DECIMAL_DIGITS),
+      ];
+  const endCap = endRound
+    ? [
+        'A',
+        capRadius.toFixed(POST_DECIMAL_DIGITS),
+        capRadius.toFixed(POST_DECIMAL_DIGITS),
+        0,
+        0,
+        1,
+        endPoint.x.toFixed(POST_DECIMAL_DIGITS),
+        endPoint.y.toFixed(POST_DECIMAL_DIGITS),
+      ]
+    : [
+        'L',
+        endPoint.x.toFixed(POST_DECIMAL_DIGITS),
+        endPoint.y.toFixed(POST_DECIMAL_DIGITS),
+      ];
+  const d = [
+    'M',
+    startPoint.x.toFixed(POST_DECIMAL_DIGITS),
+    startPoint.y.toFixed(POST_DECIMAL_DIGITS),
+    ...startCap,
+    'A',
+    outerRadius.toFixed(POST_DECIMAL_DIGITS),
+    outerRadius.toFixed(POST_DECIMAL_DIGITS),
+    0,
+    arcSweep,
+    1,
+    end.outer.x.toFixed(POST_DECIMAL_DIGITS),
+    end.outer.y.toFixed(POST_DECIMAL_DIGITS),
+    ...endCap,
+  ];
+  if (innerRadius > 0 || largeAngle) {
+    // for a donut or a large pie wedge, draw the inner arc
+    d.push(
+      'A',
+      innerCapRadius.toFixed(POST_DECIMAL_DIGITS),
+      innerCapRadius.toFixed(POST_DECIMAL_DIGITS),
+      0,
+      innerArcSweep,
+      0,
+      start.inner.x.toFixed(POST_DECIMAL_DIGITS),
+      start.inner.y.toFixed(POST_DECIMAL_DIGITS),
+      'Z', // close the path
+    );
+  }
+
+  return d.join(' ');
+};
+
 /* TranslatedEngAngle will now take the value of the
 startAngle + anglePer * value and mod by 360. This was added
 to take account the startAngle not being 0. So no matter the


Test patch:
diff --git a/src/js/components/Meter/__tests__/__snapshots__/Meter-test.tsx.snap b/src/js/components/Meter/__tests__/__snapshots__/Meter-test.tsx.snap
index b99e4df249e..226c91b8510 100644
--- a/src/js/components/Meter/__tests__/__snapshots__/Meter-test.tsx.snap
+++ b/src/js/components/Meter/__tests__/__snapshots__/Meter-test.tsx.snap
@@ -39,11 +39,10 @@ exports[`Meter background 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -63,11 +62,10 @@ exports[`Meter background 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -87,11 +85,11 @@ exports[`Meter background 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -112,11 +110,11 @@ exports[`Meter background 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -136,11 +134,10 @@ exports[`Meter background 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -186,11 +183,10 @@ exports[`Meter basic 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -223,11 +219,10 @@ exports[`Meter basic renders outside grommet wrapper 1`] = `
     stroke-width="24"
   />
   <path
-    d="M 0,12 L 76.8,12"
-    fill="none"
-    stroke="#6FFFB0"
-    stroke-linecap="butt"
-    stroke-width="24"
+    d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+    fill="#6FFFB0"
+    stroke="none"
+    stroke-width="0"
   />
 </svg>
 `;
@@ -273,18 +268,18 @@ exports[`Meter boundary values 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 368.6870620811 157.6243968322 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 380.4661995532 155.3326899543 L 356.9079246090 159.9161037100 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#00873D"
       stroke="#00873D"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
     <path
-      d="M 191.9997957965 12.0000000001 A 180.0000000000 180.0000000000 0 1 0 368.6870620811 157.6243968322"
-      fill="none"
+      d="M 356.9079246090 159.9161037100 L 380.4661995532 155.3326899543 A 192.0000000000 192.0000000000 0 1 1 191.9997821829 0.0000000001 L 191.9998094100 24.0000000001 A 168.0000000000 168.0000000000 0 1 0 356.9079246090 159.9161037100 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -317,11 +312,10 @@ exports[`Meter custom message on meter plural 1`] = `
     stroke-width="24"
   />
   <path
-    d="M 0,12 L 57.6,12"
-    fill="none"
-    stroke="#6FFFB0"
-    stroke-linecap="butt"
-    stroke-width="24"
+    d="M 0,24 L 0,0 L 57.6,0 L 57.6,24 Z"
+    fill="#6FFFB0"
+    stroke="none"
+    stroke-width="0"
   />
 </svg>
 `;
@@ -354,11 +348,11 @@ exports[`Meter custom message on meter singular 1`] = `
     stroke-width="192"
   />
   <path
-    d="M 269.6656314600 135.5726157799 A 96.0000000000 96.0000000000 0 0 0 192.0000000000 96.0000000000"
-    fill="none"
+    d="M 192.0000000000 192.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 347.3312629200 79.1452315598 L 192.0000000000 192.0000000000"
+    fill="#6FFFB0"
     stroke="#6FFFB0"
     stroke-linecap="butt"
-    stroke-width="192"
+    stroke-width="0"
   />
 </svg>
 `;
@@ -403,18 +397,16 @@ exports[`Meter custom message plural 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 160.45070422535213,12 L 384,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 160.45070422535213,24 L 160.45070422535213,0 L 384,0 L 384,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 0,12 L 160.45070422535213,12"
-      fill="none"
-      stroke="#00873D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 160.45070422535213,0 L 160.45070422535213,24 Z"
+      fill="#00873D"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -461,11 +453,11 @@ exports[`Meter custom message singular 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 247.6230589875 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 251.3312629200 L 351.7774947376 243.9148550550 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -555,39 +547,39 @@ exports[`Meter large circle values 1`] = `
       stroke-width="12"
     />
     <path
-      d="M 156.0149675602 28.9313510740 A 90.0000000000 90.0000000000 0 0 0 96.0000000000 6.0000000000"
-      fill="none"
+      d="M 96.0000000000 12.0000000000 L 96.0000000000 0.0000000000 A 96.0000000000 96.0000000000 0 0 1 160.0159653975 24.4601078123 L 152.0139697228 33.4025943358 A 84.0000000000 84.0000000000 0 0 0 96.0000000000 12.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="12"
+      stroke-width="0"
     />
     <path
-      d="M 182.4540298401 70.9859894379 A 90.0000000000 90.0000000000 0 0 0 156.0149675602 28.9313510740"
-      fill="none"
+      d="M 152.0139697228 33.4025943358 L 160.0159653975 24.4601078123 A 96.0000000000 96.0000000000 0 0 1 188.2176318295 69.3183887338 L 176.6904278508 72.6535901420 A 84.0000000000 84.0000000000 0 0 0 152.0139697228 33.4025943358 Z"
+      fill="#00873D"
       stroke="#00873D"
       stroke-linecap="butt"
-      stroke-width="12"
+      stroke-width="0"
     />
     <path
-      d="M 183.4934330444 117.0926331716 A 90.0000000000 90.0000000000 0 0 0 182.4540298401 70.9859894379"
-      fill="none"
+      d="M 176.6904278508 72.6535901420 L 188.2176318295 69.3183887338 A 96.0000000000 96.0000000000 0 0 1 189.3263285806 118.4988087164 L 177.6605375081 115.6864576269 A 84.0000000000 84.0000000000 0 0 0 176.6904278508 72.6535901420 Z"
+      fill="#3D138D"
       stroke="#3D138D"
       stroke-linecap="butt"
-      stroke-width="12"
+      stroke-width="0"
     />
     <path
-      d="M 167.6249510067 150.4964805587 A 90.0000000000 90.0000000000 0 0 0 183.4934330444 117.0926331716"
-      fill="none"
+      d="M 177.6605375081 115.6864576269 L 189.3263285806 118.4988087164 A 96.0000000000 96.0000000000 0 0 1 172.3999477405 154.1295792626 L 162.8499542730 146.8633818548 A 84.0000000000 84.0000000000 0 0 0 177.6605375081 115.6864576269 Z"
+      fill="#00739D"
       stroke="#00739D"
       stroke-linecap="butt"
-      stroke-width="12"
+      stroke-width="0"
     />
     <path
-      d="M 96.0000000000 6.0000000000 A 90.0000000000 90.0000000000 0 1 0 167.6249510067 150.4964805587"
-      fill="none"
+      d="M 162.8499542730 146.8633818548 L 172.3999477405 154.1295792626 A 96.0000000000 96.0000000000 0 1 1 96.0000000000 0.0000000000 L 96.0000000000 12.0000000000 A 84.0000000000 84.0000000000 0 1 0 162.8499542730 146.8633818548 Z"
+      fill="#A2423D"
       stroke="#A2423D"
       stroke-linecap="butt"
-      stroke-width="12"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -633,60 +625,52 @@ exports[`Meter many values 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 336,12 L 384,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 336,24 L 336,0 L 384,0 L 384,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 288,12 L 336,12"
-      fill="none"
-      stroke="#00873D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 288,24 L 288,0 L 336,0 L 336,24 Z"
+      fill="#00873D"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 240,12 L 288,12"
-      fill="none"
-      stroke="#3D138D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 240,24 L 240,0 L 288,0 L 288,24 Z"
+      fill="#3D138D"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 192,12 L 240,12"
-      fill="none"
-      stroke="#00739D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 192,24 L 192,0 L 240,0 L 240,24 Z"
+      fill="#00739D"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 144,12 L 192,12"
-      fill="none"
-      stroke="#A2423D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 144,24 L 144,0 L 192,0 L 192,24 Z"
+      fill="#A2423D"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 96,12 L 144,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 96,24 L 96,0 L 144,0 L 144,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 48,12 L 96,12"
-      fill="none"
-      stroke="#00873D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 48,24 L 48,0 L 96,0 L 96,24 Z"
+      fill="#00873D"
+      stroke="none"
+      stroke-width="0"
     />
     <path
-      d="M 0,12 L 48,12"
-      fill="none"
-      stroke="#3D138D"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 48,0 L 48,24 Z"
+      fill="#3D138D"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -733,11 +717,10 @@ exports[`Meter reverse 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -784,11 +767,11 @@ exports[`Meter reverse circle 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -844,11 +827,10 @@ exports[`Meter round 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 12,12 L 84,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="round"
-      stroke-width="24"
+      d="M 12,24 A 12,12 0 0 1 12,0 L 84,0 A 12,12 0 0 1 84,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -869,18 +851,11 @@ exports[`Meter round 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="round"
-      stroke-width="24"
-    />
-    <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 362.6982579371 134.8851618471"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 A 12.0000000000 12.0000000000 0 0 1 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 A 12.0000000000 12.0000000000 0 0 1 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
-      stroke-linecap="round"
-      stroke-width="24"
+      stroke-linecap="butt"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -899,18 +874,11 @@ exports[`Meter round 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 46.3769410125 86.1986545874 A 180.0000000000 180.0000000000 0 0 0 12.0000000000 192.0000000000"
-      fill="none"
+      d="M 24.0000000000 192.0000000000 L 0.0000000000 192.0000000000 A 192.0000000000 192.0000000000 0 0 1 36.6687370800 79.1452315598 A 12.0000000000 12.0000000000 0 0 1 56.0851449450 93.2520776149 A 168.0000000000 168.0000000000 0 0 0 24.0000000000 192.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
-      stroke-linecap="round"
-      stroke-width="24"
-    />
-    <path
-      d="M 46.3769410125 86.1986545874 A 180.0000000000 180.0000000000 0 0 0 45.4592066959 87.4734679720"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="round"
-      stroke-width="24"
+      stroke-linecap="butt"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -958,11 +926,10 @@ exports[`Meter rtl theme 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -1008,11 +975,10 @@ exports[`Meter single 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 96,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 96,0 L 96,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -1058,11 +1024,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 19.2,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 19.2,0 L 19.2,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1082,11 +1047,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 38.4,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 38.4,0 L 38.4,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1106,11 +1070,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1130,11 +1093,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 153.6,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 153.6,0 L 153.6,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1154,11 +1116,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 230.4,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 230.4,0 L 230.4,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1178,11 +1139,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 4.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 4.8,0 L 4.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1202,11 +1162,10 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 57.6,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 57.6,0 L 57.6,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1227,11 +1186,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 82.2380345866 36.8753882025 A 36.0000000000 36.0000000000 0 0 0 48.0000000000 12.0000000000"
-      fill="none"
+      d="M 48.0000000000 24.0000000000 L 48.0000000000 0.0000000000 A 48.0000000000 48.0000000000 0 0 1 93.6507127822 33.1671842700 L 70.8253563911 40.5835921350 A 24.0000000000 24.0000000000 0 0 0 48.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1252,11 +1211,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 175.8887473688 70.0425724725 A 84.0000000000 84.0000000000 0 0 0 96.0000000000 12.0000000000"
-      fill="none"
+      d="M 96.0000000000 24.0000000000 L 96.0000000000 0.0000000000 A 96.0000000000 96.0000000000 0 0 1 187.3014255643 66.3343685400 L 164.4760691733 73.7507764050 A 72.0000000000 72.0000000000 0 0 0 96.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1277,11 +1236,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1302,11 +1261,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 737.7930240618 269.0456780925 A 372.0000000000 372.0000000000 0 0 0 384.0000000000 12.0000000000"
-      fill="none"
+      d="M 384.0000000000 24.0000000000 L 384.0000000000 0.0000000000 A 384.0000000000 384.0000000000 0 0 1 749.2057022573 265.3374741600 L 726.3803458663 272.7538820250 A 360.0000000000 360.0000000000 0 0 0 384.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1327,11 +1286,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 1112.3958751905 401.7144151725 A 564.0000000000 564.0000000000 0 0 0 576.0000000000 12.0000000000"
-      fill="none"
+      d="M 576.0000000000 24.0000000000 L 576.0000000000 0.0000000000 A 576.0000000000 576.0000000000 0 0 1 1123.8085533860 398.0062112400 L 1100.9831969949 405.4226191050 A 552.0000000000 552.0000000000 0 0 0 576.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1345,18 +1304,18 @@ exports[`Meter size 1`] = `
       cx="27.5"
       cy="27.5"
       fill="none"
-      r="15.5"
+      r="17.75"
       stroke="#F2F2F2"
       stroke-linecap="square"
       stroke-opacity="0.4"
-      stroke-width="24"
+      stroke-width="19.5"
     />
     <path
-      d="M 42.2413760026 22.7102365872 A 15.5000000000 15.5000000000 0 0 0 27.5000000000 12.0000000000"
-      fill="none"
+      d="M 27.5000000000 19.5000000000 L 27.5000000000 0.0000000000 A 27.5000000000 27.5000000000 0 0 1 53.6540541981 19.0020326547 L 35.1084521304 25.0278640450 A 8.0000000000 8.0000000000 0 0 0 27.5000000000 19.5000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1377,11 +1336,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 269.5394601510 103.2097567425 A 132.0000000000 132.0000000000 0 0 0 144.0000000000 12.0000000000"
-      fill="none"
+      d="M 144.0000000000 24.0000000000 L 144.0000000000 0.0000000000 A 144.0000000000 144.0000000000 0 0 1 280.9521383465 99.5015528100 L 258.1267819554 106.9179606750 A 120.0000000000 120.0000000000 0 0 0 144.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1402,11 +1361,11 @@ exports[`Meter size 1`] = `
       stroke-width="48"
     />
     <path
-      d="M 70.8253563911 40.5835921350 A 24.0000000000 24.0000000000 0 0 0 48.0000000000 24.0000000000"
-      fill="none"
+      d="M 48.0000000000 48.0000000000 L 48.0000000000 0.0000000000 A 48.0000000000 48.0000000000 0 0 1 93.6507127822 33.1671842700 L 48.0000000000 48.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="48"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1427,11 +1386,11 @@ exports[`Meter size 1`] = `
       stroke-width="96"
     />
     <path
-      d="M 141.6507127822 81.1671842700 A 48.0000000000 48.0000000000 0 0 0 96.0000000000 48.0000000000"
-      fill="none"
+      d="M 96.0000000000 96.0000000000 L 96.0000000000 0.0000000000 A 96.0000000000 96.0000000000 0 0 1 187.3014255643 66.3343685400 L 96.0000000000 96.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="96"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1452,11 +1411,11 @@ exports[`Meter size 1`] = `
       stroke-width="192"
     />
     <path
-      d="M 283.3014255643 162.3343685400 A 96.0000000000 96.0000000000 0 0 0 192.0000000000 96.0000000000"
-      fill="none"
+      d="M 192.0000000000 192.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 192.0000000000 192.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="192"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1477,11 +1436,11 @@ exports[`Meter size 1`] = `
       stroke-width="384"
     />
     <path
-      d="M 566.6028511287 324.6687370800 A 192.0000000000 192.0000000000 0 0 0 384.0000000000 192.0000000000"
-      fill="none"
+      d="M 384.0000000000 384.0000000000 L 384.0000000000 0.0000000000 A 384.0000000000 384.0000000000 0 0 1 749.2057022573 265.3374741600 L 384.0000000000 384.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="384"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1502,11 +1461,11 @@ exports[`Meter size 1`] = `
       stroke-width="576"
     />
     <path
-      d="M 849.9042766930 487.0031056200 A 288.0000000000 288.0000000000 0 0 0 576.0000000000 288.0000000000"
-      fill="none"
+      d="M 576.0000000000 576.0000000000 L 576.0000000000 0.0000000000 A 576.0000000000 576.0000000000 0 0 1 1123.8085533860 398.0062112400 L 576.0000000000 576.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="576"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1527,11 +1486,11 @@ exports[`Meter size 1`] = `
       stroke-width="27.5"
     />
     <path
-      d="M 40.5770270991 23.2510163273 A 13.7500000000 13.7500000000 0 0 0 27.5000000000 13.7500000000"
-      fill="none"
+      d="M 27.5000000000 27.5000000000 L 27.5000000000 0.0000000000 A 27.5000000000 27.5000000000 0 0 1 53.6540541981 19.0020326547 L 27.5000000000 27.5000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="27.5"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1552,11 +1511,11 @@ exports[`Meter size 1`] = `
       stroke-width="144"
     />
     <path
-      d="M 212.4760691733 121.7507764050 A 72.0000000000 72.0000000000 0 0 0 144.0000000000 72.0000000000"
-      fill="none"
+      d="M 144.0000000000 144.0000000000 L 144.0000000000 0.0000000000 A 144.0000000000 144.0000000000 0 0 1 280.9521383465 99.5015528100 L 144.0000000000 144.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="144"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1575,11 +1534,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 18.8753882025 26.8397309175 A 36.0000000000 36.0000000000 0 0 0 12.0000000000 48.0000000000"
-      fill="none"
+      d="M 24.0000000000 48.0000000000 L 0.0000000000 48.0000000000 A 48.0000000000 48.0000000000 0 0 1 9.1671842700 19.7863078900 L 28.5835921350 33.8931539450 A 24.0000000000 24.0000000000 0 0 0 24.0000000000 48.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1598,11 +1557,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 28.0425724725 46.6260388074 A 84.0000000000 84.0000000000 0 0 0 12.0000000000 96.0000000000"
-      fill="none"
+      d="M 24.0000000000 96.0000000000 L 0.0000000000 96.0000000000 A 96.0000000000 96.0000000000 0 0 1 18.3343685400 39.5726157799 L 37.7507764050 53.6794618349 A 72.0000000000 72.0000000000 0 0 0 24.0000000000 96.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1621,11 +1580,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 46.3769410125 86.1986545874 A 180.0000000000 180.0000000000 0 0 0 12.0000000000 192.0000000000"
-      fill="none"
+      d="M 24.0000000000 192.0000000000 L 0.0000000000 192.0000000000 A 192.0000000000 192.0000000000 0 0 1 36.6687370800 79.1452315598 L 56.0851449450 93.2520776149 A 168.0000000000 168.0000000000 0 0 0 24.0000000000 192.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1644,11 +1603,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 83.0456780925 165.3438861472 A 372.0000000000 372.0000000000 0 0 0 12.0000000000 384.0000000000"
-      fill="none"
+      d="M 24.0000000000 384.0000000000 L 0.0000000000 384.0000000000 A 384.0000000000 384.0000000000 0 0 1 73.3374741600 158.2904631197 L 92.7538820250 172.3973091747 A 360.0000000000 360.0000000000 0 0 0 24.0000000000 384.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1667,11 +1626,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 119.7144151725 244.4891177070 A 564.0000000000 564.0000000000 0 0 0 12.0000000000 576.0000000000"
-      fill="none"
+      d="M 24.0000000000 576.0000000000 L 0.0000000000 576.0000000000 A 576.0000000000 576.0000000000 0 0 1 110.0062112400 237.4356946795 L 129.4226191050 251.5425407346 A 552.0000000000 552.0000000000 0 0 0 24.0000000000 576.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1682,19 +1641,19 @@ exports[`Meter size 1`] = `
     width="55"
   >
     <path
-      d="M 43.0000000000 27.5000000000 A 15.5000000000 15.5000000000 0 0 0 12.0000000000 27.5000000000"
+      d="M 45.2500000000 27.5000000000 A 17.7500000000 17.7500000000 0 0 0 9.7500000000 27.5000000000"
       fill="none"
       stroke="#F2F2F2"
       stroke-linecap="square"
       stroke-opacity="0.4"
-      stroke-width="24"
+      stroke-width="19.5"
     />
     <path
-      d="M 14.9602365872 18.3893285895 A 15.5000000000 15.5000000000 0 0 0 12.0000000000 27.5000000000"
-      fill="none"
+      d="M 19.5000000000 27.5000000000 L 0.0000000000 27.5000000000 A 27.5000000000 27.5000000000 0 0 1 5.2520326547 11.3359055620 L 21.0278640450 22.7977179817 A 8.0000000000 8.0000000000 0 0 0 19.5000000000 27.5000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1713,11 +1672,11 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 37.2097567425 66.4123466974 A 132.0000000000 132.0000000000 0 0 0 12.0000000000 144.0000000000"
-      fill="none"
+      d="M 24.0000000000 144.0000000000 L 0.0000000000 144.0000000000 A 144.0000000000 144.0000000000 0 0 1 27.5015528100 59.3589236699 L 46.9179606750 73.4657697249 A 120.0000000000 120.0000000000 0 0 0 24.0000000000 144.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -1763,11 +1722,10 @@ exports[`Meter thickness 1`] = `
       stroke-width="6"
     />
     <path
-      d="M 0,3 L 76.8,3"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="6"
+      d="M 0,6 L 0,0 L 76.8,0 L 76.8,6 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1787,11 +1745,10 @@ exports[`Meter thickness 1`] = `
       stroke-width="12"
     />
     <path
-      d="M 0,6 L 76.8,6"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="12"
+      d="M 0,12 L 0,0 L 76.8,0 L 76.8,12 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1811,11 +1768,10 @@ exports[`Meter thickness 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1835,11 +1791,10 @@ exports[`Meter thickness 1`] = `
       stroke-width="48"
     />
     <path
-      d="M 0,24 L 76.8,24"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="48"
+      d="M 0,48 L 0,0 L 76.8,0 L 76.8,48 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1859,11 +1814,10 @@ exports[`Meter thickness 1`] = `
       stroke-width="96"
     />
     <path
-      d="M 0,48 L 76.8,48"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="96"
+      d="M 0,96 L 0,0 L 76.8,0 L 76.8,96 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1883,11 +1837,10 @@ exports[`Meter thickness 1`] = `
       stroke-width="55"
     />
     <path
-      d="M 0,27.5 L 76.8,27.5"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="55"
+      d="M 0,55 L 0,0 L 76.8,0 L 76.8,55 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1908,11 +1861,11 @@ exports[`Meter thickness 1`] = `
       stroke-width="6"
     />
     <path
-      d="M 371.7496815798 133.5957880631 A 189.0000000000 189.0000000000 0 0 0 192.0000000000 3.0000000000"
-      fill="none"
+      d="M 192.0000000000 6.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 368.8965120309 134.5228390463 A 186.0000000000 186.0000000000 0 0 0 192.0000000000 6.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="6"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1933,11 +1886,11 @@ exports[`Meter thickness 1`] = `
       stroke-width="12"
     />
     <path
-      d="M 368.8965120309 134.5228390463 A 186.0000000000 186.0000000000 0 0 0 192.0000000000 6.0000000000"
-      fill="none"
+      d="M 192.0000000000 12.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="12"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1958,11 +1911,11 @@ exports[`Meter thickness 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -1983,11 +1936,11 @@ exports[`Meter thickness 1`] = `
       stroke-width="48"
     />
     <path
-      d="M 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000"
-      fill="none"
+      d="M 192.0000000000 48.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 328.9521383465 147.5015528100 A 144.0000000000 144.0000000000 0 0 0 192.0000000000 48.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="48"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -2008,11 +1961,11 @@ exports[`Meter thickness 1`] = `
       stroke-width="96"
     />
     <path
-      d="M 328.9521383465 147.5015528100 A 144.0000000000 144.0000000000 0 0 0 192.0000000000 48.0000000000"
-      fill="none"
+      d="M 192.0000000000 96.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 283.3014255643 162.3343685400 A 96.0000000000 96.0000000000 0 0 0 192.0000000000 96.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="96"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -2033,11 +1986,11 @@ exports[`Meter thickness 1`] = `
       stroke-width="55"
     />
     <path
-      d="M 348.4487969306 141.1667044253 A 164.5000000000 164.5000000000 0 0 0 192.0000000000 27.5000000000"
-      fill="none"
+      d="M 192.0000000000 55.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 322.2947427324 149.6646717706 A 137.0000000000 137.0000000000 0 0 0 192.0000000000 55.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="55"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -2083,11 +2036,10 @@ exports[`Meter type 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 0,12 L 76.8,12"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="24"
+      d="M 0,24 L 0,0 L 76.8,0 L 76.8,24 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -2108,11 +2060,11 @@ exports[`Meter type 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 363.1901729331 136.3769410125 A 180.0000000000 180.0000000000 0 0 0 192.0000000000 12.0000000000"
-      fill="none"
+      d="M 192.0000000000 24.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 351.7774947376 140.0851449450 A 168.0000000000 168.0000000000 0 0 0 192.0000000000 24.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -2133,11 +2085,11 @@ exports[`Meter type 1`] = `
       stroke-width="192"
     />
     <path
-      d="M 283.3014255643 162.3343685400 A 96.0000000000 96.0000000000 0 0 0 192.0000000000 96.0000000000"
-      fill="none"
+      d="M 192.0000000000 192.0000000000 L 192.0000000000 0.0000000000 A 192.0000000000 192.0000000000 0 0 1 374.6028511287 132.6687370800 L 192.0000000000 192.0000000000"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="192"
+      stroke-width="0"
     />
   </svg>
   <svg
@@ -2156,11 +2108,11 @@ exports[`Meter type 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 46.3769410125 86.1986545874 A 180.0000000000 180.0000000000 0 0 0 12.0000000000 192.0000000000"
-      fill="none"
+      d="M 24.0000000000 192.0000000000 L 0.0000000000 192.0000000000 A 192.0000000000 192.0000000000 0 0 1 36.6687370800 79.1452315598 L 56.0851449450 93.2520776149 A 168.0000000000 168.0000000000 0 0 0 24.0000000000 192.0000000000 Z"
+      fill="#6FFFB0"
       stroke="#6FFFB0"
       stroke-linecap="butt"
-      stroke-width="24"
+      stroke-width="0"
     />
   </svg>
 </div>
@@ -2206,11 +2158,10 @@ exports[`Meter vertical 1`] = `
       stroke-width="24"
     />
     <path
-      d="M 12,384 L 12,307.2"
-      fill="none"
-      stroke="#6FFFB0"
-      stroke-linecap="butt"
-      stroke-width="384"
+      d="M 24,384 L 0,384 L 0,307.2 L 24,307.2 Z"
+      fill="#6FFFB0"
+      stroke="none"
+      stroke-width="0"
     />
   </svg>
 </div>
diff --git a/src/js/components/NameValuePair/__tests__/__snapshots__/NameValuePair-test.tsx.snap b/src/js/components/NameValuePair/__tests__/__snapshots__/NameValuePair-test.tsx.snap
index f289c4b3126..093e88ef276 100644
--- a/src/js/components/NameValuePair/__tests__/__snapshots__/NameValuePair-test.tsx.snap
+++ b/src/js/components/NameValuePair/__tests__/__snapshots__/NameValuePair-test.tsx.snap
@@ -477,11 +477,10 @@ exports[`NameValuePair should render value when provided as child of type JSX El
             stroke-width="24"
           />
           <path
-            d="M 0,12 L 307.2,12"
-            fill="none"
-            stroke="#6FFFB0"
-            stroke-linecap="butt"
-            stroke-width="24"
+            d="M 0,24 L 0,0 L 307.2,0 L 307.2,24 Z"
+            fill="#6FFFB0"
+            stroke="none"
+            stroke-width="0"
           />
         </svg>
       </dd>