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のブラウザ対応状況です。概ね問題なさそうですね