Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
svgarcandpieslice.js
"use strict"
function drawArc(settings)
{
let d = "";
const firstCircumferenceX = settings.centreX + settings.radius * Math.cos(settings.startAngleRadians);
const firstCircumferenceY = settings.centreY + settings.radius * Math.sin(settings.startAngleRadians);
const secondCircumferenceX = settings.centreX + settings.radius * Math.cos(settings.startAngleRadians + settings.sweepAngleRadians);
const secondCircumferenceY = settings.centreY + settings.radius * Math.sin(settings.startAngleRadians + settings.sweepAngleRadians);
// move to first point
d += "M" + firstCircumferenceX + "," + firstCircumferenceY + " ";
// arc
// Radius X, Radius Y, X Axis Rotation, Large Arc Flag, Sweep Flag, End X, End Y
d += "A" + settings.radius + "," + settings.radius + " 0 0,1 " + secondCircumferenceX + "," + secondCircumferenceY;
const arc = document.createElementNS("http://www.w3.org/2000/svg", "path");
arc.setAttributeNS(null, "d", d);
arc.setAttributeNS(null, "fill", settings.fillColor);
arc.setAttributeNS(null, "fill-opacity", settings.fillOpacity);
arc.setAttributeNS(null, "style", "stroke:" + settings.strokeColour + ";");
document.getElementById(settings.id).appendChild(arc);
}
function drawPieSlice(settings)
{
let d = "";
const firstCircumferenceX = settings.centreX + settings.radius * Math.cos(settings.startAngleRadians);
const firstCircumferenceY = settings.centreY + settings.radius * Math.sin(settings.startAngleRadians);
const secondCircumferenceX = settings.centreX + settings.radius * Math.cos(settings.startAngleRadians + settings.sweepAngleRadians);
const secondCircumferenceY = settings.centreY + settings.radius * Math.sin(settings.startAngleRadians + settings.sweepAngleRadians);
// move to centre
d += "M" + settings.centreX + "," + settings.centreY + " ";
// line to first edge
d += "L" + firstCircumferenceX + "," + firstCircumferenceY + " ";
// arc
// Radius X, Radius Y, X Axis Rotation, Large Arc Flag, Sweep Flag, End X, End Y
d += "A" + settings.radius + "," + settings.radius + " 0 0,1 " + secondCircumferenceX + "," + secondCircumferenceY + " ";
// close path
d += "Z";
const arc = document.createElementNS("http://www.w3.org/2000/svg", "path");
arc.setAttributeNS(null, "d", d);
arc.setAttributeNS(null, "fill", settings.fillColour);
arc.setAttributeNS(null, "style", "stroke:" + settings.strokeColour + ";");
document.getElementById(settings.id).appendChild(arc);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment