Heroku Status Curves

by rlivsey

HTML

<p class="left"><span class="anchor" id="left_dot">Left</span></p>
<p class="right"><span class="anchor" id="right_dot">Right</span></p>
<div class="overlap">
    <canvas id="canvas" height="500" width="500" class="bezier"></canvas>
</div>

CSS

body {
    background: #000;
}
.overlap {
    position: absolute;
    top: 0;
    left: 0;
}
canvas.canvas {
    position: absolute;
    background: transparent;
    z-index: 10;
    top: 0;
    left: 0;
}
p {
    color: gray;
}
.left {
    margin-left: 50px;
}
.right {
    margin-right: 50px;
    margin-top: 250px;    
    text-align: right;
}

JavaScript

function connect(left_x, left_y, right_x, right_y) {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#454545";
    ctx.beginPath();
    var sharpness = (right_x - left_x) / 2;
    ctx.moveTo(left_x, left_y);
    ctx.bezierCurveTo(left_x + sharpness, left_y, right_x - sharpness, right_y, right_x, right_y);
    ctx.stroke();
};

connect(100, 100, 50, 100);
connect(100, 120, 50, 140);
connect(100, 140, 50, 180);
connect(100, 160, 50, 220);
connect(100, 180, 50, 260);

function connect_the_dots(left, right) {
    var left_x = left.offset().left + left.outerWidth();
    var left_y = left.offset().top + (left.height()/2);
    var right_x = right.offset().left;
    var right_y = right.offset().top + (left.height()/2);
    connect(left_x, left_y, right_x, right_y);
};

connect_the_dots($(".left .anchor"),$(".right .anchor"));