パーツ番号 07-08-09 ・ CSSのみ
地球・世界地図風装飾イラスト
簡略化した地球儀をかたどった静止イラスト。海外展開やグローバル訴求の見出しに使える。
プレビュー
ソースコード
HTML
<svg class="globe07-08-09" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle class="ocean" cx="100" cy="100" r="90"></circle>
<ellipse class="meridian m1" cx="100" cy="100" rx="40" ry="90"></ellipse>
<ellipse class="meridian m2" cx="100" cy="100" rx="90" ry="40"></ellipse>
<path class="land land1" d="M40,60 C55,45 80,50 85,65 C95,70 100,85 85,92 C70,100 55,95 48,80 C40,75 35,68 40,60 Z"></path>
<path class="land land2" d="M120,50 C140,45 160,55 158,72 C170,78 168,95 150,98 C135,100 120,90 118,75 C112,65 112,55 120,50 Z"></path>
<path class="land land3" d="M90,120 C110,115 135,122 132,140 C130,155 108,162 92,155 C78,150 78,128 90,120 Z"></path>
<circle class="outline" cx="100" cy="100" r="90"></circle>
</svg>CSS
.d07-08-09 .globe07-08-09{
width:80%;
height:100%;
}
.d07-08-09 .ocean{
fill:#38bdf8;
opacity:.5;
}
.d07-08-09 .meridian{
fill:none;
stroke:#0ea5e9;
stroke-width:1.5;
opacity:.6;
}
.d07-08-09 .land{
fill:#22c55e;
opacity:.85;
}
.d07-08-09 .outline{
fill:none;
stroke:#0f172a;
stroke-width:2;
opacity:.5;
}クラス名 .d07-08-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。