title: Trilateration algorithm to position 3 circles as close as possible without overlapping
body: <p>I have two circles that are positioned perfectly on the boarder of each other. They have position A and B (both vectors), and radii Ra and Rb.</p>
  
  <p>Now I add a third circle with radii Rc. How can I find the position vector C where the three circles are placed as close as possible without overlapping?</p>
  
  <p>I'm writing this for an illustration for a website I'm building, so bonus points for efficiency :)</p>
  
  <p>Edit:
  I didn't have enough rep to post an illustration when I originally posted.
  Two of the circles (B and C) will be overlapping, but tangental to A. I want to move C out of the overlapping zone it shares with B, into the dotted line.</p>
  
  <p><img src="https://i.stack.imgur.com/eFE71.png" alt="Circles"></p>
  
  <p>Edit 2:
  I'm sorry it's been so unclear, I've created a diagram that tried to explain what I'm trying to do.</p>
  
  <p>I'm creating an illustration in Pixi.js, a simple canvas/webGL library. I'm using Vectors (through Victor.js) to position the circles and move them around.</p>
  
  <p>I randomly generate a bunch of circles, and then I position the biggest circle (A) in the middle of the container. After that I want to cluster all the circles around A, solving collisions as they happen. This is important as I'm going to be scaling individual circles when the user taps or hovers them.</p>
  
  <p>For the simple case where nothing collided the vector solution was super simple, and I want solve the case where two circles collide in the same way if possible.</p>
  
  <p><img src="https://i.stack.imgur.com/NYje0.png" alt="Problem diagram"></p>