<style visible>@property --val {
	syntax: '<number>';
	inherits: true;
	initial-value: 5
}

body::after {
	--rad: max(0px, var(--val)/100*(hypot(50vw, 50vh) + 1px));
	background:
		radial-gradient(var(--rad), #000 calc(100% - 1px), #fff);
	transition: --val 1s var(--springy)
}</style>

<input id='prog' type='range' value='5'/>

<script visible>prog.oninput = () =>
  document.body.style.setProperty('--val', +prog.value)</script>

<footer>Relevant code above. How & why explained in Pen <a href='https://codepen.io/thebabydino/details/mdgjMBv' target='_blank'>description</a>. Another <a href='https://twitter.com/ChallengesCss/status/1779437413057597538' target='_blank'>take</a>.</footer>

$track-h: 6px;
$track-r: .5*$track-h;

$thumb-d: 1.5em;
$thumb-r: .5*$thumb-d;
$thumb-f: .5;

@mixin track {
	height: $track-h;
	border-radius: $track-r;
	background: 
		linear-gradient(90deg, 
			var(--hlc) var(--pos), #212121 0)
}

@mixin thumb($o: 0) {
	@if($o > 0) {
		margin: calc(#{$track-r} + -1*#{$thumb-r}) 0
	}
	
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	scale: calc(1 - (1 - var(--hov))*#{$thumb-f});
	background: var(--hlc);
	cursor: ew-resize
}

@property --hov {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

html, body { display: grid }

html {
	min-height: 100%;
	background: #000;
}

body {
	--hlc: lightgreen;
	--springy: linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);
	grid-gap: 2vmin;
	place-items: center;
	margin: 0;
	padding: 1vmin;
	font-size: clamp(.625em, 2.5vmin, 1.5em);
	
	&::after {
		position: fixed;
		inset: 0;
		mix-blend-mode: difference;
		pointer-events: none;
		content: ''
	}
}

[visible] {
	display: grid;
	grid-template-columns: max-content 1fr;
	margin: 0;
	border: solid 2px #212121;
	padding: .375em;
	background: #121212;
	color: #ededed;
	font: 1em/ 1.25 ubuntu mono, 
		consolas, monaco, monospace;
	tab-size: 2;
	white-space: pre-wrap;
	
	&::before {
		margin: -.5em;
		margin-right: .5em;
		padding: .375em 0;
		background: #212121;
		text-orientation: upright;
		writing-mode: vertical-rl;
	}
}

style[visible]::before { content: 'CSS' }
script[visible]::before { content: 'JS' }

input, a { --hov: 0 }
:is(input, a):is(:hover, :focus) { --hov: 1 }

[type='range'] {
	&, &::-webkit-slider-thumb { appearance: none }
	
	--pos: calc(#{$thumb-r} + var(--val)/100*(100% - #{$thumb-d}));
	width: min(100%, 20em);
	height: $thumb-d;
	background: none;
	font-size: inherit;
	mask: 
		radial-gradient(
				calc((1 - (1 - var(--hov))*#{$thumb-f})*#{$thumb-r}) 
				at var(--pos), 
				red calc(100% - 1px), #0000), 
		radial-gradient($thumb-r at var(--pos), 
				#0000 calc(100% - 1px), red);
	transition: --hov .35s;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	
	&::-webkit-slider-thumb { @include thumb(1) }
	&::-moz-range-thumb { @include thumb }
	
	&:focus { outline: none }
}

footer {
	color: #ededed;
	font: Max(.625rem, .875em)/ 1.5 
		shantell sans, purisa, comic sans ms, cursive
}

a {
	display: inline-block;
	position: relative;
	padding: 0 2px;
	color: var(--hlc);	
	text-decoration: none;
	isolation: isolate;
	
	&::after {
		position: absolute;
		inset: 0;
		background: currentcolor;
		clip-path: 
			inset(calc((1 - var(--hov))*(100% - 2px)) 0 0);
		mix-blend-mode: difference;
		transition: clip-path .35s ease-out;
		pointer-events: none;
		content: ''
	}
}