SVG Curve Tests

HTML

<svg height="400" width="550">
    <!--path d="M 400,100 C 425,100 425,150 450,150" style="stroke-width: 100px;"></path-->
</svg>

CSS

body {
    background-color: #ddd;
}

svg {
    background-color: #fff;
}

path {
    fill: none;
    stroke: #719cc1;
    stroke-width: 3px;
}

.test {
    stroke: #800000;
    opacity: 0.7;
}

JavaScript

var svg = $('svg');
var height = svg.height(),
    width = svg.width(),
    path = "",
    maxSteps = 8,
    x = 10, y = 100;

    path = "M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z";
    var i =maxSteps;
    svg.append('<path d="' + path 
        + '" style="stroke-width: '
        + (i * 10 + 1) + 'px">' 
        + '<title>' + (i * 10 / 50)+ '</title>'
        + '</path>');
}

svg.append('<path d="M465,100 C490,100 490,150 515,150" style="stroke-width: 5px; stroke: #800000;"></path>');

svg.append('<path class="show-shape" d="M465,200 C490,200 490,250 515,250 v71 C490,301 490,271 465,271 Z" style="stroke-width: 1px; stroke: #800000;"></path>');

// Brutally refresh SVG to render
$("svg").html($("svg").html());