How to fill space between 3 points in circle?

I have to points on the border of a circle and on point in the middle of the circle. I want to color the space (pie) between these three points red (including the “arc”). It dosen’t have to be in svg.

const AzimuthChart = (props) => {
  const x1 = 428.9397
  const y1 = 159.2263 
  const x2 = 371.3345
  const y2 = 159.0330 

  return (
    <div className="App">
      <svg preserveAspectRatio="xMidYMin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
        <g fill="#61DAFB">
          <circle cx="400" cy="200" r="50"/>
          <circle cx="400" cy="200" r="1" fill='red'/>
          <circle cx={x2} cy={y2} r='1' fill='red'/>
          <circle cx={x1} cy={y1} r='1' fill='red'/>
        </g>
      </svg>
      
    </div>
  )
}

export default AzimuthChart

This is what it looks like right now:

This is what I want it to look like:

I have tried adding an arc:

<path d='M 449.89 203.252 A 1 1 0 0 0 350 202.8' fill='red'/>

But this only created half a circle. Does someone have an idea on how to solve thes

Answer

You just plug the points into the elliptical arc command. Noting that as you need the “big” arc rather than the “small” arc that you need to set the large-arc-flag to 1.

const x1 = 428.9397
const y1 = 159.2263 
const x2 = 371.3345
const y2 = 159.0330

let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute("d", `M ${x2} ${y2} A 50 50 0 1 0 ${x1} ${y1} L 400 200 Z`)
path.setAttribute("fill", "red");

document.getElementsByTagName('svg')[0].appendChild(path);

<svg viewBox="0 0 800 400">
  <circle cx="400" cy="200" r="50" fill="#61DAFB"/>
</svg>