[Javascript] SVGの波メーカー

LPなどのWEBページでよく見かける、波線効果は、SVGを使って構築すると便利に簡単に仕上がります。 でも、そんな都合のいいSVGって無料で探しても転がっていません。 というわけで、良い感じの波を作れる「波メーカー」というのを作ってみました。

波メーカー

• Width

• Height

• Count

• Size

使い方

Widthは、svgの横サイズですが、画面の横サイズ一杯で表示されるので、内部数値と考えてください。 Heightも内部数値ですが、横サイズとの対比でアスペクト比を決める要素です。 Countというのは、波を何回ループさせるかという回数です。中途半端な小数点でも入力できるので、見栄えの良い値を探してみてください。 SVGのコードが表示されているので、それをHTMLにコピペするだけで、簡単に波表現ができてしまいます。 実際に画面に出す時に、fillやwidthなどの値はページ毎に切り替えてお使いください。

解説

SVGをJavascriptで扱う時は、通常のElementとは少し違う命令になります。 createElementがcreateElementNSという、NameSpace付きの設定で無ければ処理が無視されてしまいます。 合わせてsetAttributeもsetAttributeNSという命令で、扱う引数などが変わってくるので、この点をしっかりと認識していないと、まるで動きません。 あとは、SVG内部の波線は、Qコードを使って書いています。Cコードで書いてもいいのですが、こっちのほうが、扱う値が少なくて済むのでこの仕様でGoです。

応用

波線を、Webページのブロクの境目に使ったり、抜き形状として利用したり色々な使い方があります。 上下を逆さにしたり、波をinvertしたりするには、Javascriptのプログラムを書き換える必要があるので、コードが掛けない人にはハードルが高くなってしまうと思うので、余裕がある時に、ちゃんとしたツールに仕上げておこうと思います。 また、cssのclip-path命令とセットで使うと、抜き色として扱えるようになるので、より波感が出て効果的なWebページが作れるようになります。

あとがき

実は、ここ数週間のうちに、何回かこの波をWebサイトに入れるデザイン要素が求められたので、毎回頑張って自分でSVGを作っていました。 今後の事を考えて、メーカーを作っておくことにしたら、まあまあ良い感じにmakingできたので、欲が出てきて、もっと見栄えも機能も良くしたいと思うようになってしまいました。 実際にいい見栄えじゃないとデザインで使いたいと思う気が起きにくいですからね。 よくわかりますよ。 そんなわけで、とりあえずの波メーカーでした。