<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)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.