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

section {
	aspect-ratio: 1;
	--pattern: 
		linear-gradient(var(--a, 0deg), 
				#fff, #777 var(--s, )) 0 / 1em 1em;
	--map: 
		linear-gradient(90deg, #888, #fff);
	background: var(--pattern), var(--map);
	background-blend-mode: multiply;
	filter: contrast(24) blur(1px) contrast(2);
	animation: a 9s linear -3s infinite
}

section:nth-child(2) { --s: , #fff }

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

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

/* prettifying & layout */
html, body { display: grid }

html { min-height: 100% }

body {
	grid-gap: .5em;
	grid-template-columns: 
		repeat(auto-fit, 
			Max(15em, Min(100%, 32em, 100vmin - 1em)));
	place-content: center;
	background: dimgrey;
	filter: drop-shadow(2px 2px 5px)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.