- let min = 2, max = 5, val = min;

body(style=`--n: ${val}`)
	section#halftone
	form
		label(for='n') repetitions
		input#n(type='range' min=min value=val max=max)
View Compiled
@property --x {
	syntax: '<length-percentage>';
	initial-value: 50vw;
	inherits: false
}

@property --y {
	syntax: '<length-percentage>';
	initial-value: 50vh;
	inherits: false
}

@property --a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

section {
	--pattern: radial-gradient(closest-side, #777, #fff) 0/ 1em 1em space;
	--p: calc(100%/var(--n));
	--map: 
		repeating-conic-gradient(from var(--a) 
				at var(--x) var(--y), 
				#fff, #888, #fff var(--p));
	background: var(--pattern), var(--map);
	background-blend-mode: multiply;
	filter: contrast(16);	
	transition: .35s cubic-bezier(.1,0,.5,1.5);
	transition-property: --x, --y;
	animation: a 8s linear infinite
}

section:not(:hover) { animation-play-state: paused }

@keyframes a { to { --a: 1turn } }

/* prettifying controls & stuff */
$track-h: 6px;
$track-r: .5*$track-h;

$thumb-d: 1em;
$thumb-r: .5*$thumb-d;

@mixin track() {
	height: $track-h;
	border-radius: $track-r;
	background: dimgrey;
}

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

* { margin: 0; color: inherit; font: inherit }

html, body, form { display: grid }

html { height: 100% }

body { overflow: hidden }

section, form { grid-area: 1/ 1 }

form {
	box-sizing: border-box;
	place-self: end center;
	z-index: 1;
	margin: .5em;
	width: Min(15em, 100%);
	padding: .5em;
	background: #370617;
	color: #ededed;
	font: clamp(.75em, 4vw, 1.25em) sans-serif
}

label {
	justify-self: center;
	
	&::after { content: ':' }
}

[type='range'] {
	&, &::-webkit-slider-thumb { appearance: none }
	
	--hov: 0;
	width: 100%; height: $thumb-d;
	background: #0000;
	color: #f7b538;
	filter: Saturate(var(--hov));
	transition: filter .35s ease-out;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	&::slider-track { @include track }
	
	&::-webkit-slider-thumb { @include thumb(1) }
	&::-moz-range-thumb { @include thumb }
	&::slider-thumb { @include thumb }
	
	&:focus { outline: none }
	
	&:is(:hover, :focus) { --hov: 1 }
}
View Compiled
const _h = document.getElementById('halftone')

addEventListener('input', e => {
	let _t = e.target;
		
	document.body.style.setProperty(`--${_t.id}`, +_t.value)
})

_h.addEventListener('mousemove', e => {
	_h.style = `--x: ${e.clientX}px; --y: ${e.clientY}px`
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.