<div>
  <svg version="1.1" width="300px" height="300px" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle1" cx="0.5" cy="0.1" r="0.1" />
    <circle id="circle2" cx="0.5" cy="0.3" r="0.1" />
    <circle id="circle3" cx="0.5" cy="0.7" r="0.3" />
  </svg>
</div>
<br>
<input id="beta" type="range" min="0" max="100" value="50" />
<br>
<input id="s" type="range" min="0" max="50" value="20" />

let inputBeta = document.getElementById("beta");
let inputS = document.getElementById("s");

let circle1 = document.getElementById("circle1");
let circle2 = document.getElementById("circle2");
let circle3 = document.getElementById("circle3");

function crisp(value) {
  return value < 1.0e-5 ? 0.0 : value;
}

function updateCircles(event) {
  let beta = crisp(inputBeta.value / 100.0);
  let s = crisp(inputS.value / 100.0);

  let r1 = crisp((1.0 - beta) * s);
  let r2 = crisp(beta * s);
  let r3 = crisp(0.5 - r1 - r2);

  circle1.setAttribute("cy", r1);
  circle2.setAttribute("cy", r1 + r1 + r2);
  circle3.setAttribute("cy", r1 + r1 + r2 + r2 + r3);
  circle1.setAttribute("r", r1);
  circle2.setAttribute("r", r2);
  circle3.setAttribute("r", r3);
}

inputBeta.addEventListener("input", updateCircles);
inputS.addEventListener("input", updateCircles);