Home/ Questions/Q 8781663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T20:21:48+00:00

I’m trying to create a pie wedge. And I’m bad at it. It’s been

  • 0

I’m trying to create a “pie wedge”. And I’m bad at it. It’s been a LONG time since I took trig. I have looked at lots of examples, and have this code generator worked out in JS:

var startPointX = 200;
var startPointY = 200;
var startAngle = 180;
var endAngle = 210;
var x1 = startPointX + 180*Math.cos(Math.PI*startAngle/180); 
var y1 = startPointY + 180*Math.sin(Math.PI*startAngle/180); 

var x2 = startPointX + 180*Math.cos(Math.PI*endAngle/180);
var y2 = startPointY + 180*Math.sin(Math.PI*endAngle/180);
console.log("M200,200 L" + x1 + "," + y1 + " A180,180 0 0,1 " + x2 + "," + y2 + " z");

It works great! 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="red" stroke="none" stroke-width="0" />
</svg>

But, what I need to do is change the radius of the “wedge” that’s generated. I can’t seem to figure out which parameters correspond, or how I would go about modifying my equations to compensate. Replacing all the “180”s gives me some freaky results.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The first two values in the arc (after the A) are the starting coordinates of the arc, so should equal x1, y1. Try:

    var startPointX = 200;
var startPointY = 200;
var startAngle = 180;
var endAngle = 210;
var radius = 100;

var x1 = startPointX + radius * Math.cos(Math.PI * startAngle/180); 
var y1 = startPointY + radius * Math.sin(Math.PI * startAngle/180);     
var x2 = startPointX + radius * Math.cos(Math.PI * endAngle/180);
var y2 = startPointY + radius * Math.sin(Math.PI * endAngle/180);

console.log("M200,200 L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0,1 " + x2 + "," + y2 + " z");
    • 0