【簡単!】イラストからSVGアニメーションを作る

WEBサイトにちょっとした動きを加えたい時に便利なサイトをご紹介します。

Vivus Instant
は、Illustratorなどで作成した画像を
アニメーションに変換してくれるWEBサイトです。
https://maxwellito.github.io/vivus-instant/

svgデータはcssでbackgroundとして指定できるので、
background: url(ファイル名);
で簡単にサイトに導入できますよ!

※注意:
アニメーションできるのはパスで書いたもののみです。
アウトライン化されたものは動きません。

以下のサイトも参考にどうぞ!
線を引くSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く
https://coliss.com/articles/build-websites/operation/work/lightweight-svg-animation-vivus.html

  • URLをコピーしました!
目次