🐈

SVGアニメーションをすこれ

2022/08/01に公開約900字

最近SVGについて少しずつちゃんと勉強し始めました。以前は暗号のように思えたxmlが今ではモールス信号くらいには理解できるようになってきています。そこで

https://zenn.dev/kalubi/articles/ddb36051b3a0f0
上記神記事、GSAPを使わなくてもSVGがそもそも持っているanimateで実装できるのではと思い試してみました。

重要

まだSVGについて説明できるほどの知識量を拵えていないためコードだけ置いていくような形になります。
(コード内にコメントで所々解説というか説明書きのような物を入れてますが、誤った記述である可能性があるので極力鵜呑みにしないようにお願いします)

挙動(codepen)

追記

SVGについての基本的な部分を自分用にまとめたcodepenを公開します。自分用にまとめてる途中なので誤った記述があるかもしれません。

viewboxについて

CSSでSVGアニメーション(基本的な部分のみ)

SVGfilterの挙動サンプル

filterを切り替えて挙動を確認する場合はcssのfilter:url(#ここを対応するIDに書き換えてください)
※全filter集ではなく、filterの数とパターンと組み合わせは宇宙1個分あるので他にはどんなフィルターがあるんだろ〜って調べて面白いのあったら教えてください(feから始まるのがfilter)

SVG mask基本

SVGで書くanimateの基本

Discussion

ログインするとコメントできます