<div role="img" aria-label="mouse"></div>
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vmin;
height: 80vmin;
background-color: white;
background-image:
radial-gradient(black 50%, transparent 0),
radial-gradient(black 50%, transparent 0),
radial-gradient(black 50%, transparent 0),
radial-gradient(closest-side, white 99%, transparent 0),
conic-gradient(transparent 65deg, black 0 72deg, transparent 0 80deg, black 0 86deg, transparent 0 274deg, black 0 280deg, transparent 0 288deg, black 0 295deg, transparent 0),
linear-gradient(white, white),
radial-gradient(circle farthest-side at 50% 50%, white calc(99.9% - 1vmin), black 0 99.9%, transparent 0),
radial-gradient(circle farthest-side at 50% 50%, white calc(99.9% - 1vmin), black 0 99.9%, transparent 0),
radial-gradient(at 50% 40%, white 50%, black 0 calc(50% + 1vmin), transparent 0),
radial-gradient(ellipse 50% 100% at 50% 100%, white 50%, black 0 calc(50% + 1vmin), transparent 0),
radial-gradient(farthest-side at 100% 0%, transparent calc(50% - 1.5vmin), black 0 50%, transparent 0),
radial-gradient(farthest-side at 0% 100%, white calc(50% - 1.5vmin), transparent 0),
radial-gradient(farthest-side at 0% 100%, transparent calc(50% - 1.5vmin), black 0 50%, transparent 0)
;
background-size:
6% 6%,
2.5% 2.5%,
2.5% 2.5%,
8% 8%,
20% 20%,
12% 10%,
15% 15%,
15% 15%,
40% 55%,
37% 30%,
30% 30%,
40% 40%,
40% 40%
;
background-position:
50% 4%,
48% 12%,
52% 12%,
50% 10%,
50% 3%,
50% 15%,
40% 18%,
60% 18%,
50% 40%,
50% -10%,
calc(50% - 0.5vmin) 90%,
calc(110% - 0.75vmin) calc(95% - 0.75vmin),
calc(110% - 1.5vmin) calc(95% - 0.75vmin)
;
background-repeat: no-repeat;
filter: blur(0.25vmin) contrast(20)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.