バレンタイン前日。キツネ先生はデスクに向かい、真剣な表情でスケッチを描いては消している。
しかし、時折 「むむっ…違う！」 と首を振り、消しゴムでぐしゃぐしゃに。
チョコレートの包み紙や市販のカードを見つめるが…
🦊「…う〜ん、ありきたりすぎる！」（※喋れないけど、顔でそう言ってる）
その時、机の端に置かれたプログラミングの教科書 が目に入る。
ピコーン💡✨ 何かを思いついたらしい。
勢いよくタブレットを開き、指でササッとコードを描き始めた。
…が、
💥 バシャン！！！
勢い余って コーヒーカップが倒れ、ノートが水没！！
🦊「あっ…！！！！」(顔が真っ青）
でも、そんなことではへこたれない。
キツネ先生はぐちゃぐちゃになったノートを横に置き、なぜかドヤ顔でタブレットの画面を見つめている。
どうやら、SVGアニメーションを使って特別な贈り物を作る ことにしたようです。
目次
📌 SVGとは？
SVG（Scalable Vector Graphics）とは、拡大縮小しても劣化しないベクター画像を描画するためのマークアップ言語 です。
💡 SVGの特徴
✅ 拡大・縮小しても劣化しない（ベクター形式）
✅ HTMLやCSSと組み合わせて使える
✅ JavaScriptを使えば、インタラクティブなアニメーションも可能
キツネ先生は、「これなら、”特別な気持ち” を表現できるかもしれない！」 と思ったのかもしれません。
📌 SVGの基本構造
キツネ先生はタブレットに手を伸ばし、さっそく SVGでハートを描くコード を書き始めました。
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M100 35
C 70 -5, 10 45, 100 110
C 190 45, 130 -5, 100 35 Z"
fill="red"/>
</svg>SVGでは、<svg> タグを使って図形を描画します。
例えば、シンプルなハート を作る場合、こんなコードになります。
💡 ポイント解説
✅ viewBox とは？
👉 viewBox="0 0 200 200" → 200×200 の範囲で描画 する設定
✅ <path> の基本
👉 d 属性を使って、曲線を描く（ベジェ曲線）
👉 C の後の数字が、カーブの制御点 を表す
✅ d 属性の意味
🔹 M100 35 → (100, 35) の位置から描き始める
🔹 C 70 -5, 10 45, 100 110 → 左側のカーブを描く魔法の数字
🔹 C 190 45, 130 -5, 100 35 → 右側のカーブを描いて始点に戻る
キツネ先生は満足そうにうなずく。
🦊「ふふん、これは完璧ね！」（※たぶんそう思ってる）
でも…しばらく画面を見つめた後、
🦊「……。」（じーっ）
🦊「……む？」（首をかしげる）
🦊「あっ！！！！」（電撃走る）
「動き」を足すべきだ！と気づいたのだ！
💡 SVGアニメーションでハートを動かす！
キツネ先生はタブレットにこんなメモを書き込んでいました。
@keyframes heartbeat {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}💡 アニメーションの仕組み
✅ @keyframes heartbeat → アニメーションの動きを定義
✅ 0% → ハートの通常サイズ
✅ 50% → ハートを 1.2倍に拡大（ドキドキ！）
✅ 100% → 元のサイズに戻る
🦊「むふふ…これは最高のアイデアよ…！」（※完全に天才の顔）
📜 ついに完成！キツネ先生の「動くハート」
勢いそのままに、アニメーションの魔法をかける！
.heart {
animation: heartbeat 1s infinite ease-in-out;
}🔹 animation: heartbeat 1s infinite; → 1秒ごとに無限ループ
🔹 ease-in-out; → 自然な動きに調整
💖 そして、事件は起こる
キツネ先生は、意気揚々と画面をプレビューした。
🦊「さぁ…ドキドキするハート、動きなさい！」
ポチッ
👀 （ハートが超高速でバクバクしはじめる）
🦊「……？？？」
ハートが 「バクバクバクバクバク！！！！」 と尋常じゃない速さで鼓動している。
まるで “命の危険を感じている心臓” のようだ…！！
🦊「あっっっっっ！！！！！！」（画面を両手で覆う）
どうやら、アニメーションの秒数をミスして「0.1秒」にしていた らしい…。
🦊 （修正中） 💦
💖 完成したハート
そして、先生が最後に書き加えたコード。
いよいよ、ハートが鼓動を始めます。
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.heart {
fill: red;
animation: heartbeat 1s infinite;
transform-origin: center;
transform: scale(0.5) translate(100px, 100px);
}
💡 ついに、正しく鼓動するハートが完成！
キツネ先生はタブレットを見つめ、満足そうに頷いた。
（その横で、コーヒーでダメになったノートがしなしなになっていたが、それは見なかったことにした。）
🎬 まとめ
✅ SVGアニメーションを使えば、バレンタインの贈り物を特別なものにできる！
✅ コードの力で「動くハート」を作れば、気持ちをダイレクトに伝えられる！
✅ ただし、アニメーションの秒数設定は慎重に！（重要）
キツネ先生のバレンタイン計画、果たして成功するのか…？
コメント