<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 type="range" min="0" max="100" value="50" oninput="moveSlider(this, 'beta')" />
<br>
<input type="range" min="0" max="50" value="20" oninput="moveSlider(this, 's')" />

let s = 0.2;
let beta = 0.5;

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

function moveSlider(slider, slname) {
  if (slname === "s") {
    s = crisp(slider.value / 100.0);
  } else if (slname === "beta") {
    beta = crisp(slider.value / 100.0);
  }
  let r1 = crisp((1.0 - beta) * s);
  let r2 = crisp(beta * s);
  let r3 = crisp(0.5 - r1 - r2);
  let circle1 = document.getElementById("circle1");
  let circle2 = document.getElementById("circle2");
  let circle3 = document.getElementById("circle3");
  circle1.setAttributeNS(null, "cy", r1);
  circle2.setAttributeNS(null, "cy", r1 + r1 + r2);
  circle3.setAttributeNS(null, "cy", r1 + r1 + r2 + r2 + r3);
  circle1.setAttributeNS(null, "r", r1);
  circle2.setAttributeNS(null, "r", r2);
  circle3.setAttributeNS(null, "r", r3);
}