HTMLの世界では主に左から右のテキストと、四角い枠の画像（別な形であっても背景が透明というだけで）で構成されているように見えます。だから角丸であったり、形が異なるものが目を引くようです。 MagicCirclesを使うと円を使った多彩な表現が手軽に実現できるようになります。使い方を覚えるとWeb上での表現力が増しそうです。

MagicCirclesの使い方

サンプルです。こんな細かいグラフィックスが描けるのです。しかもアニメーションします。

色を変えるのも簡単です。

例えばこんな感じでチェーンメソッドを使って表現を指定できます。

magic.cast()
  .space(50)
  .text(25,"You're the")
    .color('blue')
  .backspace(25)
  .ring(25)
    .color('useNone')
    .on('mouseover',function(target){
      alert("Ring now dog!")
   })

グラフィックスはSVGで描かれますのでズームしてもきれいなままです。さらにアニメーションさせたり、マウスアクションと連携したりするのも簡単でしょう。アイコン代わりに使ったりすることもできそうです。

MagicCirclesはJavaScript製のオープンソース・ソフトウェア（BSD License）です。

danielstern/MagicCircles