SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。 今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。

Bowlcutの使い方

例です。人の顔の部分は画像です。JavaScriptで文字を動かしています。

こんな感じで曲線に沿った表示もできます。

ほとんどロゴのように使えます。

そしてパスをカスタマイズできます。

複数のエフェクトを組み合わせられます。

Bowlcutを使えば単なるテキストがあっと驚くくらい印象的になります。うまく使うためにはコツも必要そうですが、アニメーションGIFで作るよりも軽く、さらに色をダイナミックに変えるような操作もできるでしょう。

BowlcutはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

pollinate/Bowlcut: A library for hairy SVG text manipulation