html {
--s: 80px; /* the size */
--c: #5E8C6A;
--_s: calc(2*var(--s)) calc(2*var(--s));
--_g: 35.36% 35.36% at;
--_c: #0000 66%,#BFB35A 68% 70%,#0000 72%;
background:
radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),
radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s),
repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s),
radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
var(--c);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.