<!-- This svgs just have historical / explanative values. -->

<h4>Via svg, pattern, and <a href="http://jsfiddle.net/jwrmwxzt/7/">path</a><h4>
<?xml version="1.0" ?>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
<path fill="black"d="M5,0 10,10 0,10 Z" />
</pattern>
</defs>
<circle cx="60" cy="60" r="50" fill="url(#Triangle)" />
</svg>

<h4>Via svg, pattern, and rectangles<h4>
<?xml version="1.0" ?>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="hash4_4" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="4" height="8" transform="translate(0,0)" fill="orange"></rect>
</pattern>
</defs>
<circle cx="60" cy="60" r="50" fill="url(#hash4_4)" />
</svg>

<h4>Via svg, pattern, and d3<h4>

------------ js + d3js

// SVG injection:
var svg = d3.select("body").append("svg").attr("id", "d3svg")
.attr("width", 120)
.attr("height", 120);
//Pattern injection
var defs = svg.append("defs")
var pattern = svg.append("pattern")
.attr({ id:"hash4_4", width:"8", height:"8", patternUnits:"userSpaceOnUse", patternTransform:"rotate(-45)"})
.append("rect")
.attr({ width:"4", height:"8", transform:"translate(0,0)", fill:"#88AAEE" });

//Shape design
svg.append("g").attr("id","shape")
.append("circle")
.attr({cx:"60",cy:"60",r:"50", fill:"url(#hash4_4)" })

----- css

svg { border : 1px solid #88AAEE; background-color: #FEE; }
h4 { color: #777;}

#diagonal-stripe-2

ex:
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzInLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>

Une liste de malade !!! :)