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

レーダーチャート描画

多角形が中心から外側へ広がるように描画される。サービス評価や能力診断の結果表示に。

css

プレビュー

ソースコード

HTML

<div class="d05-07-05 io-reveal">
          <svg viewBox="0 0 160 160" class="d05-07-05-svg">
            <circle cx="80" cy="80" r="20" class="d05-07-05-ring"/>
            <circle cx="80" cy="80" r="40" class="d05-07-05-ring"/>
            <circle cx="80" cy="80" r="60" class="d05-07-05-ring"/>
            <line x1="80" y1="80" x2="80" y2="20" class="d05-07-05-axis"/>
            <line x1="80" y1="80" x2="137.1" y2="61.5" class="d05-07-05-axis"/>
            <line x1="80" y1="80" x2="115.3" y2="128.5" class="d05-07-05-axis"/>
            <line x1="80" y1="80" x2="44.7" y2="128.5" class="d05-07-05-axis"/>
            <line x1="80" y1="80" x2="23.9" y2="61.5" class="d05-07-05-axis"/>
            <text x="80" y="12" class="d05-07-05-label">品質</text>
            <text x="144" y="60" class="d05-07-05-label">価格</text>
            <text x="118" y="140" class="d05-07-05-label">速度</text>
            <text x="42" y="140" class="d05-07-05-label">サポート</text>
            <text x="16" y="60" class="d05-07-05-label">デザイン</text>
            <polygon class="d05-07-05-poly" points="80,26 114.2,68.9 106.5,116.4 62.4,104.3 31.5,64.2"/>
            <circle class="d05-07-05-dot" cx="80" cy="26" r="3"/>
            <circle class="d05-07-05-dot" cx="114.2" cy="68.9" r="3"/>
            <circle class="d05-07-05-dot" cx="106.5" cy="116.4" r="3"/>
            <circle class="d05-07-05-dot" cx="62.4" cy="104.3" r="3"/>
            <circle class="d05-07-05-dot" cx="31.5" cy="64.2" r="3"/>
          </svg>
        </div>

CSS

.d05-07-05{width:100%;display:flex;justify-content:center}
        .d05-07-05-svg{width:170px;height:170px;overflow:visible}
        .d05-07-05-axis{stroke:#e5e7eb;stroke-width:1}
        .d05-07-05-ring{fill:none;stroke:#f1f5f9;stroke-width:1}
        .d05-07-05-label{font-size:8px;fill:#9ca3af;text-anchor:middle}
        .d05-07-05-poly{fill:rgba(59,130,246,.25);stroke:#3b82f6;stroke-width:2;transform-origin:80px 80px;transform:scale(0);opacity:0}
        .d05-07-05.is-in .d05-07-05-poly{animation:d05-07-05-grow .9s cubic-bezier(.2,.8,.2,1) forwards .2s}
        @keyframes d05-07-05-grow{to{transform:scale(1);opacity:1}}
        .d05-07-05-dot{opacity:0;fill:#3b82f6}
        .d05-07-05.is-in .d05-07-05-dot{animation:d05-07-05-fade .3s ease forwards 1.1s}
        @keyframes d05-07-05-fade{to{opacity:1}}

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