<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));
		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
	background-size: $d 2*$d
View Compiled
/* absolutely no JS 🙃 */
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.