ChatGPTにSVGアニメーションを作ってもらったよ！

はじめに

ChatGPTにSVGを作ってもらうことにハマってます。
今回は絵文字を元ネタにSVGアニメーションを作ってもらいました！

まずは元ネタの絵文字を提示してみる

今回のお題は🥰です。
環境によって顔の表情が若干異なるかと思います。
今回はTwemojiの顔で行きたいと思います。
https://emojipedia.org/twitter/twemoji-15.0.3/smiling-face-with-hearts

🥰の絵文字を真似して。ハートを顔の周りで回転させて。

ブラッシュアップ！

ハートの動きを変えよう＆ハートの数を変えよう

ハートが顔の周りなぞってる感じだね！もっとポップというかふわふわというかキュンキュンな動きにして！あと絵文字だとハートが3個あるから、そこも真似したい！

だいぶ抽象的な指示でしたが元の絵文字の雰囲気に近づくことができました！

ハートの位置を変えよう

いいね！頭の上にハート2個あるから、🥰みたいな箇所に配置して

変わってない。。。こういうのは苦手なのかな？

あんまり位置かわってないや。頭の上にある左側のハートを顎あたりまで下げて。

いろいろ細かいところも！

目、口、チーク、ハートの色を変えてもらって、最終的にできたのがこちら！

コードにはコメントもあって親切です

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="heartShadow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="deeppink" flood-opacity="0.3"/>
    </filter>
  </defs>

  <!-- 顔 -->
  <circle cx="100" cy="100" r="65" fill="#FFD580" stroke="orange" stroke-width="4" />

  <!-- にっこり目 -->
  <path d="M 60 90 Q 70 80, 80 90" stroke="#444" stroke-width="4" fill="none" stroke-linecap="round"/>
  <path d="M 120 90 Q 130 80, 140 90" stroke="#444" stroke-width="4" fill="none" stroke-linecap="round"/>

  <!-- チーク -->
  <circle cx="65" cy="115" r="14" fill="pink" opacity="0.6"/>
  <circle cx="135" cy="115" r="14" fill="pink" opacity="0.6"/>

  <!-- スマイル -->
  <path d="M 80 125 Q 100 145, 120 125" stroke="#444" stroke-width="4" fill="none" stroke-linecap="round"/>

  <!-- 💖 ハート1（左下／淡ピンク） -->
  <g filter="url(#heartShadow)">
    <path d="M 55 145 C 50 135, 35 135, 35 150 C 35 160, 55 175, 55 175 C 55 175, 75 160, 75 150 C 75 135, 60 135, 55 145 Z"
          fill="#ffc9da" stroke="#f0789f" stroke-width="1.5">
      <animateTransform attributeName="transform" type="translate"
        values="0,0; 0,-4; 0,0" dur="2s" repeatCount="indefinite" begin="0s"/>
    </path>
  </g>

  <!-- 💗 ハート2（右上／中間ピンク） -->
  <g filter="url(#heartShadow)">
    <path d="M 120 35 C 115 25, 100 25, 100 40 C 100 50, 120 65, 120 65 C 120 65, 140 50, 140 40 C 140 25, 125 25, 120 35 Z"
          fill="#ff8fb1" stroke="#e84a7a" stroke-width="1.5">
      <animateTransform attributeName="transform" type="translate"
        values="0,0; 0,-6; 0,0" dur="2s" repeatCount="indefinite" begin="0.3s"/>
    </path>
  </g>

  <!-- ❤️ ハート3（右下／赤寄りピンク） -->
  <g filter="url(#heartShadow)">
    <path d="M 155 135 C 150 125, 135 125, 135 140 C 135 150, 155 165, 155 165 C 155 165, 175 150, 175 140 C 175 125, 160 125, 155 135 Z"
          fill="#e84a7a" stroke="#a82644" stroke-width="1.5">
      <animateTransform attributeName="transform" type="translate"
        values="0,0; 0,-4; 0,0" dur="2s" repeatCount="indefinite" begin="0.6s"/>
    </path>
  </g>
</svg>

作ってみて

抽象的な指示でもアニメーションに落とし込めたので、マイクロインタラクションを実装する際に活用していきたいです！