パーツ番号 05-12-08 ・ CSSのみ

レーダーチャート(SVG固定描画)

5軸のレーダーチャートをSVGで固定描画したビジュアルです。スキル評価や多角的な比較イメージを見せるプロフィールページの見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<svg class="d05-12-08-svg" viewBox="0 0 150 150">
          <polygon points="75,15 132,56 110,124 40,124 18,56" fill="none" stroke="#e2e8f0" stroke-width="1"></polygon>
          <polygon points="75,35 113,62 98,108 52,108 37,62" fill="none" stroke="#e2e8f0" stroke-width="1"></polygon>
          <polygon points="75,55 94,69 87,91 63,91 56,69" fill="none" stroke="#e2e8f0" stroke-width="1"></polygon>
          <line x1="75" y1="75" x2="75" y2="15" stroke="#e2e8f0" stroke-width="1"></line>
          <line x1="75" y1="75" x2="132" y2="56" stroke="#e2e8f0" stroke-width="1"></line>
          <line x1="75" y1="75" x2="110" y2="124" stroke="#e2e8f0" stroke-width="1"></line>
          <line x1="75" y1="75" x2="40" y2="124" stroke="#e2e8f0" stroke-width="1"></line>
          <line x1="75" y1="75" x2="18" y2="56" stroke="#e2e8f0" stroke-width="1"></line>
          <polygon points="75,42 121,60 98,107 44,119 35,62" fill="rgba(99,102,241,0.35)" stroke="#6366f1" stroke-width="2" stroke-linejoin="round"></polygon>
        </svg>
        <div class="d05-12-08-legend"><span>企画</span><span>開発</span><span>営業</span><span>品質</span><span>顧客</span></div>

CSS

.d05-12-08{padding:16px;flex-direction:column;gap:8px}
        .d05-12-08-svg{width:150px;height:150px}
        .d05-12-08-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:10px;color:#94a3b8;font-weight:600}

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