SVG animate / ローディングアニメーション

■ 01. Illustrator から書きだした svg を imgタグでそのまま読み込み

svgサンプル

■ 02. Illustrator の svg の記述を軽量化

svg-simple-codeサンプル

■ 03-01. svg animateA 01 - 一部分を左から右へ移動、無限ループ

svg-moveA01サンプル

■ 03-02. svg animateA 02 - 全体を左から右へ移動01 （はみ出さない）

svg-moveA02サンプル

■ 03-03. svg animateA 03 - 全体を左から右へ移動02 （はみ出さない）

svg-moveA03サンプル

■ 04-01. svg animateB 01 - 左右移動01 （一定速度）

svg-moveB01サンプル

■ 04-02. svg animateB 02 - 左右移動02 （ease-out）

svg-moveB02サンプル

■ 04-03. svg animateB 03 - 左右移動03 （ease-in-out）

svg-moveB03サンプル

■ 05-01. svg animateC 01 - keyTimes と Value制御01 （03-03 と同じ動き）

svg-moveC01サンプル

■ 05-02. svg animateC 02 - keyTimes と Value制御02 （休みなし）

svg-moveC02サンプル

■ 05-03. svg animateC 03 - keyTimes と Value制御03 （一定速度、04-01 とほぼ同じ動き）

svg-moveC03サンプル

■ 05-04. svg animateC 04 - keyTimes と Value制御04 （ease-in-out、04-03 とほぼ同じ動き）

svg-moveC04サンプル

■ 06-01. svg animateTransform rotate01 （単純に回転）

svg-rotate01サンプル

■ 06-02. svg animateTransform rotate02 （角度と時間を区切って回転）

svg-rotate02サンプル

■ 06-03. svg animateTransform rotate03 （角度と時間を区切って回転）

svg-rotate03サンプル