D3 Examples - Motif

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <img src="motif.svg" />
  <script>
    // Adapted from https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
    function basicRandomColor() {
    return colorFromRGB(randomRGB())
  }
    
  function componentToHex (rgb) { 
    var hex = Number(rgb).toString(16);
    if (hex.length < 2) {
         hex = "0" + hex;
    }
    return hex;
    }
    
  function randomRGB() {
    return {
      r: Math.round(Math.random() * 255),
      g: Math.round(Math.random() * 255),
      b: Math.round(Math.random() * 255)
    }
  }
    
  function colorFromRGB(rgb) {
    return '#' + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
  }
    
  function randomColor() {
    var golden_ratio_conjugate = 0.618033988749895;
    var h = Math.random();
​
    var hslToRgb = function (h, s, l){
        var r, g, b;
​
        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }
​
            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }
​
        return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
    };
​
    return function(){
      h += golden_ratio_conjugate;
      h %= 1;
      return hslToRgb(h, 0.5, 0.60);
    };
  };
​
    var svg = d3.select("body").append("svg")
      .attr("width", "100%") 
      .attr("height", "100%")
    var background = svg.append("rect")
    background
        .attr("x", 0)
      .attr("y", 0)
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "white")
    
    var fillColor
    var bgColor
    var strokeColor
    
    var baseColor
    
   
​
    
​
  </script>
</body>
​
    