パーツ番号 07-08-06 ・ CSSのみ

人物シルエットイラスト(汎用)

大きさの異なる人型シルエットを並べた静止イラスト。チーム紹介やコミュニティ訴求に使える。

staticcss

プレビュー

ソースコード

HTML

<svg class="people07-08-06" viewBox="0 0 240 200" xmlns="http://www.w3.org/2000/svg">
          <g class="person p1">
            <circle cx="40" cy="46" r="17"></circle>
            <path d="M20,150 C15,102 25,68 40,68 C55,68 65,102 60,150 Z"></path>
          </g>
          <g class="person p2">
            <circle cx="120" cy="30" r="22"></circle>
            <path d="M96,160 C90,102 104,58 120,58 C136,58 150,102 144,160 Z"></path>
          </g>
          <g class="person p3">
            <circle cx="196" cy="50" r="15"></circle>
            <path d="M178,150 C174,108 183,72 196,72 C209,72 218,108 214,150 Z"></path>
          </g>
        </svg>

CSS

.d07-08-06 .people07-08-06{
          width:100%;
          height:100%;
        }
        .d07-08-06 .person{
          fill:#64748b;
        }
        .d07-08-06 .p1{
          fill:#94a3b8;
        }
        .d07-08-06 .p2{
          fill:#334155;
        }
        .d07-08-06 .p3{
          fill:#94a3b8;
        }

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