動きが面白い【SVGのモーションアニメーション】スニペットまとめ

今回はSVGのモーションアニメーションについて参考スニペットをまとめてみました。

SVG Animation - Running (with light saber)

SVGモーションアニメで人型を動かすのは難しいので参考になります。 さらに武器(ライトセーバー等)を持たせることもできます。

happy new year 2020

クリスマスのネオンのようなキレイなSVGアニメーションです。

【anime.jsが使われています。】

404 error page

404エラーページ風SVGアニメーション。 イラストの質感や、ライトの動き、真ん中の0のアニメーションが面白いです。

【anime.jsが使われています。】

#1 - Coffee Machine - SVG animation with CSS3

コーヒーメーカーのキャラクターのようなSVGアニメーション。 細かい動きまで表現されていて面白いですね。

CSSでアニメーションが実装されています。

#codevember 2016 - 01 - SVG Animation

CSSで実装されたSVGアニメーション。 イラストからアイデアまでお洒落です。

City Intro Card SVG animation - Dribbble inspired

動きは大きくないですが、雲の箇所にSVGアニメーションが効果的に使われています。実際にアプリとかでありそうですね！

SVG Animation with Scale, Rotation and Draggable

メインビジュアルとかでも使えそうなクオリティです。 ドラッグで動かすこともできます。

【TweenMax、Draggable.js、その他プラグインが使われています。】

Random SASS function on SVG Animation

CSS(SASS)で実装されたSVGアニメーションです。 オシャレなイラストに加えて要所のSVGアニメーションが良いですね。

Bow and Arrow SVG Animation with GSAP

ほんとの弓矢のような動きがいいSVGアニメーションです。

【jQuery、TweenMaxが使われています。】

Code School - SVG Animation

SVGのライン描写からアニメーションがある点が参考になりますね。

【jQueryが使われています。】

最後に(SVGアニメーションデモ)

自分でも、練習のためSVGのパスを使用したアニメーションを作成してみました。

SVGのパスに沿ってアニメーションします。プラグインに【anime.js】を使用しています。

素材は 以下から。

undraw.co

unDraw - Open source illustrations for any idea

The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

hibi-update.org

anime_practice