🐈
SVGアニメーションをすこれ
最近SVGについて少しずつちゃんと勉強し始めました。以前は暗号のように思えたxmlが今ではモールス信号くらいには理解できるようになってきています。そこで 上記神記事、GSAPを使わなくてもSVGがそもそも持っているanimateで実装できるのではと思い試してみました。
重要
まだSVGについて説明できるほどの知識量を拵えていないためコードだけ置いていくような形になります。
(コード内にコメントで所々解説というか説明書きのような物を入れてますが、誤った記述である可能性があるので極力鵜呑みにしないようにお願いします)
挙動(codepen)
追記
SVGについての基本的な部分を自分用にまとめたcodepenを公開します。自分用にまとめてる途中なので誤った記述があるかもしれません。
viewboxについて
CSSでSVGアニメーション(基本的な部分のみ)
SVGfilterの挙動サンプル
filterを切り替えて挙動を確認する場合はcssのfilter:url(#ここを対応するIDに書き換えてください)
※全filter集ではなく、filterの数とパターンと組み合わせは宇宙1個分あるので他にはどんなフィルターがあるんだろ〜って調べて面白いのあったら教えてください(feから始まるのがfilter)
Discussion