Result

ちょうど100のパターンがあります。イラストのようなパターンもありますが全てCSS製となっています

この手のものは最近ではSVGが主流となっていますので需要は高くはなさそうですがCSSの応用として学習用に良い気がします

css

:root {
	--ambrosia:		#FCDBBA;
	--apricot: 		#FF8652;
	--aubergine: 		#6A2352;
	--auburn: 		#A12F2F;
	--asparagus: 		#A0C259;
	--beetroot:		#7F0421;
	--blue-tack: 		#82BFE0;
	--bloom:		#363A57;
	--blush: 		#D67B71;
	--bronze:		#C27940;

	--trans: transparent;
	--trans05: rgba(255,255,255,0.05);
	--trans1: rgba(255,255,255,0.1);
	--trans2: rgba(255,255,255,0.2);
	--trans4: rgba(255,255,255,0.4);
}

カラーはカスタムプロパティで管理されています

あとはrepeating-radial-gradientを中心に設計されています

html

<div class="overlapping-shields"></div>

全て単一の要素のみで構成されています

can i use

repeating-radial-gradientのブラウザ対応状況です。概ね問題なさそうですね

via

#the100dayproject CSS patterns