D3 Examples - wordart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> 
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    let width = 1151;
    let height = 415;
    
    let data = [];
    
    for(let i = 0; i<4800; i++) {
      let text = {
        value: "Diwaktu",
        fontSize: Math.floor(Math.random() * 30) + 10,
        x: Math.floor(Math.random() * width) - 30,
        y: Math.floor(Math.random() * height) + 10,
        r: Math.floor(Math.random() * 205) + 50,
        g: Math.floor(Math.random() * 255) + 0,
        b: Math.floor(Math.random() * 255) + 0,
        opacity: (Math.floor(Math.random() * 30) + 30) / 100,
        rotation: Math.floor(Math.random() * 360) + 0
      };
      
      data.push(text);
    }
   
    let svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
        .attr("style", "background: #ddd;");
​
        let wordart = svg.selectAll("text").data(data);
    wordart.enter()
    .append("text")
    .attr("x", function(d){return d.x;})
    .attr("y", function(d){return d.y;})
    .attr("font-family", "sans-serif")
    .attr("font-size", function(d){return d.fontSize;})
    .attr("fill", function(d){return "rgb(" + d.r + ", " + d.r + ", " + d.r + ")";})
    .attr("opacity", function(d){return d.opacity;})
    .attr("transform", function(d) {
                return "rotate(" + d.rotation + ")" 
                })
    .text(function(d){return d.value;});
    
    svg.append("text")
    .attr("x", 300)
    .attr("y", 170)
    .attr("font-family", "'Anton'")
    .attr("font-size", "72")
    .attr("style", "text-transform:uppercase")
    .attr("fill", "#000")
    .attr("opacity", 1)
    .text("Bekel siapin");
    
    
  </script>
</body>
​
    