diff --git a/src/main.js b/src/main.js
index 8eb5e64..cff4d0a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,9 +30,6 @@ let n = 0;
 let unit = "px";
 let strokeWidth = 1;
 
-// maths
-
-
 // logic
 function getValues() {
     pointsP = [];
@@ -105,58 +102,52 @@ function plotSVG() {
             maxX = point.x;
         }
     })
-    let pointsA = "";
-    let pointsB = "";
+    let pathA = "M ";
+    let pathB = "M ";
+	let pathTop = `M ${maths.approx(panelPoints[0].x)} ${maxY - maths.approx(panelPoints[0].y)} ${panelPoints[0].x} ${maxY - maths.approx(panelPoints[0].y)}`;
+	let pathBottom = `M ${maths.approx(panelPoints[panelPoints.length - 1].x)} ${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)} ${panelPoints[panelPoints.length - 1].x} ${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}`;
+	let pathCentre = `M ${maths.approx(panelPoints[0].x)} ${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2} ${panelPoints[panelPoints.length - 1].x} ${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}`;
     for (let i = 0; i < panelPoints.length; i++) {
         let point = panelPoints[i];
-        pointsA += `${maths.approx(point.x)},${(maxY) - maths.approx(point.y)} `;
-        pointsB +=`${maths.approx(point.x)},${maths.approx((point.y + maxY))} `;
+        pathA += `${maths.approx(point.x)} ${(maxY) - maths.approx(point.y)} `;
+        pathB +=`${maths.approx(point.x)} ${maths.approx((point.y + maxY))} `;
     }
     outputdiv.innerHTML = `
-        <svg    width="297mm"
+	<svg 	width="297mm"
                 height="210mm"
                 xmlns="http://www.w3.org/2000/svg">
                 <g id="layer1">
-                    <line 
-                        x1="${maths.approx(panelPoints[0].x)}${unit}" 
-                        x2="${panelPoints[0].x}${unit}" 
-                        y1="${maxY - maths.approx(panelPoints[0].y)}${unit}" 
-                        y2="${maths.approx((panelPoints[0].y + maxY))}${unit}"
-                        fill="none" 
-                        stroke="black" 
-                        stroke-width="${strokeWidth}" 
-                    />
-                    <line 
-                        x1="${maths.approx(panelPoints[panelPoints.length - 1].x)}${unit}" 
-                        x2="${panelPoints[panelPoints.length - 1].x}${unit}" 
-                        y1="${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)}${unit}" 
-                        y2="${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}${unit}" 
-                        fill="none" 
-                        stroke="black" 
-                        stroke-width="${strokeWidth}" 
-                    />
-                    <line 
-                        x1="${maths.approx(panelPoints[0].x)}${unit}" 
-                        x2="${panelPoints[panelPoints.length - 1].x}${unit}" 
-                        y1="${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2}${unit}" 
-                        y2="${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}${unit}" 
-                        fill="none" 
-                        stroke="black" 
-                        stroke-width="${strokeWidth}" 
-                    />
-                    <polyline 
-                        points="${pointsA}" 
-                        fill="none" 
-                        stroke="black" 
-                        stroke-width="${strokeWidth}" 
-                    />
-                    <polyline 
-                        points="${pointsB}" 
-                        fill="none" 
-                        stroke="black" 
-                        stroke-width="${strokeWidth}" 
-                    />
-            </g>
+			<path
+				d="${pathTop}"
+				fill="none"
+				stroke="black"
+				stroke-width="${strokeWidth}"
+			/>
+			<path
+				d="${pathBottom}"
+				fill="none"
+				stroke="black"
+				stroke-width="${strokeWidth}"
+			/>
+			<path
+				d="${pathCentre}"
+				fill="none"
+				stroke="black"
+				stroke-width="${strokeWidth}"
+			/>
+			<path
+				d="${pathA}"
+				stroke="black"
+				fill="none"
+				stroke-width="${strokeWidth}"
+			/>
+			<path
+				d="${pathB}"
+				stroke="black"
+				fill="none"
+				stroke-width="${strokeWidth}"
+			/>
+		</g>
         </svg>
     `;
     lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`;