@property --a {
syntax: '<angle>';
initial-value: 0deg;
inherits: false
}
html {
--pattern: radial-gradient(closest-side, #777, #fff) 0/ 1em 1em space;
--map:
linear-gradient(var(--a), #888, #fff);
height: 100%;
background: var(--pattern), var(--map);
background-blend-mode: multiply;
filter: contrast(24);
animation: a 4s linear infinite
}
html:not(:hover) { animation-play-state: paused }
@keyframes a { to { --a: 1turn } }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.