Bootstrap Snippet using HTML CSS jQuery

body{ background-color:white; } #svgContainer { z-index: -10; position:absolute; background-color:white; opacity: 0.5; } div{ opacity: 1; } #outer{ margin:0 auto; width: 80%; } #teal{ width: 6em; height: 6em; background-color:teal; margin-left: 10%; position:absolute; top: 0px; left: 250px; } #teal2{ width: 6em; height: 6em; background-color:teal; margin-left: 10%; position:absolute; top: 600px; left: 250px; } #teal3{ width: 6em; height: 6em; background-color:teal; margin-left: 10%; position:absolute; top: 300px; left: 250px; } #teal4{ width: 6em; height: 6em; background-color:teal; margin-left: 10%; position:absolute; top: 900px; left: 250px; } #orange2{ width: 6em; height: 6em; background-color:orange; margin-left: 10%; position:absolute; top: 300px; left: 575px; } #teal6{ width: 6em; height: 6em; background-color:teal; margin-left: 10%; position:absolute; top: 1300px; left: 250px; } #orange3{ width: 6em; height: 6em; background-color:orange; margin-left: 10%; position:absolute; top: 1300px; left: 0px; } #orange4{ width: 6em; height: 6em; background-color:orange; margin-left: 10%; position:absolute; top: 900px; left: 0px; } #teal9{ width: 6em; height: 6em; background-color:teal; margin-left: 10%; position:absolute; top: 1700px; left: 250px; } #orange5{ width: 6em; height: 6em; background-color:orange; margin-left: 10%; position:absolute; top: 1675px; left: 0px; } #orange6{ width: 6em; height: 6em; background-color:orange; margin-left: 10%; position:absolute; top: 0px; left: 600px; } #orange7{ width: 6em; height: 6em; background-color:orange; margin-left: 10%; position:absolute; top: 0px; left: 900px; } #red1{ width: 6em; height: 3em; background-color:red; margin-left: 10%; position:absolute; top: 500px; left: 600px; } #red2{ width: 6em; height: 3em; background-color:red; margin-left: 10%; position:absolute; top: 500px; left: 1200px; } #red3{ width: 6em; height: 2em; background-color:red; margin-left: 10%; position:absolute; top: 525px; left: 900px; } #red4{ width: 6em; height: 5em; background-color:red; margin-left: 10%; position:absolute; top: 500px; left: 1500px; } #green1{ width: 6em; height: 2em; background-color:green; margin-left: 10%; position:absolute; top: 400px; left: 1800px; } #green2{ width: 6em; height: 5em; background-color:green; margin-left: 10%; position:absolute; top: 0px; left: 1800px; } #green3{ width: 6em; height: 3em; background-color:green; margin-left: 10%; position:absolute; top: 700px; left: 1800px; } #green4{ width: 6em; height: 6em; background-color:green; margin-left: 10%; position:absolute; top: 1000px; left: 1800px; } #green5{ width: 7em; height: 6em; background-color:green; margin-left: 10%; position:absolute; top: 1350px; left: 1800px; } #green6{ width: 7em; height: 2em; background-color:green; margin-left: 10%; position:absolute; top: 1700px; left: 1800px; } #purple1{ width: 6em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 0px; left: 1400px; } #purple2{ width: 6em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 800px; left: 1200px; } #purple3{ width: 7em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 1050px; left: 1200px; } #purple4{ width: 6em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 800px; left: 1400px; } #purple5{ width: 6em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 1050px; left: 1400px; } #purple6{ width: 7em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 775px; left: 900px; } #purple7{ width: 7em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 800px; left: 600px; } #purple8{ width: 7em; height: 6em; background-color:purple; margin-left: 10%; position:absolute; top: 1100px; left: 600px; } figure { width:200px; border:5px ridge grey; position:relative; } img { width:100%; vertical-align:top; } figcaption { opacity:0; background-color: AntiqueWhite; text-align:center; position:absolute; bottom:0; left:0; right:0; border: black; } figure:hover figcaption { transition:all 1s; opacity:1; }

//helper 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) { // 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 deltaX = (endX - startX) * 0.15; var deltaY = (endY - startY) * 0.15; // for further calculations which ever is the shortest distance 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; 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*signum(deltaX)) + " " + (startY + 2*delta) + " H" + (endX - delta*signum(deltaX)) + " A" + delta + " " + delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) + " V" + endY ); } 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"), $("#orange6"), $("#orange2")); connectElements($("#svg1"), $("#path2"), $("#orange4"), $("#teal4")); connectElements($("#svg1"), $("#path3"), $("#teal6"), $("#orange3") ); connectElements($("#svg1"), $("#path4"), $("#orange2"), $("#teal3") ); connectElements($("#svg1"), $("#path5"), $("#orange5"), $("#teal9") ); connectElements($("#svg1"), $("#path6"), $("#orange2"), $("#red1") ); connectElements($("#svg1"), $("#path7"), $("#purple2"), $("#red2") ); connectElements($("#svg1"), $("#path8"), $("#purple3"), $("#red2") ); connectElements($("#svg1"), $("#path9"), $("#purple4"), $("#red2") ); connectElements($("#svg1"), $("#path10"), $("#purple5"), $("#red2") ); connectElements($("#svg1"), $("#path11"), $("#purple6"), $("#red3") ); connectElements($("#svg1"), $("#path12"), $("#purple7"), $("#red1") ); connectElements($("#svg1"), $("#path13"), $("#purple8"), $("#red1") ); } $(document).ready(function() { // reset svg each time $("#svg1").attr("height", "0"); $("#svg1").attr("width", "0"); connectAll(); }); $(window).resize(function () { // reset svg each time $("#svg1").attr("height", "0"); $("#svg1").attr("width", "0"); connectAll(); });

"Untitled"
Bootstrap 4.1.1 Snippet by alun28827

Related: See More

Questions / Comments:

"Untitled" Bootstrap 4.1.1 Snippet by alun28827

Related: See More

Questions / Comments:

"Untitled"
Bootstrap 4.1.1 Snippet by alun28827