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

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

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