SVGで波打つ文字を「描いて」みる
記事冒頭ですでにやっていますが、
って感じで、波打つ文字を表現する事ができます。
「描いて」というのは、これがCSSではなくSVGによる描画であり、「画像」扱いとなるからだったりします。
が、そのくせ、文字をテキストとして選択できてしまう、という面白味もあります^^
コード
はてなブログ用に、前後に[]を付与したコード
[]<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 200 40"><defs><path id="pt1" d="M 4,35 Q 60,5 100,25 Q 140,40 195,15"></path></defs><use x="0" y="0" xlink:href="#pt1" stroke="pink" stroke-width="3" fill="none"></use><text style="font-size: 10px;" stroke="blue"><textpath xlink:href="#pt1" startoffset="0%">あいうえおかきくけこさしすせそたちつてと</textpath></text></svg>[]
※はてなブログ以外で使用する場合は、最初と最後の[]は不要です。
コード中、赤太字で書いた部分は、「帯の色・文字サイズ・文字の色・中に入れる文字」で、お好みで変更して使用できます^^
半年ほど前に、さらっとやってたネタなんですけどねｗ
ＳＶＧに手を出したばかりの頃に、ちょっとだけやった事はありました。
今回、使ってみたいという方がおられましたら、使いやすいように、と抜粋したものとなります。
ざっくりと「波打つ文字」で検索をかけてみると、ExcelやWordについているワードアートや、画像編集ソフトを使った方法が出てきます。
が、SVGを使う事で、画像ファイルに頼らなくてもブログ上で波打つ文字を表現でき、この方法であれば中の文字を変えたい時も容易に変更できますね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
