20の素晴らしいSVGアニメーションの例

スケーラブルベクターグラフィックス（SVG）は、XMLで記述された画像形式です。 SVGを使用すると、2次元のスケーラブルグラフィックスをコーディングできます。 次に、CSSとJavaScriptでそれらを実装および変更できます。

SVGでは、ベクターシェイプ（すべての方向とシェイプの直線と曲線）、画像、テキストの3種類のグラフィックスを使用できます。 そのさまざまな機能のために、Webデザイナーは複雑なアニメーションを作成するためにSVGに目を向けます。 インストールが簡単で、サイズを変更しても品質が低下することはなく、サードパーティのアプリが機能する必要もありません。

アニメーションはまだ人気が高まっているので、ほとんどの人はそれらに精通していません。 この記事では、このフォーマットの可能性を示す20の素晴らしいSVGアニメーションに焦点を当てます。

1.キットトンによる医療SVGアイコン

この暖かく滑らかなアニメーションは、健康関連のWebサイトに最適です。 さまざまなスレッドをリストしている間、画像は微妙に表示されます。 救急車や原子が組み立てられ、目が開き、医者が飛び出します。 このアニメーションは、SVGのすべての楽しさとダイナミズムを示しています。

リンク

2.SeanMcCafferyによるホバー

インタラクティブなWebサイトに配置できるユニバーサルアニメーション。 ホバーしたときの境界線の微妙な外観は、満足のいく感触を残し、リンクをクリックするように促します。

リンク

3. Nikolay Talanovによるプルダウンして更新（紙飛行機）

通常、ページを「プルダウン」するとページが更新されます。 このアニメーションは、これを新しいレベルに引き上げます。 引き下げて離すと、紙飛行機が空に飛び出します。 訪問者にアプリを頻繁に更新してもらいたい場合は、このようなアニメーションを追加することを検討する必要があります。

4. Diaco M.Lotfollahiによって続けてください

ScalingVectorの可能性を示すSVGアニメーション。 人体の滑らかで正確な動きは催眠術をかけています。

リンク

5.HTML5ビデオに追加されたSVGフィルター

GoogleChromeチームのPaulIrishは、SVGがベクターグラフィックス以外のコンテンツを変更する方法を検討しました。 彼はCSSとSVGを組み合わせて素晴らしいビジュアルフィルターを作成し、SVGアニメーションが既製のビデオに追加できることを示しました。

リンク

6.ジグソーパズル

SVGアニメーションで素晴らしいインタラクティブなジグソーパズルを作ることができます。 この例では、多くの写真の1つを選択して、それがパズルの多くの小さなピースにどのように分解されるかを確認できます。 あなたもそれを再構築することができます！

リンク

7. PatrickYoungによるライナー勾配

あなたがネオンライトと美しいフォントに興味があるなら、あなたはこのアニメーションを楽しむでしょう。 この作品は、鮮やかなアニメーションのために動く線を必要とせず、素晴らしいフォントとグラデーション効果のある適切なカラーコードだけを示しています。

リンク

8.jjperezaguinagaで旅行しよう

世界の人気のランドマークを中心に回転する2機の飛行機と熱気球。 このアニメーションはカラフルで、楽観的で、驚異的です。 SVGに精通している場合にできることはすべて表示されます。

リンク

9. MohamadMohebifarによる時計

現在の時刻を示す移動時計の単純なSVGアニメーション。 ポインターのなだめるような動きとミニマルなデザインは、このアニメーションに驚異的です。

リンク

10. Luigi DeRosaによるアニメーションアイコン

これらのアイコンにカーソルを合わせると、アニメーションがトリガーされます。これはシンプルですが効果的です。 印象的なアニメーションアイコンを作成するために不思議に思う必要がないことがわかります。

11. ChrisGannonによるSVGのすべてのデバイス

私たちが最も創造的な方法で使用するすべてのスマートデバイスを網羅するワンテイクアニメーション。 デスクトップはラップトップに、ラップトップはタブレットに、そしてスマートフォンに変わります。

リンク

12.クリス・ガノンによる滝

クリスガノンによる別のもの、これは泡立つ滝の底のきちんとしたデモンストレーションです。 水の動きはきちんとしていて、水しぶきの小さな滴がアニメーションの境界を離れて、すべてがよりリアルに見えるようになっているのを見ることができます。

リンク

13.ブレイクボーエンによる植物発電機

今、これは別のものです。 「作成」ボタンをクリックすると、植物が成長しているのがわかります。 ただし、クリックするたびに、さまざまなパターンが形成されます。

リンク

14.ハミッシュウィリアムズによるクリック可能なアイコン

クリックするとアニメーションをトリガーする別のインタラクティブSVG。 これは、クリックすると「送信」アニメーションを開始します。

リンク

15.MarcoBarríaによる新しいケーキ

ケーキをレイヤーごとに作成する様子を示す興味深いアニメーション。 バースデーカードに適した印象的なSVGアニメーションです。

16.クリス・ガノンによるシュレッダー

シュレッダーを楽しむなら、機械でシュレッダーを無制限に連続して描くアニメーションをお楽しみいただけます。

リンク

17.GRAYGHOSTによる低ポリライオン

これは、ライオンの頭がアニメーション化されたポリゴンの形で現れたり消えたりすることを描いた、驚異的なイラストとアニメーションです。

リンク

18.リーラによる砂時計ローダー

SVGのみを使用するもう1つの効果的なアニメーション。 5秒ごとに、砂時計が上下逆​​さまになり、新しいサイクルが始まります。

リンク

19.サラ・ドラスナーによるレスポンシブ・カウ

これは面白いインタラクティブアニメーションで、困惑した宇宙飛行士が牛を見ている間、牛をクリックして月の周りにドラッグすることができます。

20.Domanyによる学生

熱心な学生が学ぶ準備ができているようです！ 本のページがきれいにめくられている素晴らしいアニメーションです。 学生からのまばたきはありませんが、これはこのリストを締めくくるのに完全に整頓されたアニメーションです。

リンク

あなたの番

このリストに含まれていないお気に入りのSVGアニメーションは何ですか？ 以下のコメントであなたの選んだものを共有してください！