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使うのがいいですよ。てか、最初のアニメーション設計にやっぱり欲しいですな。フリーで匹敵するものがあればいいのですが。

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

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からフォントを選んできました。

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