html {
--u: 1.52vmin;
--c1: #888888;
--c2: #6b6b6b;
--c3: #4e4e4e;
--c4: #464646;
--c5: #393939;
--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 17.5);
--bp: calc(var(--u) * -5) calc(var(--u) * -8.75);
height: 100vh;
--bg:
conic-gradient(from 120deg at 74.5% 91.75% , var(--c2) 0 120deg, #fff0 0 360deg) var(--gp),
conic-gradient(from 120deg at 25.5% 91.75% , var(--c1) 0 120deg, #fff0 0 360deg) var(--gp),
conic-gradient(from 60deg at 74.5% 75%, var(--c3) 0 120deg, #fff0 0 360deg) var(--gp),
conic-gradient(from 180deg at 25.5% 75%, var(--c2) 0 120deg, #fff0 0 360deg) var(--gp),
conic-gradient(from 120deg at 50% 67%, var(--c5) 0 120deg, #fff0 0 360deg) var(--gp),
conic-gradient(from 90deg at 50% 50%, var(--c1) 0 30deg, var(--c4) 0 90deg, var(--c3) 0 150deg, var(--c2) 0 180deg, #fff0 0 360deg) var(--gp);
background:
var(--bg), var(--bg), var(--c1);
background-position:
var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp),
0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}
// Inspired by this image from freepick.es:
// https://www.freepik.es/vector-premium/patron-transparente-abstracto-hexagonal-panal_10280885.htm
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.