<p>Pure CSS background pattern. Can you figure out how it was made before checking the code?</p>
$d: 6.25em;
$o: .5*$d;
$l: .375em;
$y: .2*$d;

html {
	--l: #ef2d56, #ed7d3a, #ef2d56 25%, transparent 0%;
	--g0: 
		radial-gradient(50% 50% at 50% 100%, 
				transparent calc(100% - #{$l} + -1px), 
				#8cd867 calc(100% - #{$l}), #2fbf71 100%, 
				transparent calc(100% + 1px));
	--g1: conic-gradient(from -45deg at 50% #{$y}, var(--l));
	--g2: conic-gradient(from 135deg at 50% #{$d - $y}, var(--l));
	--p1: #{$o $l + $y};
	--p2: #{0 $o + $l + $y};
	background: 
		var(--g2) var(--p2), 
		var(--g1) var(--p2), 
		var(--g2) var(--p1), 
		var(--g1) var(--p1), 
		var(--g0), 
		var(--g0) $o $o #363537;
	background-size: $d $d
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.