<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;
$c: gold, white, dimgrey;
html {
--l0: 0% 25%, transparent 0 50%;
--l1: calc(25% - 1px), transparent 25%;
--rg: radial-gradient(circle, #{nth($c, 1)} var(--l1));
background:
radial-gradient(circle, nth($c, 3), var(--l1)) .5*$d $d,
radial-gradient(circle, nth($c, 2), var(--l1)) 0 1.5*$d,
var(--rg) .5*$d 0,
var(--rg) 0 .5*$d,
repeating-conic-gradient(from 45deg, nth($c, 3) var(--l0)),
repeating-conic-gradient(from 45deg, nth($c, 2) var(--l0))
.5*$d .5*$d
gold;
background-size: $d 2*$d
}
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.