本ページはプロモーションが含まれている場合があります
Clubhouseのアイコンの形って話題になっていますよね。
柔らかい四角みたいな。スーパー楕円っていうのですかね。
これは簡単には描けないみたいなので、Illustratorでそれっぽい図形をササッと作ってSVGで切り抜いてそれっぽくしてみようという企画です。
ヘッダー画像出典：「Clubhouse: Drop-in audio chat」をApp Storeで
SVGを用意する
早速ですがClubhouseのアイコンみたいな図形をIllustratorで作ってみます。
作り方は樋口さんのツイートを参考に、丸を描いてアピアランスの「ワープ」→「膨張」→「-30%」としました（そのまんまや）。塗りは自分がわかるように「白」にしておきました。
ワープでやる場合は膨張を-30%〜40%の間でかけてあげるとちょうどいい感じになります。 pic.twitter.com/1GI0MMN6mE
— 樋口泰行 (@higuchidesign) January 29, 2021
この図形をSVGで書き出します。（参考：SVGを書き出す | Adobe Illustrator チュートリアル（Adobe））
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M128,64c-.28,21.19-4,38.74-14.77,49.23C102.74,124,85.19,127.72,64,128c-21.19-.28-38.74-4-49.23-14.77C4,102.74.28,85.19,0,64,.28,42.81,4,25.26,14.77,14.77,25.26,4,42.81.28,64,0c21.19.28,38.74,4,49.23,14.77C124,25.26,127.72,42.81,128,64Z"/></svg>
ここまで用意できたらできたも同然です。
HTMLを用意する
以下のページを参考に、HTMLを作成します。
切り抜きパスのHTMLを作成
切り抜きパスのHTMLを作ります。
先ほど作成したSVGタグに「width="0" height="0" style="position: absolute; top: 0; left: 0;"」を付けます。
※「viewBox="0 0 128 128"」の後ろの2つの数字はアイコンとして表示したいサイズにしておきましょう
他の「<path>」のタグ以外は削除します。
pathのタグの親に「<clipPath id="clip01">」を付けます。IDは好きに設定してください。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="0" height="0" style="position: absolute; top: 0; left: 0;">
<clipPath id="clip01">
<path d="M128,64c-.28,21.19-4,38.74-14.77,49.23C102.74,124,85.19,127.72,64,128c-21.19-.28-38.74-4-49.23-14.77C4,102.74.28,85.19,0,64,.28,42.81,4,25.26,14.77,14.77,25.26,4,42.81.28,64,0c21.19.28,38.74,4,49.23,14.77C124,25.26,127.72,42.81,128,64Z"/>
</clipPath>
</svg>
アイコン画像を表示するHTMLを作成
アイコン画像を表示するところに設定するHTMLを作成します。
<svg width="128" height="128" viewBox="0 0 128 128"> とアイコン画像のサイズでSVGタグを作ります。
※viewBoxの中の値は切り抜きパス用のSVGと同じに設定します
SVGタグの中身は「<image xlink:href="●画像のURL●" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#●切り抜きパスのID●)"/>」とします。
<svg width="128" height="128" viewBox="0 0 128 128">
<image xlink:href="https://jdash.info/images/20130205-twitter-icon-2-128x128.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip01)"/>
</svg>
以上で完成です。
Clubhouseのアイコン表示っぽいSVG切り抜きを適用した例
このブログのアイコンで適用してみました。※以前のアイコンは少しだけ角丸の四角形でした。
結構いい感じの再現になったと思います。
ぜひ試してみてくださいね！
それでは、また。