どうもKJ9です。

今回のチャレンジはシンプルかつ実用的なネタ。
SVGでバスケットボールのアイコンを描いてみる ことにした。

SVGはアイコンやロゴを描くのにめちゃくちゃ便利で、CSSよりも「正確な形」が作りやすい。しかもベクター形式だから拡大縮小しても劣化なし。つまり、サイトのパーツとしてもそのまま使えるしアニメーションさせて遊ぶことも出来る。

バスケボールを構成する要素

バスケットボールをざっくり分解すると、こうなります。

• ベースの丸（オレンジ）
• 縦のライン（中央で分割）
• 横のライン（真ん中に一本）
• カーブした斜めライン（独特の模様を作る）

これをSVGの <circle> と <path> を使って描いていきます。

See the Pen CSSだけでバスケコートを描いてみた by dipcode_kj (@dipcode_kj) on CodePen.

出来上がりイメージ

オレンジの丸に、黒いラインがしっかり入った「それっぽいバスケットボール」が完成します。
CSSで無理やり描いたときよりも遥かにクオリティが高い。SVGだと曲線も自然に書けるから「バスケのボールまんまやん！」って即わかる仕上がりに。イラストでバスケットボール描いてってお願いしたらだいたいの人がこれを描くだろうってやつだね！

カスタマイズして遊んでみる

ここからさらに応用も可能

• 色を変えて「チームカラーのボール」にする
  例: レイカーズっぽく紫と黄色にアレンジ
• width と height を変えてレスポンシブ対応にする
• stroke-dasharray を使って「ボールが描かれていくアニメーション」を作る

SVGはコードをいじるだけで見た目が一気に変わるので、バスケ好きなら「自分のチームカラーのアイコン」を作るのも面白いと思う。

色を変えて「チームカラーのボール」にする（例：レイカーズっぽく紫と黄色にアレンジ

stroke-dasharray を使って「ボールが描かれていくアニメーション」を作る

SVGはコードをいじるだけで見た目が一気に変わるので、バスケ好きなら「自分のチームカラーのアイコン」を作るのも面白いと思うし、少しややこしさは感じるもののSVGのコードだけでアニメーションが出来てしまったりCSSでも色々とカスタマイズが出来るのも良いところ。
デメリットはコードが煩雑になってしまうのが難点ではあるものの拡大しても粗くならないってのは魅力ですよね！

まとめ

SVGを使えば、シンプルなコードで「それっぽいアイコン」があっという間に作れる。
特にバスケットボールは丸と曲線で構成されてるから、SVGとの相性がめちゃくちゃ良い。

CSSだけでコートを描いたときは苦戦したけど、SVGならアイコンレベルは余裕。
これからも「バスケ × Webいじり」のネタを量産していくんで、楽しみにしててください。