- let n = 8;
- let k = Math.round((n - 1)*Math.random());

body(style=`--k: ${k}`)
	- for(let i = 0; i < n; i++)
		- let id = `r${i}`;
		input(type='radio' name='r' id=id checked=i===k)
		label(for=id style=`--i: ${i}`) Option ##{i}

$c: #6daa7e, #335f7c, #6a6d6b;

body {
	display: grid;
	grid-gap: .25em 0;
	grid-template-columns: repeat(2, max-content);
	align-items: center;
	font: 1.25em/ 1.5 ubuntu, trebuchet ms, sans-serif
}

label {
	--sgn: clamp(-1, var(--i) - var(--k), 1);
	padding: 0 .25em;
	background: 
		linear-gradient(90deg, 
				nth($c, 1) 33.333%, 
				nth($c, 2) 0 66.667%, 
				nth($c, 3) 0) /**/
			calc(50%*(1 + var(--sgn)))/ 300%/**/;
	color: #fff;
	cursor: pointer
}

addEventListener('change', e => {
	let _t = e.target;
	
	document.body.style.setProperty('--k', +_t.id.replace('r', ''))
})