alojzije · May 31, 2025 12:39 · May 23, 2014 · Apr 26, 2014 · Apr 26, 2014 · Apr 26, 2014
diff --git a/demo.png → connectHTMLelements_SVG.png b/demo.png → connectHTMLelements_SVG.png
diff --git a/connectHTMLelements_SVG.md → howTo.md b/connectHTMLelements_SVG.md → howTo.md
diff --git a/index.html b/index.html
@@ -2,10 +2,9 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <link rel="stylesheet" type="text/css" href="style.css">
   <title>Connect divs with SVG</title>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 </head>
 <body>
 <div id="svgContainer" style="margin: 50px 50px;">
@@ -54,7 +53,6 @@
   <div id="aqua"></div>
 </div>
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 <script src="svgDraw.js"></script>
 </body>
 </html>
diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -1,4 +1,4 @@
-connect html elements via SVG path
+connect html elements with SVG path
 ---
 
 

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -3,8 +3,6 @@ connect html elements via SVG path
 
 
 Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion.
-
-
 It connects the bottom-middle point of the "higher" element with the top-middle point ot the "lower" element. [ preview ](https://gist.github.com/alojzije/11127839#file-demo-png)
 
 

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -2,7 +2,10 @@ connect html elements via SVG path
 ---
 
 
-Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion. [ preview ](https://gist.github.com/alojzije/11127839#file-demo-png)
+Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion.
+
+
+It connects the bottom-middle point of the "higher" element with the top-middle point ot the "lower" element. [ preview ](https://gist.github.com/alojzije/11127839#file-demo-png)
 
 
 Also, *index.html*, and *style.css* are provided for demonstration purposes.

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -2,7 +2,7 @@ connect html elements via SVG path
 ---
 
 
-Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion. [->preview ](https://gist.github.com/alojzije/11127839#file-demo-png)
+Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion. [ preview ](https://gist.github.com/alojzije/11127839#file-demo-png)
 
 
 Also, *index.html*, and *style.css* are provided for demonstration purposes.

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -2,7 +2,7 @@ connect html elements via SVG path
 ---
 
 
-Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion. [demo](https://gist.github.com/alojzije/11127839#file-demo-png)
+Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion. [->preview ](https://gist.github.com/alojzije/11127839#file-demo-png)
 
 
 Also, *index.html*, and *style.css* are provided for demonstration purposes.
@@ -11,7 +11,7 @@ Also, *index.html*, and *style.css* are provided for demonstration purposes.
 
 ###### USAGE:
 
-In odrer to connect any two elements, they need an ID. For the purposes of this demonstration, we shall id them as ***"Mary"*** and ***"Tom"***. Style with *CSS* as you normally would.
+In odrer to connect any two elements, they need an ID. For the purposes of this demonstration, we shall id them as *"Mary"* and *"Tom"*. Style with *CSS* as you normally would.
 
 ```html
  <div id="Mary"></div>
@@ -20,7 +20,7 @@ In odrer to connect any two elements, they need an ID. For the purposes of this
 <br>
 
 Next, (*also in your .html*) we need to add a path with which to connect our Mary and Tom elements. We do that by appending a child `<path>` element to `<svg>`.
-Note that they also have unique IDs, ***"myNewPath"*** and ***"svg1"***, respectively .
+Note that they also have unique IDs, *"myNewPath"* and *"svg1"*, respectively .
 ```html
 <svg id="svg1" width="0" height="0" >
        <path

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -2,7 +2,7 @@ connect html elements via SVG path
 ---
 
 
-Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion.
+Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion. [demo](https://gist.github.com/alojzije/11127839#file-demo-png)
 
 
 Also, *index.html*, and *style.css* are provided for demonstration purposes.

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -9,4 +9,42 @@ Also, *index.html*, and *style.css* are provided for demonstration purposes.
 
 ==
 
-###### *to-do: usage*
+###### USAGE:
+
+In odrer to connect any two elements, they need an ID. For the purposes of this demonstration, we shall id them as ***"Mary"*** and ***"Tom"***. Style with *CSS* as you normally would.
+
+```html
+ <div id="Mary"></div>
+ <p id="Tom"></p>
+```
+<br>
+
+Next, (*also in your .html*) we need to add a path with which to connect our Mary and Tom elements. We do that by appending a child `<path>` element to `<svg>`.
+Note that they also have unique IDs, ***"myNewPath"*** and ***"svg1"***, respectively .
+```html
+<svg id="svg1" width="0" height="0" >
+       <path
+            id="myNewPath"
+            d="M0 0"             
+            stroke-width="0.3em"
+            style="stroke:#555; fill:none;  "/>
+</svg>
+```
+<br>
+
+And now for the fun part. The actual connecting!
+In *svgDraw.js* locate function `connectAll()` and add your connection like so:
+
+```javascript
+function connectAll() {
+    // connect all the paths you want!
+    connectElements($("#svg1"), $("#myNewPath"), $("#Mary"),  $("#Tom"));
+    ...
+    connectElements($("#svg1"), $("#someOtherPath"), $("#purple"), $("#teal")  );
+    connectElements($("#svg1"), $("#yetAnotherPath"), $("#Tom"), $("#teal")  );
+}
+```
+<br>
+
+###### aand... you're done!
+###### You can repeat these steps any number of times connecting any number of different elements ( or  connecting any ***one*** element with any number of different elements, for that matter :)) 
diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -1,7 +1,10 @@
 connect html elements via SVG path
 ---
 
+
 Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion.
+
+
 Also, *index.html*, and *style.css* are provided for demonstration purposes.
 
 ==

diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -1,10 +1,9 @@
-connect html elements with an SVG path
-====
+connect html elements via SVG path
+---
 
-
-Gist contains a javaScript file svgDraw.js for connecting any two html elements with an SVG path in a pipe-like fashion.
-Also, index.html, and style.css are provided for demonstration purposes.
+Gist contains a javaScript file *svgDraw.js* for connecting any two html elements with an SVG path in a pipe-like fashion.
+Also, *index.html*, and *style.css* are provided for demonstration purposes.
 
 ==
 
-*to-do: usage*
+###### *to-do: usage*
diff --git a/connectHTMLelements_SVG.md b/connectHTMLelements_SVG.md
@@ -1,6 +1,10 @@
-connect HTML elememts with SVG path
+connect html elements with an SVG path
 ====
 
 
 Gist contains a javaScript file svgDraw.js for connecting any two html elements with an SVG path in a pipe-like fashion.
-Also, index.html, and style.css are provided for demonstration purposes.
+Also, index.html, and style.css are provided for demonstration purposes.
+
+==
+
+*to-do: usage*
diff --git a/screenShot.png → demo.png b/screenShot.png → demo.png
diff --git a/connectHTMLelements_withSVG.md → connectHTMLelements_SVG.md b/connectHTMLelements_withSVG.md → connectHTMLelements_SVG.md
diff --git a/connectHTMLelements_withSVG.md b/connectHTMLelements_withSVG.md
@@ -0,0 +1,6 @@
+connect HTML elememts with SVG path
+====
+
+
+Gist contains a javaScript file svgDraw.js for connecting any two html elements with an SVG path in a pipe-like fashion.
+Also, index.html, and style.css are provided for demonstration purposes.
diff --git a/connectPathSVG.html → index.html b/connectPathSVG.html → index.html
diff --git a/screenShot.png b/screenShot.png
diff --git a/svgDraw.js b/svgDraw.js
@@ -1,12 +1,12 @@
 //helper functions, it turned out chrome doesn't support Math.sgn() 
-function signum(x){
+function signum(x) {
     return (x < 0) ? -1 : 1;
 }
-function absolute(x){
+function absolute(x) {
     return (x < 0) ? -x : x;
 }
 
-function drawPath(svg, path, startX, startY, endX, endY){
+function drawPath(svg, path, startX, startY, endX, endY) {
     // get the path's stroke width (if one wanted to be  really precize, one could use half the stroke size)
     var stroke =  parseFloat(path.attr("stroke-width"));
     // check if the svg is big enough to draw the path, if not, set heigh/width
@@ -16,7 +16,7 @@ function drawPath(svg, path, startX, startY, endX, endY){
 
     var deltaX = (endX - startX) * 0.15;
     var deltaY = (endY - startY) * 0.15;
-    // for further calculations which ever is the shortest distance  (arbitrary choice, could have been the other way around)
+    // for further calculations which ever is the shortest distance
     var delta  =  deltaY < absolute(deltaX) ? deltaY : absolute(deltaX);
 
     // set sweep-flag (counter/clock-wise)
@@ -71,7 +71,7 @@ function connectElements(svg, path, startElem, endElem) {
 
 
 
-function connectAll(){
+function connectAll() {
     // connect all the paths you want!
     connectElements($("#svg1"), $("#path1"), $("#teal"),   $("#orange"));
     connectElements($("#svg1"), $("#path2"), $("#red"),    $("#orange"));

diff --git a/style.css b/style.css
@@ -2,7 +2,6 @@ body{ background-color:gray; }
 
 #svgContainer { 
 	z-index: -10;
-	display: none;
 	position:absolute;
 	background-color:silver;
 	opacity: 0.5;

diff --git a/connectPathSVG.html b/connectPathSVG.html
@@ -5,13 +5,14 @@
   <link rel="stylesheet" type="text/css" href="style.css">
   <title>Connect divs with SVG</title>
 
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 </head>
 <body>
 <div id="svgContainer" style="margin: 50px 50px;">
-    <svg id="svg1" width="500" height="400" >
+    <svg id="svg1" width="0" height="0" >
         <path
             id="path1"
-            d="M0 0"             
+            d="M0 0"         
             stroke="#000" 
             fill="none" 
             stroke-width="12px";/>
@@ -45,15 +46,15 @@
 </div>
 
 <div id= "outer">
-  <div id="teal">   </div>
-  <div id="red">    </div>
-  <div id="green">  </div>
-  <div id="purple"> </div>
-  <div id="orange"> </div>
-  <div id="aqua">   </div>
+  <div id="teal"></div>
+  <div id="red"></div>
+  <div id="green"></div>
+  <div id="purple"></div>
+  <div id="orange"></div>
+  <div id="aqua"></div>
 </div>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 <script src="svgDraw.js"></script>
 </body>
-</html>
+</html>
diff --git a/svgDraw.js b/svgDraw.js
@@ -1,4 +1,4 @@
-//helpet functions, it turned out chrome doesn't support Math.sgn() 
+//helper functions, it turned out chrome doesn't support Math.sgn() 
 function signum(x){
     return (x < 0) ? -1 : 1;
 }
@@ -83,11 +83,15 @@ function connectAll(){
 }
 
 $(document).ready(function() {
-    $("#svgContainer").css("display", "block"); // display the svg
+    // reset svg each time 
+    $("#svg1").attr("height", "0");
+    $("#svg1").attr("width", "0");
     connectAll();
 });
 
 $(window).resize(function () {
-    $("#svgContainer").css("display", "block"); // display the svg
+    // reset svg each time 
+    $("#svg1").attr("height", "0");
+    $("#svg1").attr("width", "0");
     connectAll();
 });
diff --git a/svgDraw.js b/svgDraw.js
@@ -1,89 +1,93 @@
-function connectElements(svg, path, startElem, endElem) {
-    //only one svgContainer fot this demo
-    var svgContainer= $("#svgContainer");
-
-    // if first element is lower than the second, swap!
-    if(startElem.offset().top > endElem.offset().top){
-        var temp = startElem;
-        startElem = endElem;
-        endElem = temp;
-    }
-
-    // get (top, left) corner coordinates of the svg container   
-    svgTop  = svgContainer.offset().top;
-    svgLeft = svgContainer.offset().left
-
-    // get (top, left) coordinates for the two elements
-    startCoord = startElem.offset();
-    endCoord   = endElem.offset();
-
-    // calculate path's start (x,y)  coords
-    // we want the x coordinate to visually result in the element's mid point
-    startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft;    // x = left offset + 0.5*width - svg's left offset
-    startY = startCoord.top  + startElem.outerHeight() - svgTop;        // y = top offset + height - svg's top offset
-
-    // calculate path's end (x,y) coords
-    endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft;
-    endY = endCoord.top  - svgTop;
-
-    // call function for drawing the path
-    drawPath(svg, path, startX, startY, endX, endY);
- }
+//helpet functions, it turned out chrome doesn't support Math.sgn() 
+function signum(x){
+    return (x < 0) ? -1 : 1;
+}
+function absolute(x){
+    return (x < 0) ? -x : x;
+}
 
- function drawPath(svg, path, startX, startY, endX, endY){
-
+function drawPath(svg, path, startX, startY, endX, endY){
     // get the path's stroke width (if one wanted to be  really precize, one could use half the stroke size)
     var stroke =  parseFloat(path.attr("stroke-width"));
     // check if the svg is big enough to draw the path, if not, set heigh/width
-    if (svg.attr("height") <  endY)                  svg.attr("height", endY);
+    if (svg.attr("height") <  endY)                 svg.attr("height", endY);
     if (svg.attr("width" ) < (startX + stroke) )    svg.attr("width", (startX + stroke));
     if (svg.attr("width" ) < (endX   + stroke) )    svg.attr("width", (endX   + stroke));
 
-
-    var deltaY = (endY - startY) * 0.15;
     var deltaX = (endX - startX) * 0.15;
+    var deltaY = (endY - startY) * 0.15;
     // for further calculations which ever is the shortest distance  (arbitrary choice, could have been the other way around)
-    var delta  =  deltaY < Math.abs(deltaX) ? deltaY : Math.abs(deltaX)
+    var delta  =  deltaY < absolute(deltaX) ? deltaY : absolute(deltaX);
 
-
     // set sweep-flag (counter/clock-wise)
     // if start element is closer to the left edge,
     // draw the first arc counter-clockwise, and the second one clock-wise
-    var arc1 = 0;
-    var arc2 = 1;
+    var arc1 = 0; var arc2 = 1;
     if (startX > endX) {
         arc1 = 1;
         arc2 = 0;
     }
-
     // draw tha pipe-like path
     // 1. move a bit down, 2. arch,  3. move a bit to the right, 4.arch, 5. move down to the end 
     path.attr("d",  "M"  + startX + " " + startY +
                     " V" + (startY + delta) +
-                    " A" + delta + " " +  delta + " 0 0 " + arc1 + " " + (startX+delta * Math.sign(deltaX)) + " " + (startY+delta*2) +
-                    " H" + (endX-delta* Math.sign(deltaX)) + 
-                    " A" + delta + " " +  delta + " 0 0 " + arc2 + " " + endX + " " + (startY+delta*3) +
+                    " A" + delta + " " +  delta + " 0 0 " + arc1 + " " + (startX + delta*signum(deltaX)) + " " + (startY + 2*delta) +
+                    " H" + (endX - delta*signum(deltaX)) + 
+                    " A" + delta + " " +  delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) +
                     " V" + endY );
 }
-
 
-$(document).ready(function() {
-    // display the svg
-    $("#svgContainer").css("display", "block");
+function connectElements(svg, path, startElem, endElem) {
+    var svgContainer= $("#svgContainer");
+
+    // if first element is lower than the second, swap!
+    if(startElem.offset().top > endElem.offset().top){
+        var temp = startElem;
+        startElem = endElem;
+        endElem = temp;
+    }
+
+    // get (top, left) corner coordinates of the svg container   
+    var svgTop  = svgContainer.offset().top;
+    var svgLeft = svgContainer.offset().left;
+
+    // get (top, left) coordinates for the two elements
+    var startCoord = startElem.offset();
+    var endCoord   = endElem.offset();
+
+    // calculate path's start (x,y)  coords
+    // we want the x coordinate to visually result in the element's mid point
+    var startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft;    // x = left offset + 0.5*width - svg's left offset
+    var startY = startCoord.top  + startElem.outerHeight() - svgTop;        // y = top offset + height - svg's top offset
+
+        // calculate path's end (x,y) coords
+    var endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft;
+    var endY = endCoord.top  - svgTop;
+
+    // call function for drawing the path
+    drawPath(svg, path, startX, startY, endX, endY);
+
+}
+
+
+
+function connectAll(){
     // connect all the paths you want!
     connectElements($("#svg1"), $("#path1"), $("#teal"),   $("#orange"));
     connectElements($("#svg1"), $("#path2"), $("#red"),    $("#orange"));
     connectElements($("#svg1"), $("#path3"), $("#teal"),   $("#aqua")  );
     connectElements($("#svg1"), $("#path4"), $("#red"),    $("#aqua")  ); 
     connectElements($("#svg1"), $("#path5"), $("#purple"), $("#teal")  );
     connectElements($("#svg1"), $("#path6"), $("#orange"), $("#green") );
+
+}
+
+$(document).ready(function() {
+    $("#svgContainer").css("display", "block"); // display the svg
+    connectAll();
 });
 
 $(window).resize(function () {
-    connectElements($("#svg1"), $("#path1"), $("#teal"),   $("#orange"));
-    connectElements($("#svg1"), $("#path2"), $("#red"),    $("#orange"));
-    connectElements($("#svg1"), $("#path3"), $("#teal"),   $("#aqua")  );
-    connectElements($("#svg1"), $("#path4"), $("#red"),    $("#aqua")  ); 
-    connectElements($("#svg1"), $("#path5"), $("#purple"), $("#teal")  );
-    connectElements($("#svg1"), $("#path6"), $("#orange"), $("#green") );
+    $("#svgContainer").css("display", "block"); // display the svg
+    connectAll();
 });
diff --git a/index.html → connectPathSVG.html b/index.html → connectPathSVG.html
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <title>Connect divs with SVG</title>
+
+</head>
+<body>
+<div id="svgContainer" style="margin: 50px 50px;">
+    <svg id="svg1" width="500" height="400" >
+        <path
+            id="path1"
+            d="M0 0"             
+            stroke="#000" 
+            fill="none" 
+            stroke-width="12px";/>
+         <path
+            id="path2"
+            d="M0 0"             
+            stroke="#000" 
+            fill="none" 
+            stroke-width="12px";/>
+         <path
+            id="path3"
+            d="M0 0"      
+            stroke-width="8px"
+            style="stroke:#000; fill:none;"/>
+          <path
+            id="path4"
+            d="M0 0"    
+            stroke-width="12px"         
+            style="stroke:#000; fill:none;  stroke-width: 12px;" />
+          <path
+            id="path5"
+            d="M0 0"    
+            stroke-width="10px"         
+            style="stroke:#000; fill:none;"/>
+          <path
+            id="path6"
+            d="M0 0"    
+            stroke-width="10px"         
+            style="stroke:#000; fill:none;"/>
+    </svg>
+</div>
+
+<div id= "outer">
+  <div id="teal">   </div>
+  <div id="red">    </div>
+  <div id="green">  </div>
+  <div id="purple"> </div>
+  <div id="orange"> </div>
+  <div id="aqua">   </div>
+</div>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
+<script src="svgDraw.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,58 @@
+body{ background-color:gray; }
+
+#svgContainer { 
+	z-index: -10;
+	display: none;
+	position:absolute;
+	background-color:silver;
+	opacity: 0.5;
+}
+
+div{ opacity: 0.6; }
+
+
+#outer{
+	margin:0 auto;
+	width: 80%;
+}
+
+#teal{
+ 	width: 6em;
+ 	height: 6em;
+ 	background-color:teal;
+ 	margin-left: 10%;
+}
+#orange{
+	height: 4em;
+	width: 35%;
+	padding: 2em 8em;
+	margin-left: 8em;
+	margin-top: 6em;
+	background-color: orange; 
+}
+
+#red{
+	width:6em;
+	height: 4em;
+	margin-left: 30%; 
+	padding:4em 3em;
+	background-color:red;
+}
+#aqua{
+	width: 5em;
+	height: 5em;
+	margin-left:15%; 
+	background-color:aqua;
+}
+#purple{
+	width: 15em;
+	height: 5em;
+	background-color:purple;
+}
+#green{
+	width: 5em;
+	height: 7em;
+	margin-top: 2em;
+	margin-left: 50%;
+	background-color: green;
+}
diff --git a/svgDraw.js b/svgDraw.js
@@ -0,0 +1,89 @@
+function connectElements(svg, path, startElem, endElem) {
+    //only one svgContainer fot this demo
+    var svgContainer= $("#svgContainer");
+
+    // if first element is lower than the second, swap!
+    if(startElem.offset().top > endElem.offset().top){
+        var temp = startElem;
+        startElem = endElem;
+        endElem = temp;
+    }
+
+    // get (top, left) corner coordinates of the svg container   
+    svgTop  = svgContainer.offset().top;
+    svgLeft = svgContainer.offset().left
+
+    // get (top, left) coordinates for the two elements
+    startCoord = startElem.offset();
+    endCoord   = endElem.offset();
+
+    // calculate path's start (x,y)  coords
+    // we want the x coordinate to visually result in the element's mid point
+    startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft;    // x = left offset + 0.5*width - svg's left offset
+    startY = startCoord.top  + startElem.outerHeight() - svgTop;        // y = top offset + height - svg's top offset
+
+    // calculate path's end (x,y) coords
+    endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft;
+    endY = endCoord.top  - svgTop;
+
+    // call function for drawing the path
+    drawPath(svg, path, startX, startY, endX, endY);
+ }
+
+ function drawPath(svg, path, startX, startY, endX, endY){
+
+    // get the path's stroke width (if one wanted to be  really precize, one could use half the stroke size)
+    var stroke =  parseFloat(path.attr("stroke-width"));
+    // check if the svg is big enough to draw the path, if not, set heigh/width
+    if (svg.attr("height") <  endY)                  svg.attr("height", endY);
+    if (svg.attr("width" ) < (startX + stroke) )    svg.attr("width", (startX + stroke));
+    if (svg.attr("width" ) < (endX   + stroke) )    svg.attr("width", (endX   + stroke));
+
+
+    var deltaY = (endY - startY) * 0.15;
+    var deltaX = (endX - startX) * 0.15;
+    // for further calculations which ever is the shortest distance  (arbitrary choice, could have been the other way around)
+    var delta  =  deltaY < Math.abs(deltaX) ? deltaY : Math.abs(deltaX)
+
+
+    // set sweep-flag (counter/clock-wise)
+    // if start element is closer to the left edge,
+    // draw the first arc counter-clockwise, and the second one clock-wise
+    var arc1 = 0;
+    var arc2 = 1;
+    if (startX > endX) {
+        arc1 = 1;
+        arc2 = 0;
+    }
+
+    // draw tha pipe-like path
+    // 1. move a bit down, 2. arch,  3. move a bit to the right, 4.arch, 5. move down to the end 
+    path.attr("d",  "M"  + startX + " " + startY +
+                    " V" + (startY + delta) +
+                    " A" + delta + " " +  delta + " 0 0 " + arc1 + " " + (startX+delta * Math.sign(deltaX)) + " " + (startY+delta*2) +
+                    " H" + (endX-delta* Math.sign(deltaX)) + 
+                    " A" + delta + " " +  delta + " 0 0 " + arc2 + " " + endX + " " + (startY+delta*3) +
+                    " V" + endY );
+}
+
+
+$(document).ready(function() {
+    // display the svg
+    $("#svgContainer").css("display", "block");
+    // connect all the paths you want!
+    connectElements($("#svg1"), $("#path1"), $("#teal"),   $("#orange"));
+    connectElements($("#svg1"), $("#path2"), $("#red"),    $("#orange"));
+    connectElements($("#svg1"), $("#path3"), $("#teal"),   $("#aqua")  );
+    connectElements($("#svg1"), $("#path4"), $("#red"),    $("#aqua")  ); 
+    connectElements($("#svg1"), $("#path5"), $("#purple"), $("#teal")  );
+    connectElements($("#svg1"), $("#path6"), $("#orange"), $("#green") );
+});
+
+$(window).resize(function () {
+    connectElements($("#svg1"), $("#path1"), $("#teal"),   $("#orange"));
+    connectElements($("#svg1"), $("#path2"), $("#red"),    $("#orange"));
+    connectElements($("#svg1"), $("#path3"), $("#teal"),   $("#aqua")  );
+    connectElements($("#svg1"), $("#path4"), $("#red"),    $("#aqua")  ); 
+    connectElements($("#svg1"), $("#path5"), $("#purple"), $("#teal")  );
+    connectElements($("#svg1"), $("#path6"), $("#orange"), $("#green") );
+});
Original file line number	Diff line number	Diff line change
		@@ -3,8 +3,6 @@ connect html elements via SVG path


		Gist contains a javaScript file svgDraw.js for connecting any two html elements with an SVG path in a pipe-like fashion.


		It connects the bottom-middle point of the "higher" element with the top-middle point ot the "lower" element. [ preview ](https://gist.github.com/alojzije/11127839#file-demo-png)