<!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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.