@property --x {
syntax: '<length-percentage>';
initial-value: 50vw;
inherits: false
}
@property --y {
syntax: '<length-percentage>';
initial-value: 50vh;
inherits: false
}
html {
--pattern: radial-gradient(closest-side, #777, #fff) 0/ 1em 1em space;
--map:
radial-gradient(circle farthest-corner at var(--x) var(--y), #888, #fff);
height: 100%;
background: var(--pattern), var(--map);
background-blend-mode: multiply;
filter: contrast(16);
transition: .35s cubic-bezier(.1,0,.5,1.5);
transition-property: --x, --y
}
addEventListener('mousemove', e => {
document.documentElement.style = `--x: ${e.clientX}px; --y: ${e.clientY}px; `
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.