「CSS/SVG」カテゴリーアーカイブ

Pure CSS Cat

CSS/SVG, これまでの実績

2年前にCSSのみで作った猫のアニメーションです。新しくなったWordPress5.0のエディタで書けるのか実験がてら。

このシリーズ作りたかったけど、もう2年も経つのかー。耳にマウスカーソルを当てるとぴこぴこするとか、そういうの作るのも楽しいです。

SVGでジャンプする雀を作った

CSS/SVG

SVGのアニメーションの検証。IEでは動かないみたい。JavaScriptでアニメーション作るのがやっぱり一番なのかな。jQueryでのアニメーションは自分でライブラリも作って、ゲームの仕事で使ったことあるので得意ですよ。

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

雀は最初はCODEPENで描き始めましたがやっぱりパスの編集がつらすぎ。おとなしくBoxySVGを使って描きました。アニメーションはコードで制御するしかない。SVGにはSMILが組み込まれていて、これでアニメーションができるのですが、他にもCSSやJavaScriptでもアニメーション制御できます。とりあえずSMILの書き方でやってみました。

すごいアニメーションをCODEPENで発見

See the Pen Alex the CSS Husky by David Khourshid (@davidkpiano) on CodePen.

これ、なんとCSSだけで出来ています。これは完全に変態の域。でもIE Egdeでみると最初は問題ないですが次第に壊れていくみたい。

アニメーションはブラウザ・機種による違いがけっこうあって、厳密に同じ見え方にするのは難しい。Flash使うのがいいですよ。てか、最初のアニメーション設計にやっぱり欲しいですな。フリーで匹敵するものがあればいいのですが。

クリスマスぽい背景

CSS/SVG

こんにちわ。今日はクリスマスイブということで、クリスマスぽい背景をつくって見ました。

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

まず雪の結晶をCODEPENで描いていきます。こういう幾何学的ぽい図形は、ツールを使えばコピーしながら少しづつ反転、回転させていけばいいので割と楽なのですが、点を一つづつ数値入力するとなると地獄です。左右対称にするだけで、前の線の点から計算しながらひいていくわけで、すっかり心折れて諦めました。
割とシンプルそうなSVG専用の図形ツールであるBoxySVGをインストールして結晶を描きました。

ツールから保存したSVGファイルをテキストエディタで開き、background-imageにdata:image/svg+xml,の後に続けて流し込みます。改行があるとエラーになるので削除、またダブルクォートはCSSで使っているのでシングルクォートに変換しました。

スクロールする雪の背景を２つ重ねて、奥ゆきをだすようにしました。

３〜４個の雪をばらした画像にしておけば縦横整列しているように見えなくて良いのですが、結晶を描くのに時間をかけすぎたので少しの手間を惜しみたい気分です。なんとなくそういうデザインだと思い込ませる作戦にします。

CSS3の背景グラデーションで画面に赤と緑の領域を作ります。

文字はgoogle fontからフォントを選んできました。

といったところで今日はおしまい。

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

CSS/SVG

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

私は今年一年を振り返ってみますと、長くパソコンの前におりますと徐々に脈が少なくなってきて最後には気絶してしまうという、もう体が仕事を拒絶すること著しい変な持病が増えてしまいましてだいぶ仕事をセーブして、ゆるめなスケジュールで山に海にと旅行とかもかなり楽しみました。齢４０を越えますとやはり片腕をくれてやるくらいでないと仕事が務まらなくなってきているなと感じます。
今ではすっかり良くなりましたが、ちょっと遊びすぎで気持ちも緩んだままです。伸びきったゴムになってしまいそうです。とっとと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を組み合わせたアイコン作成に取り組んでみたいと思います。