こんにちは、ワタナベです。
今回はSVGアニメーションの備忘録です。
SAMPLE
See the Pen Untitled by Akiho (@wcaotdaenpaebne) on CodePen.
ループする波を2パターン作ってみました。
作り方
使用したい波は「波線・曲線SVGジェネレーター」というサイトを使用すると簡単です。
線の場合は波の数は1つ、面の場合は2つで作成するのがポイントです。
次に、↑で作ったSVGをSAMPLEのCSSに当てはめて、それぞれの数値を作ったSVGに合わせて変更すれば簡単にループする波の出来上がりです。
（「URL-encoder for SVG」というサイトでSVGをCSSに変換することもできます。）
線と面で少しやり方が変わりますが下記だけ覚えておけばとりあえず大丈夫だと思います。
・波は2周期描く
・viewBoxは2倍（960幅）
・translateは1周期分（480px）
※（）内数値はSAMPLEのものです。
▼参考記事（THANKS！）
簡単に出来上がりですと書きましたが、サンプルとは別のオリジナルの波を作りたいとなると慣れてないと結構大変でした(;^ω^)
それではまた次回。
ご閲覧ありがとうございました。
