【CSS】うにょうにょしたメタモンが作りたかった..【円をうにょうにょ】 #CSS

息抜きがてらに読んでください(ﾟｰﾟ)
ポケモンやってたら野生のメタモンが出てきたので、CSSでメタモン作ってみました。
個人の技術不足な部分と、CSSだけだと限界があるなあと感じた瞬間でもありました...

メタモン

ポケモンをやったことある人ならほとんどの人が知っているポケモンですね。
ピカチュウに変身したメタモンが好きです。

参照：メタモン｜ポケモンずかん｜ポケモンだいすきクラブ

まずは、うにょうにょさせたい

メタモンはうにょうにょなイメージがあります（主観）

CSSのborder-radius と CSS animationの組み合わせで
うにょうにょした円が作れます。

うねうね

中身はこんなかんじです。

style.scss

div {
  animation: unyo 3s linear alternate infinite;
}

@keyframes unyo {
  0% {
    border-radius: 50px 90px 60px 80px;
  }

  50% {
    border-radius: 80px 70px 90px 50px;
  }

  100% {
    border-radius: 90px 50px 80px 90px;
  }
}

CSSメタモン

先ほどのうにょうにょを使えば、
うにょうにょ感がでるメタモンが作れるんじゃないかと思ってせっせと作っていました。

う...うにょうにょ....?????

See the Pen CSS Metamon(Ditto) by Deren (@deren2525) on CodePen.

円を7つくらい用意して合体しています。
アニメーションは7つとも統一です。バラバラな動きをしているようにみえますが、7つとも微妙に角度が違うのでバラバラな動きに見えるかんじです。
border-radiusも、フレームも、細かくしています。正直、こんなに細かくすることもなかったなとも思っています。

style.scss

@keyframes metamon {
  0% {
    border-radius: 60px 90px 70px 80px / 80px 90px 70px 60px;
  }

  10% {
    border-radius: 50px 70px 90px 60px / 60px 90px 70px 80px;
  }

  20% {
    border-radius: 70px 60px 80px 90px / 90px 80px 60px 70px;
  }

  30% {
    border-radius: 50px 70px 90px 60px / 60px 90px 70px 50px;
  }

  40% {
    border-radius: 80px 60px 70px 90px / 90px 70px 50px 80px;
  }

  50% {
    border-radius: 90px 50px 60px 70px / 70px 60px 80px 90px;
  }

  60% {
    border-radius: 60px 70px 80px 90px / 90px 50px 70px 60px;
  }

  70% {
    border-radius: 70px 90px 60px 50px / 80px 60px 90px 70px;
  }

  80% {
    border-radius: 60px 80px 70px 90px / 90px 70px 80px 50px;
  }

  90% {
    border-radius: 80px 70px 90px 60px / 60px 90px 50px 80px;
  }

  100% {
    border-radius: 90px 50px 70px 80px / 80px 70px 60px 90px;
  }
}

まとめ

canvasでやればもっと細かい動きができるかなと思います。
作っていて、CSSでは限界があるなあと感じました。

だいぶ不恰好なメタモンになってしまいました...すまねえ...

追記（2018/11/09）

新たなメタモンが生まれていました。ありがとうございます。
私のメタモンよりもメタモンでした。勉強になりました！
インスパイアされて『うにょうにょしたメタモン』を描きたくなった。