- let min = 2, max = 8, val = 2*min;

body(style=`--n: ${val}; --f: 50`)
	section
		h2 pattern
		div.pattern
	section
		h2 blended
		div.blended
	section
		h2 filtered
		div.filtered
	form
		h2 Controls
		label(for='n') repetitions
		input#n(type='range' min=min value=val max=max)
		label(for='f') rotation
		input#f(type='range')
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Playwrite+IS&display=swap');

body {
	--p: calc(100%/var(--n));
	--a: calc(var(--f)/100*360deg/var(--n));
	--pattern: 
	repeating-conic-gradient(from var(--a), 
			#fff, #777, #fff var(--p)) 0/ 3em 3em round;;
	--map: linear-gradient(90deg, #888, #fff);
	grid-gap: .5em;
	background: #5e0b15;
	color: #ededed;
	font: clamp(.75em, 4vw, 1.25em) sans-serif
}

section h2, div { grid-area: 1/ 1 }

h2 {
	z-index: 1;
	margin: 0;
	padding: 0 .5em .375em;
	background: #5e0b15ba;
	font: 1.25em/ 1.25 playwrite is, cursive;
	text-align: center;
	text-shadow: 2px 2px 5px #0009;
	
	section & {
		place-self: start;		
		border-radius: 0 0 .25em }
}

div {
	min-height: 8em;
	background: var(--pattern), var(--map);
	background-blend-mode: multiply;
	
	&.pattern { --map: #fff }	
	&.filtered {
		margin: -2px;
		clip-path: inset(2px);
		filter: contrast(16) blur(2px) contrast(5)
	}
}

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

$thumb-d: 1.5em;
$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
}

html, body, section, form { display: grid }

html { min-height: 100% }

form {
	--hov: 0;
	position: fixed;
	top: 0; right: 0;
	padding: .5em;
	width: Min(20em, 66.6%);
	translate: 0 calc((1 - var(--hov))*-100%);
	background: #370617;
	transition: translate .3s ease-out;
	
	h2 {
		position: absolute;
		inset: 100% 0 auto;
		padding-block: .25em;
		box-shadow: inset 0 0 0 10em #0006;
		background: inherit
	}
	
	&:hover, &:has(:focus) { --hov: 1 }
}

label {
	justify-self: center;
	margin-top: .5em;
	
	&::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
addEventListener('input', e => {
	let _t = e.target, v = +_t.value;
		
	document.body.style.setProperty(`--${_t.id}`, v)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.