How can I make 3 circles with a different radius "stick" together? (with example image)

css, geometry, math, trigonometry

Solution

Build triangle with sides radius0, radius1 and radius2 and calculate the third vertex coordinate (smallest circle center). I've used formula (23) from here in my calculation. There is Delphi code, but I hope the principle is clear.

var
  r0, r1, r2: Integer;
  x0, x1, x2, y0, y1, y2: Integer;
  a, b, c, ca: Double;
begin
  //some intialization
  Canvas.FillRect(ClientRect);
  Randomize;
  r0 := 200;
  r1 := Round(r0 * (0.25 + 0.75 * Random));
  r2 := Round(r1 * (0.25 + 0.75 * Random));

  //circle centers' coordinates
  //biggest
  x0 := r0;
  y0 := r0;

  //second
  x1 := x0 + r0 + r1;
  y1 := y0;

  //triangle sides
  c := r0 + r1;
  b := r0 + r2;
  a := r1 + r2;

  //x-shift
  ca := (c * c + b * b - a * a) / (2.0 * c);
  x2 := x0 + Round(ca);

  //y-shift is the height of triangle
  //Pythagor's rule
  y2 := y0 + Round(Sqrt(b * b - ca * ca));

  //draw calculated circles
  Canvas.Ellipse(x0 - r0, y0 - r0, x0 + r0 + 1, y0 + r0 + 1);
  Canvas.Ellipse(x1 - r1, y1 - r1, x1 + r1 + 1, y1 + r1 + 1);
  Canvas.Ellipse(x2 - r2, y2 - r2, x2 + r2 + 1, y2 + r2 + 1);

example output:

Problem

I have a graph that is represented by three different sized circles, based on the presence of a given element in the result set. The first circle is always set to 100%, being this is the largest the circle can be, the other two are relative % to the largest one. The problem is that I am trying to use css to render them and I do not know the math necessary to figure out how to make them all "stick" together along their sides. The known pieces will be the radius of each circle, and the largest one is always returned first. Here is an example of what I’m trying to accomplish: How can I accomplish this mathematically such that i can supply each circle with a margin-top and margin-left that will position them in this way? I can position the largest circle at 0,0, and the second largest at half the difference between the 2 diameters, making the center points line up. The real challenge is the third smallest circle, in knowing where to position it based on the other two circles' positions.

Original source