diff --git a/main.js b/main.js
index a47441f..5891b32 100644
--- a/main.js
+++ b/main.js
@@ -22,52 +22,30 @@ class Resistor {
         return `${'--'.repeat(depth)}${this.toString()}`
     }
     parallel(other) {
-        return NewParallelResistor.smart(this, other);
+        return new ParallelResistor(this, other);
     }
     series(other) {
-        return NewSeriesResistor.smart(this, other);
+        return new SeriesResistor(this, other);
     }
-}
-class ComplexResistor extends Resistor {
-    left;
-    constructor(other) {
-        super(other.getOhmage());
-        this.left = other;
+    getSVG() {
+        var svg = `<svg width="50" heigh="100"><rect x="0" y="0" width="50" height="100" fill="white" stroke="black"/>
+        <text x="25" y="50" dominant-baseline="middle" text-anchor="middle">${this.getOhmage()}&Omega;</text></svg>`
+        var [width, height] = [50, 100]
+        return [svg, width, height]
     }
-}
-class SeriesResistor extends Resistor {
-    left;
-    right;
-    constructor(r1, r2) {
-        super(r1.getOhmage() + r2.getOhmage());
-        this.left = r1;
-        this.right = r2;
-    }
-    size() {
-        return this.left.size() + this.right.size();
-    }
-    prettyString(depth = 0) {
-        var leftString = this.left.prettyString(depth + 1)
-        var leftString = this.left.constructor.name === "SeriesResistor" ? `${this.left.left.prettyString(depth + 1)}\n${this.left.right.prettyString(depth + 1)}` : this.left.prettyString(depth + 1);
-        var rightString = this.right.constructor.name === "SeriesResistor" ? `${this.right.left.prettyString(depth + 1)}\n${this.right.right.prettyString(depth + 1)}` : this.right.prettyString(depth + 1);
-        return `${'--'.repeat(depth)}${this.toString()}\n${leftString}\n${rightString}`;
-    }
-}
-class ParallelResistor extends Resistor {
-    left
-    right
-    constructor(r1, r2) {
-        super(1 / ((1/r1.getOhmage()) + (1/r2.getOhmage())));
-        this.left = r1;
-        this.right = r2;
-    }
-    size() {
-        return this.left.size() + this.right.size();
-    }
-    prettyString(depth = 0) {
-        return `${'--'.repeat(depth)}${this.toString()}
-${this.left.prettyString(depth + 1)}
-${this.right.prettyString(depth + 1)}`
+    draw() {
+        var [svg, width, height] = this.getSVG();
+        var maxHeight = height + 2*25
+        var maxWidth = width
+        var midPoint = width / 2
+        var thesvg = `<svg width="${maxWidth}" height="${maxHeight}" viewbox="0 0 ${maxWidth} ${maxHeight}">
+            <line x1="${midPoint}" x2="${midPoint}" y1="${0}" y2="${25}" stroke="black"/>
+            <line x1="${midPoint}" x2="${midPoint}" y1="${maxHeight - 25}" y2="${maxHeight}" stroke="black"/>
+            <g transform="translate(0, 25)">
+            ${svg}
+            </g>
+            </svg>`
+        document.getElementsByTagName("body")[0].innerHTML = thesvg;
     }
 }
 
@@ -81,49 +59,18 @@ function harm(list) {
     list.forEach(e => temp += 1 / e);
     return 1 / temp;
 }
+function flatten(list, flattable) {
+    return list.reduce( (acc, cur) => acc.concat(cur.constructor.name === flattable ? cur.children : [cur]), []);
+}
+
 
 class NestedResistor extends Resistor {
     children = []
 
-    constructor(l, func) {
+    constructor(l, func, instance) {
         super(func(l.map(e => e.getOhmage())));
         this.func = func
-        this.children = l;
-    }
-    cost() {
-        return func(this.children.map(e => e.cost()));
-    }
-    prettyString(depth = 0) {
-        var childrenStrings = this.children.map(c => c.prettyString(depth + 1)).join("\n")
-        return `${'--'.repeat(depth)}${this.toString()}\n${childrenStrings}`
-    }
-    parallel(other) {
-        return NewParallelResistor.smart(this, other);
-    }
-    series(other) {
-        return NewSeriesResistor.smart(this, other);
-    }
-}
-}
-
-
-class NewSeriesResistor extends Resistor {
-    children = []
-    
-    static smart(...list) {
-        var thelist = []
-        list.forEach(e => {
-            if (e.constructor.name === "NewSeriesResistor") {
-                e.children.forEach(e => thelist.push(e));
-            } else {
-                thelist.push(e);
-            }
-        });
-        return new NewSeriesResistor(thelist);
-    }
-    constructor(l) {
-        super(sum(l.map(e => e.getOhmage())));
-        this.children = l;
+        this.children = flatten(l, instance.constructor.name);
     }
     cost() {
         return sum(this.children.map(e => e.cost()));
@@ -133,49 +80,83 @@ class NewSeriesResistor extends Resistor {
         return `${'--'.repeat(depth)}${this.toString()}\n${childrenStrings}`
     }
     parallel(other) {
-        return NewParallelResistor.smart(this, other);
+        return new ParallelResistor(this, other);
     }
     series(other) {
-        return NewSeriesResistor.smart(this, other);
+        return new SeriesResistor(this, other);
     }
 }
 
-class NewParallelResistor extends Resistor {
-    children = []
-    
-    static smart(...list) {
-        var thelist = []
-        list.forEach(e => {
-            if (e.constructor.name === "NewParallelResistor") {
-                e.children.forEach(e => thelist.push(e));
-            } else {
-                thelist.push(e);
-            }
+class SeriesResistor extends NestedResistor {
+    constructor(...l) {
+        super(l, sum, "SeriesResistor");
+    }
+    getSVG() {
+        var svgs = this.children.map(e => e.getSVG()); // triplets [svg, width, height]
+        var n = svgs.length;
+        var maxHeight = sum(svgs.map(([svg, width, height]) => height)) + 25 * (n - 1)
+        var maxWidth = Math.max(...svgs.map(([svg, width, height]) => width))
+        var yOffset = 0; // where to start the next boundin
+        var centerLine = maxWidth / 2;
+
+        var innerSVGs = []
+        var i = 0;
+        svgs.forEach(([svg, width, height]) => {
+            var xStart = (maxWidth - width) / 2
+
+            var partialInnerSVG = `<g transform="translate(${xStart}, ${yOffset})">${svg}</g>`
+            if (i < n - 1)
+                partialInnerSVG += `<line x1="${centerLine}" x2="${centerLine}" y1="${yOffset + height}" y2="${yOffset + height + 25}" stroke="black"/>`
+            // finally
+            yOffset += 25 + height
+            i ++;
+            innerSVGs.push(partialInnerSVG)
         });
-        return new NewParallelResistor(thelist);
+        var svg = innerSVGs.join("")
+        return [svg, maxWidth, maxHeight]
     }
-    constructor(l) {
-        super(harm(l.map(e => e.getOhmage())));
-        this.children = l;
+}
+
+class ParallelResistor extends NestedResistor {
+    constructor(...l) {
+        super(l, harm, "ParallelResistor");
     }
-    cost() {
-        return sum(this.children.map(e => e.cost()));
-    }
-    prettyString(depth = 0) {
-        var childrenStrings = this.children.map(c => c.prettyString(depth + 1)).join("\n")
-        return `${'--'.repeat(depth)}${this.toString()}\n${childrenStrings}`
-    }
-    parallel(other) {
-        return NewParallelResistor.smart(this, other);
-    }
-    series(other) {
-        return NewSeriesResistor.smart(this, other);
+    getSVG() {
+        var svgs = this.children.map(e => e.getSVG()); // triplets [svg, width, height]
+        var n = svgs.length;
+        var maxHeight = Math.max(...svgs.map(([svg, width, height]) => height)) + 2 * 25
+        var maxWidth = sum(svgs.map(([svg, width, height]) => width)) + 25 * (n - 1)
+        var bottomLineStart = svgs[0][1] / 2
+        var bottomLineEnd = maxWidth - svgs[n - 1][1] / 2
+        var xOffset = 0; // where to start the next boundin
+
+        var innerSVGs = []
+        svgs.forEach(([svg, width, height]) => {
+            var antennaX = xOffset + width / 2
+            var antennaLength = (maxHeight - height) / 2
+            var antennaOneStart = 0
+            var antennaOneEnd = antennaLength
+            var antennaTwoStart = antennaLength + height
+            var antennaTwoEnd = maxHeight
+
+            var partialInnerSVG = `<g transform="translate(${xOffset}, ${antennaOneEnd})">${svg}</g>
+            <line x1="${antennaX}" x2="${antennaX}" y1="${antennaOneStart}" y2="${antennaOneEnd}" stroke="black"/>
+            <line x1="${antennaX}" x2="${antennaX}" y1="${antennaTwoStart}" y2="${antennaTwoEnd}" stroke="black"/> `
+            // finally
+            xOffset += 25 + width
+            innerSVGs.push(partialInnerSVG)
+        });
+        var innerSVG = innerSVGs.join("")
+        var svg = `<line x1="${bottomLineStart}" x2="${bottomLineEnd}" y1="0" y2="0" stroke="black"/>
+            <line x1="${bottomLineStart}" x2="${bottomLineEnd}" y1="${maxHeight}" y2="${maxHeight}" stroke="black"/>
+            ${innerSVG}`
+        return [svg, maxWidth, maxHeight]
     }
 }
 
 
 
-var resistors = [100]
+var resistors = [100, 1000]
 var N = 4
 var maxValue = Math.max(...resistors)
 
@@ -202,8 +183,8 @@ function iterSet() {
     addition = new Set()
     set.forEach(e1 => {
         set.forEach(e2 => {
-            r1 = NewSeriesResistor.smart(e1, e2);
-            r2 = NewParallelResistor.smart(e1, e2);
+            r1 = new SeriesResistor(e1, e2);
+            r2 = new ParallelResistor(e1, e2);
             addition.add(r1);
             addition.add(r2);
         });