CSSのみで和柄（七宝？）の背景パターンを作成した

CSSのみで作成された背景パターンを漁っていたのですが、目当てのパターンがなかったので自分で作りました。

「これなんて名前なん…？七宝？検索しても全然出てこない…」となった背景パターン

style.css

:root {
    --white: #fff;

    /*円の大きさ*/
    --shippo1: calc(var(--shippo2) - 0.6px);
    --shippo2: 40px;
    --shippo3: calc(var(--shippo2) + 0.6px);
}

.box {
    background-color: #9f166a;
    background-image:
        radial-gradient(circle at top left, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at top right, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at bottom left, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at bottom right, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at 50% 150%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at 50% -50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at -50% 50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
        radial-gradient(circle at 150% 50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3));
    background-size: calc(var(--shippo2) * 1.732) var(--shippo2);
}

結果


参考文献

radial-gradient() - CSS: カスケーディングスタイルシート | MDN