diff --git a/client/app/scripts/charts/node-shape-heptagon.js b/client/app/scripts/charts/node-shape-heptagon.js
index 1abfe4b5b..40314b1c1 100644
--- a/client/app/scripts/charts/node-shape-heptagon.js
+++ b/client/app/scripts/charts/node-shape-heptagon.js
@@ -33,7 +33,7 @@ export default function NodeShapeHeptagon({id, highlighted, size, color, metric}
 
   return (
     <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId, size, height, size * 0.5 - height, -size * 0.5)}
+      {hasMetric && getClipPathDefinition(clipId, size, height, -size * 0.5, size * 0.5 - height)}
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
diff --git a/client/app/scripts/charts/node-shape-hexagon.js b/client/app/scripts/charts/node-shape-hexagon.js
index 4e4c18d72..36c2a6055 100644
--- a/client/app/scripts/charts/node-shape-hexagon.js
+++ b/client/app/scripts/charts/node-shape-hexagon.js
@@ -36,18 +36,20 @@ export default function NodeShapeHexagon({id, highlighted, size, color, metric})
   });
 
   const shadowSize = 0.45;
-  const upperHexBitHeight = -0.25 * size * shadowSize;
 
   const clipId = `mask-${id}`;
   const {height, hasMetric, formattedValue} = getMetricValue(metric, size);
   const metricStyle = { fill: getMetricColor(metric) };
   const className = classNames('shape', { metrics: hasMetric });
   const fontSize = size * CANVAS_METRIC_FONT_SIZE;
+  // how much the hex curve line interpolator curves outside the original shape definition in
+  // percent (very roughly)
+  const hexCurve = 0.05;
 
   return (
     <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId, size, height, size - height +
-                                          upperHexBitHeight, 0)}
+      {hasMetric && getClipPathDefinition(clipId,
+        size * (1 + hexCurve * 2), height, -size * hexCurve, (size - height) * shadowSize * 2)}
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(shadowSize)} />