SVGで使える便利なサイト

サイト制作においてSVGを使用する機会が多く増えてきました。

アニメーションも非常に軽快で使用しやすいものなので、効果的に使用すれば、サイトのデザインを魅力的に見せることが可能です。

そこでSVGアニメーションを使用で便利なサイトを紹介します。

https://maxwellito.github.io/vivus-instant/

SVG画像を、ドラッグ&ドロップでアップロードして、左側のメニューでアニメーションの設定をするだけで簡単に調整が可能です。

メニュー項目のAnimation typeでアニメーションのタイプや、描く順番、時間や、ループの設定が可能です。

項目の設定し、SVGファイルをダウンロードしたら
CSSで動かす設定をしてあげれば、OKです。

 path{
　　fill:#333;
　　stroke:#333;
　　stroke-dasharray: 1000;
　　stroke-dashoffset: 0;
　　stroke-width: 1;
　　-webkit-animation: stroke 4s ease-in 0s;
　　animation: stroke 4s ease-in 0s;
}


 @-webkit-keyframes stroke {
　　0% {
　　　　stroke-dashoffset: 2000;
　　　　fill:transparent;
　　}
　　40% {
　　　　stroke-dashoffset: 2000;
　　　　fill:transparent;
　　}
　　50% {
　　　　fill:transparent;
　　}
　　100% {
　　　　stroke-dashoffset: 0;
　　　　fill:#0060e6;
　　}
}

文字をアウトライン化したデータや複数の線画をアニメーションさせたいけれども、設定が難しいなんて方も使用してみてはどうでしょうか。