SVGでキラキラをつくりたい（願望）
この記事は SVG Advent Calendar 2014 - Adventar の参加記事です。前回は MNukazawa さんによる SVG画像の分割スクリプトをPythonに移植した話 でした。なんとご自分でフォントを制作されている方とのこと。にわかフォントマニアの自分には歓喜ものです。フォントとSVGの関係といえばアイコンフォントくらいしか知りませんでしたが、このような活用もされているのですね。こちらの記事は専門的で難しかったため、個人的には #LOVEFONT の記事 のほうに食指が動いてしまいました。ルーンフォント、魔法陣。制作意欲が湧いてきますね！応援しています。
どんなキラキラをつくりたいのか
さて、肝心の自分の記事ですが、タイトルの「キラキラ」とは↓コレのことです (Flash)。
投稿者の nitoyon さんを昔から追っているのですが、この作品を初めて見た時、感動したのです。投稿されたのはなんと5年前。今でも覚えているくらいには印象的だったわけです。別に何の変哲もないパーティクルではありますが、このキラキラ感は昔こどもの頃に買ってもらったディズニーランドのステッキに似ていたからです。ステッキには球体が付いていて、中には液体とキラキラした何かが入っていました。それを振ると光に反射してキラキラと輝くのです。あれが好きだったんだよなあ。画像検索して見つけてきた中でイメージに近いものはこれです。
今どきの技術でつくりたい
昔からインタラクティブなものが好きで、Flash に手を出したのもそれが理由でした。作品は出先で人に見せたいので、iPhone/iPad で見せられるようにしたいのです。Flash ではそれができないので、WebGL や Canvas 、SVG を使ってつくりたいと考えました。しかし、上記の作品は今改めて見てみたら 3D 。しかもパーティクルなので Canvas のほうが適切なのでは…など不安がよぎるのですが、やっぱり DOM 要素としてクリックするとかイベントをくっつけて遊びたいので、なんとかできないかなーといったところです。
- 適切な API の選択 (WebGL、Canvas、SVG) - Microsoft Developer Network
- D3.js, Three.js and CSS 3D Transforms — delimited
願望のまま進められない
アドベントカレンダーに参加した勢いでなんとかカタチにできないかなーとは思ったものの、仕事にプライベートに忙しく、結局コードを書く余裕がありませんでした（言い訳）。文字通り願望で終わってしまいました。ここまで読み進んでこられて期待された方には申し訳ないです。ただ自分としては、ずっとモヤモヤと抱えていたものをひとまず願望という形で残せたのは嬉しく思います。せっかくなので、SVG つながりで D3.js や SVG についてのリンクを個人的にまとめて公開しているページを案内して締めくくらせていただきます。結構な頻度でメンテしてますよ。ちなみに、上部緑色の背景画像も SVG です。あなたのお役に立てば幸いです。
Next
翌日の 12月23日 の記事は登録者がいないようです。明日もしまた続きができたら自分が登録しようかな。 12月24日は t_motooka さんの「手入力のSVGでクリスマスツリーを描こう☆」です！クリスマスツリー楽しみです♪
