SVGを背景に設定してみよう

今年も残りわずかとなりました。皆様いかがお過ごしでしょうか。

私は今年一年を振り返ってみますと、長くパソコンの前におりますと徐々に脈が少なくなってきて最後には気絶してしまうという、もう体が仕事を拒絶すること著しい変な持病が増えてしまいましてだいぶ仕事をセーブして、ゆるめなスケジュールで山に海にと旅行とかもかなり楽しみました。齢40を越えますとやはり片腕をくれてやるくらいでないと仕事が務まらなくなってきているなと感じます。
今ではすっかり良くなりましたが、ちょっと遊びすぎで気持ちも緩んだままです。伸びきったゴムになってしまいそうです。とっとと3Dだとかアニメーションの勉強も復活させたいなと思っている次第です。

最近、youtubeをかけながらslither.ioを遊ぶことがあるのですが、ボンジュール鈴木がフレンチポップ好きな私の直球ど真ん中で素晴らしいです。
ボンジュール鈴木はアニメのOP曲などよく手がけているようで、そのうちのひとつ、ユリ熊嵐のサイトを開いてみますと、背景がスクロールしておりまして、昔作ったサイトとかプレイステーションのレースゲームを思い出して懐かしい気がしました。

このサイトではJavaScriptでスクロールさせているようです。私も昔はJavaScriptを使っていたのですが、今回は他の方法を試してみます。

See the Pen BQMyMX by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.

これはCSS3のtranslate3dを使っています。画像はpatternifyで作りました。今回初めてCODEPENを使ったのですが、CODEPENでは画像ファイルのアップロードができないので、埋め込み画像を使うというのは良い手だと思います。

PNG画像をSVG画像に変えてみます。ニコちゃんマークをCODEPENで描いてみました。

See the Pen KNYzGg by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.

うまくできました。

SVGについて調べてみると、画像ソフトも真っ青なすごい機能が、人間が理解可能なコードに変換されていてすごく面白いです。CODEPENでは入力してすぐに反映されるので、CODEPENを使って絵を描くのは面白いかもしれません。

下にCODEPENでSVGコードを直に数値入力して絵を描くという練習をしたものを置いておきます。画像編集ソフトは使っていません。CODEPENのみです。ええ。やはり絵が大きくなってくるとグラデーションの変更とかにいちいち入力画面をスクロールして該当箇所を探さないといけないので辛いものがあります。やはり画像編集ソフトは偉大です。

See the Pen xRBKMQ by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.

とはいえ、ちょっとしたシルエットアイコンなどを作成するときにいちいち画像編集ソフトを立ち上げるのは時間がもったいないので、これから少しSVGとCODEPENを組み合わせたアイコン作成に取り組んでみたいと思います。

 なにかコメントをどうぞ