SVG(arc) sample

by bgmort

HTML

<svg id="band" width=240 height=240>
    <path fill="#b8d83a">
    </path>
</svg>

<p>
    Enter degrees here:
    <input type="number" id="degrees" value="120" />
</p>

CSS

body, html { background: #eee }

JavaScript

function arc(fraction, outerDiameter, width) {
    if (isNaN(fraction)) return '';
    
    //fraction = Math.min(fraction, 1);
    
    var center = outerRadius = outerDiameter / 2;
    var innerRadius = outerRadius - width;

    var outerX1 = center, outerY1 = 0;
    var innerX1 = center, innerY1 = width;

    /* if (fraction == 1) {
        //special case, we need two halves because the arcs don't like to overlap
        var path = 
            "M" + outerRadius + ", 0 " + 
            " A" + outerRadius + ", " + outerRadius + ", 0, 0, 1, " + outerRadius + ", " + outerDiameter + 
            " L " + outerRadius + ", " + (outerDiameter - width) +
            " A" + innerRadius + ", " + innerRadius + ", 0, 0, 0, " + outerRadius + ", " + width +
            " M" + outerRadius + ", 0 " + 
            " A" + outerRadius + ", " + outerRadius + ", 0, 0, 0, " + outerRadius + ", " + outerDiameter + 
            " L " + outerRadius + ", " + (outerDiameter - width) +
            " A" + innerRadius + ", " + innerRadius + ", 0, 0, 1, " + outerRadius + ", " + width + " Z"
        return path;
    } */

    var degrees = fraction * 360;
    //convert angle from compass to cartesian
    var rads = (90 - degrees) / 180 * Math.PI;
    //x is sin because we are
    var x2 = Math.cos(rads), y2 = Math.sin(rads);
    
    var outerX2 = center + x2 * outerRadius,
        outerY2 = center - y2 * outerRadius;
    var innerX2 = center + x2 * innerRadius,
        innerY2 = center - y2 * innerRadius;
    
    var largeFlag = fraction > .5 ? 1 : 0;

    var path =     
        "M" + outerX1 + ", " + outerY1 +
        " A" + outerRadius + ", " + outerRadius + ", 0, " + largeFlag + ", 1, " + outerX2 + ", " + outerY2 +
        " L " + innerX2  + ", " + innerY2 +
        " A" + innerRadius + ", " + innerRadius + ", 0, " + largeFlag + ", 0, " + innerX1 + ", " + innerY1 + 
        " Z";
    
    return path
}

var p = document.querySelector('#band path');

p.setAttribute('d', arc(1/3, 240,...