円や多角形をランダムに配置する背景をSVGで作る その2

「円や多角形をランダムに配置する背景をSVGで作る」の続きです。
もうちょっと使いやすくなるように練習を兼ねてやってみました。

GPBG.js サンプル 1

GPBG.js サンプル 2

GPBG.js サンプル 3

GPBG.jsのJavaScriptファイル

前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。

一番簡単に使うと、こんな感じになります。

<script type="text/javascript" src="gpbg.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>

// script.js の中身
(function () {
  if (window.GPBG) {
    var gpbg = new GPBG();

    if (window.addEventListener) {
      var draw = function () {
        gpbg.draw('body');
      };
      window.addEventListener('DOMContentLoaded', draw, false);
    }

    gpbg.die();
  }
})();

die()

グローバルオブジェクトからGPBGを削除します。

draw(selector, options)

指定されたセレクタの背景画像にData URIにしたSVG画像を指定します。
セレクタにマッチする要素が複数ある場合は、一番大きなものに合わせたサイズのSVG画像になります。
オプションを指定しない場合は初期設定になります。

オプションの初期設定。必要ないものは省略可能。

{
  // 図形の頂点数（0-2: 円, 3: 三角形, 4: 正方形...）
  // ここで指定したものをランダムに表示します
  // 必ず数値の配列で指定して下さい
  apexes: [0],
  // 図形をいくつ表示するか
  count: 30,
  // 図形の最小半径
  minRadius: 20,
  // 図形の最大半径
  maxRadius: 60,
  // 図形に使う色の最小RGB値（0-255）
  minRgbRange: 160,
  // 図形に使う色の最大RGB値（0-255）
  maxRgbRange: 240,
  // 図形の塗りつぶし色の不透明度（0-1）
  fillOpacity: 0.3,
  // 図形の縁取りの太さ
  strokeWidth: 1,
  // 図形の縁取り色の不透明度（0-1）
  strokeOpacity: 0.5,
  // グレースケールにするかどうか
  grayscale: false
}

getImage(width, height, options)

直接SVG画像を取得したい場合に使います。
widthとheightは数値、オプションは前のと同じです。
ここで指定した大きさのSVG画像を得られます。

svgToDataUrl(svg)

SVG画像をData URIに変換します。
必要ならgetImage()と一緒に使います。

練習用に作ったので、中身はあんまり期待しないで下さい……。
一応、Gistにも置いてあります。