SVGでアイコンを書いた #HTML

GitHubにアイコンを登録したんだけど、普段使ってるアイコンが相当昔に作ったやつのGIF版しか無くて、 ノイズ入ってるわ元画像どっか行っちゃったわで、ちゃんと作り直そうと思った。

お絵描きツールとか良く分からんので、産まれて初めてエディタでSVGを手書きした。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="r-fill" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#fff" /><stop offset="80%" stop-color="#fc1204" /></radialGradient>
    <radialGradient id="y-fill" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#fff" /><stop offset="80%" stop-color="#fcd605" /></radialGradient>
    <radialGradient id="b-fill" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#fff" /><stop offset="80%" stop-color="#04558c" /></radialGradient>
    <radialGradient id="g-fill" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#fff" /><stop offset="80%" stop-color="#04825c" /></radialGradient>
    <radialGradient id="hy-fill"><stop offset="0%" stop-color="#6cc" /><stop offset="30%" stop-color="#056b8c" /></radialGradient>
  </defs>
  <g transform="rotate(-30, 160, 160)">
    <mask id="r-mask"><rect width="100%" height="100%" fill="#fff" /><ellipse cx="192" cy="160" rx="160" ry="48" fill="#000" /></mask>
    <ellipse cx="160" cy="160" rx="160" ry="48" mask="url(#r-mask)" fill="url(#r-fill)" />
    <mask id="y-mask"><rect width="100%" height="100%" fill="#fff" /><ellipse cx="220" cy="160" rx="160" ry="40" fill="#000" /></mask>
    <ellipse cx="160" cy="160" rx="120" ry="40" mask="url(#y-mask)" fill="url(#y-fill)" />
    <mask id="b-mask"><rect width="100%" height="100%" fill="#fff" /><ellipse cx="128" cy="152" rx="160" ry="48" fill="#000" /></mask>
    <ellipse cx="160" cy="152" rx="160" ry="48" mask="url(#b-mask)" fill="url(#b-fill)" />
    <mask id="g-mask"><rect width="100%" height="100%" fill="#fff" /><ellipse cx="100" cy="152" rx="160" ry="40" fill="#000" /></mask>
    <ellipse cx="160" cy="152" rx="120" ry="40" mask="url(#g-mask)" fill="url(#g-fill)" />
  </g>
  <g>
    <style>
@font-face {
  font-family: 'Allura';
  src: url(//themes.googleusercontent.com/static/fonts/allura/v1/j9W2M5JC9WrfBRympbynRQ.woff) format('woff');
}
    </style>
    <text font-family="Allura" font-size="192" x="64" y="138" fill="url(#hy-fill)" transform="scale(1, 1.4)">hy</text>
  </g>
</svg>

環境によっては崩れちゃうかも。手元のChromeではhttps://github.com/robarioのアイコンのように見えてます。

まとめ

SVGすげぇ！