<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Three Stacked Circles</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <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')" />
</body>

</html>
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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.