html {
--u: 2vmin;
--c1: #000000;
--c2: #a4cf72;
--c3: #6d9d35;
--c4: #54762b;
--shape:
var(--c1) 0 calc(var(--u) * 0.65),
var(--c2) calc(var(--u) * 0.85) calc(var(--u) * 1),
var(--c3) calc(var(--u) * 1.75),
var(--c1) calc(var(--u) * 1.9) calc(var(--u) * 2),
var(--c3) calc(var(--u) * 2.15) calc(var(--u) * 2.65),
var(--c4) calc(var(--u) * 3.15),
var(--c1) calc(var(--u) * 3.35) calc(var(--u) * 3.45),
var(--c4) calc(var(--u) * 3.6) calc(var(--u) * 4.3),
var(--c1) calc(var(--u) * 4.6) calc(var(--u) * 4.7),
#fff0 calc(var(--u) * 4.8) 100%;
--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 6.33);
height: 100vh;
background:
radial-gradient(circle at 50% 150%, var(--shape)) var(--gp),
radial-gradient(circle at 0% 100%, var(--shape)) var(--gp),
radial-gradient(circle at 100% 100%, var(--shape)) var(--gp),
radial-gradient(circle at 50% 50%, var(--shape)) var(--gp),
radial-gradient(circle at 0% 0%, var(--shape)) var(--gp),
radial-gradient(circle at 100% 0%, var(--shape)) var(--gp),
var(--c2);
}
// Inspired by this image from depositphotos.com:
//https://depositphotos.com/462423916/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.