JSFiddle - React, Tailwind, and code Playground

by Jammerwoch

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg" width="500" height="500" style="border: solid 1px #900;"></svg>

JavaScript

var s = Snap("#svg");

var cx = 250, cy = 250, r = 120, R = 200;

/*    
var path = [
    "M ${cx + r*dcos(30)} ${cy - r*dsin(30)}",
    "L ${cx + R*dcos(30)} ${cy -R*dsin(30)}",
    "A ${r} ${r} 0 0 0 ${cx + R*dcos(60)} ${cy -R*dsin(60)}",
    "L ${cx + r*dcos(60)} ${cy - r*dsin(60)}",
    "A ${r} ${r} 0 0 1 ${cx + r*dcos(30)} ${cy -r*dsin(30)}",
];
    
function dsin(x) { return Math.sin(x / 180 * Math.PI); }
function dcos(x) { return Math.cos(x / 180 * Math.PI); }
    
path = path.map(function(p) {
    return p.replace(/\${(.*?)}/g, function(m, g1) { return eval(g1); });
});
s.path(path.join(' ')).attr({
    stroke: '#000',
    strokeWidth: 1,
});
*/

function slice(cx, cy, r, R, theta0, theta1) {
    theta0 = theta0 / 180 * Math.PI;
    theta1 = theta1 / 180 * Math.PI;
    var cosTheta0 = Math.cos(theta0);
    var sinTheta0 = Math.sin(theta0);
    var cosTheta1 = Math.cos(theta1);
    var sinTheta1 = Math.sin(theta1);
    return "M " + (cx + r*cosTheta0) + " " + (cy - r*sinTheta0) +
        " L " + (cx + R*cosTheta0) + " " + (cy - R*sinTheta0) +
        " A " + R + " " + R + " 0 0 0 " + (cx + R*cosTheta1) + " " + (cy - R*sinTheta1) +
        " L " + (cx + r*cosTheta1) + " " + (cy - r*sinTheta1) +
        " A " + r + " " + r + " 0 0 1 " + (cx + r*cosTheta0) + " " + (cy - r*sinTheta0);
}
    
path = slice(cx, cy, r, R, 325, 45);
console.log(path);
 
s.circle(cx, cy, r).attr({
    stroke: '#000',
    strokeWidth: 1,
    fill: 'none',
});
s.circle(cx, cy, R).attr({
    stroke: '#000',
    strokeWidth: 1,
    fill: 'none',
});

s.path(path).attr({
    stroke: '#000',
    strokeWidth: 1,
    opacity: 0.4,
});