台風🌀は、とても強い。
つまり、台風🌀を生み出す力を手に入れれば、とても強い人間になれる。
僕は強くなりたい。
というわけで、作ってみました。
台風の絵文字って?
そもそも、台風の絵文字にはいろいろな種類がある。
このサイトで一覧できるんだけど、
代表的なのはこんな感じ。
| apple | microsoft | |
|---|---|---|
 |
 |
 |
| https://emojipedia.org/cyclone/より |
appleの絵文字は、単なる渦巻きだし、microsoftだとちょっと複雑すぎるので、
作りやすそうなgoogleの絵文字を再現してみます！
まずは形をつくる
原型をつくる
まずは、細かいところを気にせずに原型を作ってみます。
枠線、背景のグラデーションなどに気を配ります。
See the Pen typhoon-origin by Spice (@spice-z) on CodePen.
ととのえる
次に、ギザギザの部分を作ってみます。
こういう形をcssで作るのはあまりやったことがないのだけれど、構造を考えたりするのが難しいですね。
どうやって作ろうか悩んだけど,
border-radiusを駆使した白色を重ねて実装することにしました。
そうして出来上がったのがこちら！
See the Pen typhoon-shape by Spice (@spice-z) on CodePen.
結構違う形になってしまいましたが、これはこれで良いと思います。
とんがり具合を作るのが、難しかったですね。
そして動かす
本当は反時計回りなのですが、google仕様だと時計回りなので、そちらに合わせます。
回転しながら、北東に進もう。
そうして出来上がったのがこちら！
See the Pen typhoon-rotate by Spice (@spice-z) on CodePen.
うん、いい感じだ！感想
１〜２時間で作れたのですが、一番苦労したのは、border-radiusの部分でした。
それほど駆使した経験がないので、
CSSでいろんなカタチを表現してみる
css border-radius の使い方。円や扇をジェネレータで描いてみる
これらのサイトを参考にさせていただきました。
cssでイラストを書いたことはなかったのですが、案外なんでもできそう。
機会があれば、また作ってみようかな！