html {
--u: 2vmax;
--c1: #f13c3c;
--c2: #c72f2f;
--c3: #607d8b;
--c4: #43687a;
--bg: #460000;
--circle1: var(--c3) 0% 15%, var(--c4) 16% 20%, var(--c3) 21% 21%, #fff0 22% 100%;
--circle2: var(--c1) 0% 11%, var(--c2) 12% 16%, var(--c1) 16.5% 17%, #fff0 17.5% 100%;
--circle3: var(--c3) 0% 4%, var(--c4) 5% 8%, var(--c3) 8.5% 9.25%, #fff0 9.75% 100%;
--circle4: var(--c1) 0% 4%, var(--c2) 5% 8%, var(--c1) 8.5% 9.25%, #fff0 9.75% 100%;
--black-dot: var(--bg) 0% calc(var(--u) * 0.2), #0002 calc(var(--u) * 0.3) calc(var(--u) * 0.45), #fff0 4% 100%;
--black-dot-small: var(--bg) 0% calc(var(--u) * 0.05), #0002 calc(var(--u) * 0.1) calc(var(--u) * 0.15), #fff0 2% 100%;
--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
height: 100vh;
background:
/* mini holes */
radial-gradient(circle at 73.5% 23.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 76.5% 23.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 73.5% 26.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 76.5% 26.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 23.5% 73.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 26.5% 73.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 23.5% 76.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 26.5% 76.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 73.5% 73.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 76.5% 73.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 73.5% 76.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 76.5% 76.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 23.5% 23.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 26.5% 23.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 23.5% 26.5%, var(--black-dot-small)) var(--gp),
radial-gradient(circle at 26.5% 26.5%, var(--black-dot-small)) var(--gp),
/* mini holes */
/* mini buttons */
radial-gradient(circle at 25% 25%, var(--circle3)) var(--gp),
radial-gradient(circle at 25% 75%, var(--circle4)) var(--gp),
radial-gradient(circle at 75% 25%, var(--circle4)) var(--gp),
radial-gradient(circle at 75% 75%, var(--circle3)) var(--gp),
/* mini buttons */
/* blue holes */
radial-gradient(circle at 4.5% 45.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 4.5% 54.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 95.5% 45.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 95.5% 54.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 50% 93.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 50% 6.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 56.5% 0%, var(--black-dot)) var(--gp),
radial-gradient(circle at 56.5% 100%, var(--black-dot)) var(--gp),
radial-gradient(circle at 43.5% 0%, var(--black-dot)) var(--gp),
radial-gradient(circle at 43.5% 100%, var(--black-dot)) var(--gp),
/* blue holes */
/* red holes */
radial-gradient(circle at 5% 95%, var(--black-dot)) var(--gp),
radial-gradient(circle at 95% 5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 95% 95%, var(--black-dot)) var(--gp),
radial-gradient(circle at 5% 5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 50% 56.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 43.5% 50%, var(--black-dot)) var(--gp),
radial-gradient(circle at 50% 43.5%, var(--black-dot)) var(--gp),
radial-gradient(circle at 56.5% 50%, var(--black-dot)) var(--gp),
/* red holes */
/* blue buttons */
radial-gradient(circle at 50% 0%, var(--circle1)) var(--gp),
radial-gradient(circle at 50% 100%, var(--circle1)) var(--gp),
radial-gradient(circle at 0% 50%, var(--circle1)) var(--gp),
radial-gradient(circle at 100% 50%, var(--circle1)) var(--gp),
/* blue buttons */
/* red buttons */
radial-gradient(circle at 0% 100%, var(--circle2)) var(--gp),
radial-gradient(circle at 0% 0%, var(--circle2)) var(--gp),
radial-gradient(circle at 100% 100%, var(--circle2)) var(--gp),
radial-gradient(circle at 100% 0%, var(--circle2)) var(--gp),
radial-gradient(circle at 50% 50%, var(--c1) 0% 23%, var(--c2) 24% 32%, var(--c1) 33% 34%, #fff0 35% 100%) var(--gp),
/* red buttons */
var(--bg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.