パーツ番号 11-07-10 ・ CSSのみ

完了・お祝いイラスト(静止・紙吹雪なし)

初期設定が完了したことを伝える祝福イラスト。装飾は静止した図形のみで構成した完了画面の見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-10-wrap">
          <svg viewBox="0 0 100 90" width="100" height="90">
            <circle cx="15" cy="14" r="3" fill="#f472b6"/>
            <circle cx="88" cy="18" r="3" fill="#60a5fa"/>
            <rect x="10" y="60" width="6" height="6" fill="#facc15" transform="rotate(20 13 63)"/>
            <rect x="82" y="58" width="6" height="6" fill="#34d399" transform="rotate(-15 85 61)"/>
            <circle cx="50" cy="42" r="26" fill="#ecfdf5"/>
            <path d="M38 42l8 8 16-16" fill="none" stroke="#10b981" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p class="d11-07-10-t">セットアップ完了</p>
          <p class="d11-07-10-sub">すべての準備が整いました</p>
        </div>

CSS

.d11-07-10-wrap{ text-align:center; }
        .d11-07-10-t{ margin:6px 0 2px; font-size:15px; font-weight:700; color:#065f46; }
        .d11-07-10-sub{ margin:0; font-size:12px; color:#6b7280; }

クラス名 .d11-07-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。