パーツ番号 05-05-09 ・ CSSのみ

ドーナツ内訳+凡例

SVGドーナツグラフと色分け凡例のセット。画面に入ると円が描画されます。流入経路の内訳や会員ランク構成の可視化に。

scrollcsssvg

プレビュー

ソースコード

HTML

<div class="d05-05-09-card">
          <svg class="d05-05-09-donut" viewBox="0 0 42 42">
            <circle class="d05-05-09-bg" cx="21" cy="21" r="15.9" fill="none" stroke="#eef2f7" stroke-width="7"/>
            <circle class="d05-05-09-seg d05-05-09-s1" cx="21" cy="21" r="15.9" fill="none" stroke="#3b82f6" stroke-width="7" stroke-dasharray="45 55" stroke-dashoffset="25"/>
            <circle class="d05-05-09-seg d05-05-09-s2" cx="21" cy="21" r="15.9" fill="none" stroke="#8b5cf6" stroke-width="7" stroke-dasharray="30 70" stroke-dashoffset="80"/>
            <circle class="d05-05-09-seg d05-05-09-s3" cx="21" cy="21" r="15.9" fill="none" stroke="#f59e0b" stroke-width="7" stroke-dasharray="25 75" stroke-dashoffset="50"/>
          </svg>
          <ul class="d05-05-09-legend">
            <li><span style="background:#3b82f6"></span>オーガニック<b>45%</b></li>
            <li><span style="background:#8b5cf6"></span>SNS<b>30%</b></li>
            <li><span style="background:#f59e0b"></span>広告<b>25%</b></li>
          </ul>
        </div>

CSS

.d05-05-09{background:#f1f5f9}
        .d05-05-09-card{width:270px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;display:flex;align-items:center;gap:18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-09-donut{width:96px;height:96px;flex:0 0 96px;transform:rotate(-90deg)}
        .d05-05-09-seg{stroke-dasharray:0 100;transition:stroke-dasharray 1s cubic-bezier(.22,1,.36,1)}
        .io-reveal.is-in .d05-05-09-s1{stroke-dasharray:45 55}
        .io-reveal.is-in .d05-05-09-s2{stroke-dasharray:30 70}
        .io-reveal.is-in .d05-05-09-s3{stroke-dasharray:25 75}
        .d05-05-09-legend{list-style:none;margin:0;padding:0;flex:1}
        .d05-05-09-legend li{display:flex;align-items:center;font-size:12px;color:#334155;padding:4px 0}
        .d05-05-09-legend li span{width:10px;height:10px;border-radius:3px;margin-right:8px;flex:0 0 10px}
        .d05-05-09-legend li b{margin-left:auto;font-weight:700;color:#0f172a}

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