<div class="halftone"></div>
<div class="halftone"></div>
<div class="halftone"></div>
<div class="halftone"></div>
<div class="halftone"></div>
<div class="halftone"></div>
<div class="halftone"></div>
<div class="halftone"></div>

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 1rem;
	min-height: 100vh;
	display: grid;
	grid-template-columns: repeat(auto-fit, min(400px, 100%));
	gap: 1rem;
	align-items: center;
	justify-content: center;
	background: linear-gradient(45deg, red, blue);
	background-attachment: fixed;
}

.halftone {
	--mask: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));
	--stop1: 0.06rem;
	--stop2: 0.65rem;
	--invert: 0;
	--dotColor: black;
	--bgColor: white;
	--dottedBackground: radial-gradient(circle at center, var(--dotColor) var(--stop1), transparent var(--stop2));
	
	aspect-ratio: 1;
	position: relative;
	background: var(--bgColor);
	filter: contrast(50) invert(var(--invert, 0));
	mix-blend-mode: multiply;
	isolation: isolate;
	border: 4px solid var(--borderColor, var(--dotColor));
}

.halftone::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--dottedBackground);
	background-size: var(--bgSize, 1rem) var(--bgSize, 1rem);
	background-repeat: round;
	background-position: 0 0, var(--bgPosition) var(--bgPosition);
	mask-image: var(--mask);
}

.halftone:nth-child(even) {
	--bgSize: 1.4rem;
	--bgPosition: calc(var(--bgSize) / 2);
	--dottedBackground: radial-gradient(circle at center, var(--dotColor) var(--stop1), transparent var(--stop2)), radial-gradient(circle at center, var(--dotColor) var(--stop1), transparent var(--stop2));
}

.halftone:nth-child(3),
.halftone:nth-child(4) {
	--borderColor: white;
	--invert: 1;
}

.halftone:nth-child(5),
.halftone:nth-child(6) {
	--invert: 1;
	mix-blend-mode: screen;
}

.halftone:nth-child(7),
.halftone:nth-child(8) {
	--borderColor: white;
	mix-blend-mode: screen;
}