つぶデコジェネレーターで以下のようなネオン風タイトルを作成しました
タイトルには青空文庫で公開されている夏目漱石の名作「吾輩は猫である」を使っています。
上記のようなネオン風タイトルが出力されるSVGのソース内容を解説していきます。
SVGソース内容
<!-- SVGフォントにRounded M+(http://jikasei.me/font/rounded-mplus/about.html)を使用しています -->
<!-- Licensed under M+ FONTS LICENSE(http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/index.html#license) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewbox="0 0 506 253" style="enable-background:new 0 0 506 253;" xml:space="preserve" width="506" height="253" xmlns:svgjs="http://svgjs.com/svgjs">
<style type="text/css">
@font-face {font-family:roundedM;src:url("data:application/x-font-woff;base64,d09GRgABAAAADB1MAA4AAAAYXMwAAQAAAAAAAAAAAAAAAAAAAAAAAAA...")}
.gauss2{filter:url(#AI_gauss_2);}
.gauss4{filter:url(#AI_gauss_4);}
.gauss6{filter:url(#AI_gauss_6);}
.st1{fill:#FF7BAC;}
.st2{font-family:roundedM;font-size:64.6692px;}
.st5{fill:#FFFFFF;}
</style>
<filter id="AI_gauss_2">
<fegaussianblur stddeviation="2"></fegaussianblur>
</filter>
<filter id="AI_gauss_4">
<fegaussianblur stddeviation="4"></fegaussianblur>
</filter>
<filter id="AI_gauss_6">
<fegaussianblur stddeviation="6"></fegaussianblur>
</filter>
<rect width="506" height="253" />
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="text-1 st5 st2">吾輩は猫である</text>
</svg>
※上記コードの@font-faceのsrcはサンプルデータです。base64にエンコードしたデータの一部しか含まれていません。
styleとfilterタグ
<style type="text/css">
@font-face {font-family:roundedM;src:url("data:application/x-font-woff;base64,d09GRgABAAAADB1MAA4AAAAYXMwAAQAAAAAAAAAAAAAAAAAAAAAAAAA...")}
.gauss2{filter:url(#AI_gauss_2);}
.gauss4{filter:url(#AI_gauss_4);}
.gauss6{filter:url(#AI_gauss_6);}
.st1{fill:#FF7BAC;}
.st2{font-family:roundedM;font-size:64.6692px;}
.st5{fill:#FFFFFF;}
</style>
<filter id="AI_gauss_2">
<fegaussianblur stddeviation="2"></fegaussianblur>
</filter>
<filter id="AI_gauss_4">
<fegaussianblur stddeviation="4"></fegaussianblur>
</filter>
<filter id="AI_gauss_6">
<fegaussianblur stddeviation="6"></fegaussianblur>
</filter>
フォントは自家製RoundM+を使用し、base64にエンコードしています。
base64にエンコードする方法は以下を参考にしてください。
ぼかし効果
3〜5行目でfilterプロパティを指定し、10〜18行目までのぼかし要素のidをリンク先として指定します。
<fegaussianblur stddeviation="2"></fegaussianblur>
「fegaussianblur」はぼかし効果を出します。属性「stddeviation」にx方向、y方向のぼけの長さを指定します。一つしか指定しない場合はx、y両方向の長さを指定したことになります。
カラーとフォント
6行目はぼかす色を指定。7行目はフォントの種類とフォントサイズ。8行目は最前面テキストのカラーです。
rectとtextタグ
<rect width="506" height="253" />
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="text-1 st5 st2">吾輩は猫である</text>
1行目で背面の黒枠を指定します。
2行目が再背面のテキスト、8行目が最前面のテキストです。
最背面からクラス属性に「gauss6」「gauss4」「gauss2」を指定し徐々にぼかしの長さを短くしています。
以上、ネオン風タイトルのSVGソース内容を解説しました。
以前紹介した以下の記事を参考に文字ジェネレーターなどで使用してみてください。
イラストレーターでタイトルロゴを作成!SVG文字ジェネレーターを作る方法
コメントを残す