背景で使用するボーダーやドット、ストライプは今まではPhotoshopでパターンとして切り出していましたが、なんとSVGで作成できるスクリプトを発見しました。
スマートフォン対応などで高解像度の画像を作成してからコードで縮小するという作業がなくなり、画質の問題もこれだけでクリアできるのでとても便利です。

公式サイトを参考にデモを作成しました。

SVGとは？

SVG（Scalable Vector Graphics）はベクター画像を表示する技術です。
JPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。
そのため、複雑な図形の作成に向いています。

Textures.js

Textures.js
github

実装方法

まずgithubからtextures.min.jsとd3.min.jsをダウンロードします。d3.min.jsはデータに基づいてドキュメントを操作するためのJavaScriptライブラリです。
もちろんjQueryの呼び出しも忘れずに。

<script src="d3.min.js" charset="utf-8"></script>
<script src="textures.min.js" charset="utf-8"></script>

HTML

<div id="example_1"></div>

javascript

<script type="text/javascript">
    var w = 150, //横幅
        h = 150; //縦幅
    var svg = d3.select("#example_1")
        .append("svg")
        .attr("width",w)
        .attr("height", h);
    var t = textures.lines()
        .stroke("White") //パターンの線の色
        .thicker();
    svg.call(t);
    svg.append("circle")
    .attr({
        "cx": w/2, //x軸の半径
        "cy": h/2, //y軸の半径
        "r": 60 //丸さ
    })
    .style({
        "fill": t.url(),
        "stroke": "White", //円周の線の色
        "stroke-width": 2 //円周の線の太さ
    });
</script>

上記はサークルを作成する場合のコードです。
公式サイトを参考にデモを作成しました。

複数の図形を呼び出す場合

この場合は最初に代入する型を用意し、そこに値を代入する手法をとった方がソースが短くなりスッキリします。

HTML

<figure id="example_2" data="example_2">
   <div class="box"></div>
</figure>

javascript

<script type="text/javascript">
    //ベース呼び出し
    var box = function(id, t) {
      var figure = d3.select("[data="+id+"]");
      var box = figure.select(".box");
      var svg = box.append("svg")
        .attr('width', 140)
        .attr('height', 140);
      svg.call(t);
      svg.append("path")
          .attr("d", "M 0 0 L 0 140 L 140 140 L 140 0 Z")
          .style({
            "fill": t.url()
          });
      figure.transition().duration(1000).style("opacity",1);
    }

    //値
    var t = textures.lines();
    box("example_2",t);
</script>