xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body><h4>Via svg, pattern, and <a href="https://jsfiddle.net/jwrmwxzt/7/">path</a></h4><svg width="120" height="120" viewBox="0 0 120 120" xmlns="https://www.w3.org/2000/svg" version="1.1" xmlns:xlink="https://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><svg width="120" height="120" viewBox="0 0 120 120" xmlns="https://www.w3.org/2000/svg" version="1.1" xmlns:xlink="https://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> </body><script>// SVG injection:var svg = d3.select("body").append("svg").attr("id", "d3svg") .attr("width", 120) .attr("height", 120);//Pattern injectionvar pattern = svg.append("defs") .append("pattern") .attr({ id:"hash4_4", width:"8", height:"8", patternUnits:"userSpaceOnUse", patternTransform:"rotate(60)"}) .append("rect") .attr({ width:"4", height:"8", transform:"translate(0,0)", fill:"#88AAEE" });//Shape designsvg.append("g").attr("id","shape") .append("circle").attr({cx:"60",cy:"60",r:"50", fill:"url(#hash4_4)" })</script></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js