<p>Pure CSS background pattern. Can you figure out how it was made before checking the code? Can you reduce the number of gradients? Let me know!</p>
$d: 8em;
$p0: 27%;
$p1: 53%;
$p2: 35%;
$l: .0625*$d;
html {
--l: #{$p1}, transparent calc(#{$p1} + 1px);
--g0: radial-gradient(#000 #{$p0}, #fff calc(#{$p0} + 1px) var(--l));
--g1: radial-gradient(#fff #{$p2}, transparent calc(#{$p2} + 1px));
--g2: radial-gradient(#ffe313 calc(#{$p1} + -1*#{$l}), #000 calc(#{$p1} + -1*#{$l} + 1px) var(--l));
background:
var(--g2), var(--g2) .5*$d .5*$d,
var(--g1) .5*$d 0, var(--g1) 0 .5*$d,
var(--g0), var(--g0) .5*$d .5*$d;
background-size: $d $d;
background-blend-mode: darken, darken, difference, difference
}
View Compiled
/* absolutely no JS 🙃 */
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.