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サンプル