<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>
$u: .375em;
$s: 50*$u;
$d: .25*$s;

html {
	--l0: calc(100% - 1px), #fff;
	--l1: 0% 25%, #0000 0% 50%;
	--g: repeating-conic-gradient(#fff var(--l1));
		radial-gradient(closest-side, transparent var(--l0)), 
		linear-gradient(90deg, #0000 0 25%, currentcolor 0 75%, #d6af46 0), 
		repeating-conic-gradient(#88b6b4 var(--l1)), 
		radial-gradient(closest-side, currentcolor var(--l0));
	background-size: 2*$d 2*$d, $d $d, .5*$s, $s $s, 2*$u 2*$u, $u $u;
	color: #31334a
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.