diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index 18b2b0eb2..c58e77335 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -21,13 +21,13 @@
           markerWidth="1.5" markerHeight="1"
           orient="auto">
       </marker>
-      <radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%">
+      <radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
         <stop [attr.stop-color]="gradient[0]" />
       </radialGradient>
-      <radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
         <stop [attr.stop-color]="gradient[1]" />
       </radialGradient>
-      <radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
         <stop [attr.stop-color]="gradient[2]" />
       </radialGradient>
       <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
index 2802b4a45..1f9602512 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -260,7 +260,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let lastOuter = 0;
     let lastInner = innerTop;
     // gap between strands
-    const spacing = (this.height - visibleWeight) / gaps;
+    const spacing = Math.max(4, (this.height - visibleWeight) / gaps);
 
     // curve adjustments to prevent overlaps
     let offset = 0;
@@ -270,7 +270,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let pad = 0;
     lineParams.forEach((line, i) => {
       if (xputs[i].value === 0) {
-        line.outerY = lastOuter + this.zeroValueThickness / 2;
+        line.outerY = lastOuter + (this.zeroValueThickness / 2);
         lastOuter += this.zeroValueThickness + spacing;
         return;
       }
@@ -349,7 +349,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
     const start = (weight * 0.5) + this.connectorWidth;
-    const curveStart = Math.max(start + 1, pad - offset);
+    const curveStart = Math.max(start + 5, pad - offset);
     const end =  this.width / 2 - (this.midWidth * 0.9) + 1;
     const curveEnd = end - offset - 10;
     const midpoint = (curveStart + curveEnd) / 2;
@@ -368,11 +368,11 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   makeZeroValuePath(side: 'in' | 'out', y: number): string {
     const offset = this.zeroValueThickness / 2;
-    const start = this.connectorWidth + 10;
+    const start = (this.connectorWidth / 2) + 10;
     if (side === 'in') {
-      return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y + 1}`;
+      return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y}`;
     } else { // mirrored in y-axis for the right hand side
-      return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y + 1}`;
+      return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y}`;
     }
   }