armollica/.block

## .block
height: 270

## README.md

      
    Raw
  

              README.md
            
          
    Using text as an svg
<clipPath>.
Doesn't work for Internet Explorer.

  
## index.html
<html>
  <head>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var width = 960,
          height = 270;

      var clipPath = d3.select("body")
        .append("svg")
          .attr("width", 0)
          .attr("height", 0)
        .append("defs")
        .append("clipPath")
          .attr("id", "text")
        .append("text")
          .attr("y", height - 25)
          .attr("textLength", width - 40 + "px")
          .attr("lengthAdjust", "spacing")
          .attr("font-family", "Arial, Helvetica, sans-serif")
          .attr("font-weight", 700)
          .attr("font-size", 300 + "px")
          .attr("font-style", "italic")
          .text("Наклон");

      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("clip-path", "url(#text)");

     var x = d3.scale.ordinal().rangeBands([-width/4, width]);

     var data = d3.range(0, 1, 0.1);

     x.domain(data.map(function(d) { return d; }));

     var rect = svg.selectAll("rect")
         .data(data)
       .enter().append("rect")
         .attr("x", x)
         .attr("y", 0)
         .attr("width", x.rangeBand() + 1)
         .attr("height", height)
         .attr("transform", "skewX(35)");

     var t0 = Date.now();
     setInterval(function() {
       var dt = (Date.now() - t0)/4000;

       hue = 300*Math.sin(dt);

       rect
        .style("fill", function(d) {
           var h = Math.round(hue * d),
               c = Math.round(100*d),
               l = Math.round(25 + 50 * d);
           return d3.hcl(h, c, l).toString();
         });

     }, 66);
    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	</head>
	<body>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var width = 960,
	height = 270;

	var clipPath = d3.select("body")
	.append("svg")
	.attr("width", 0)
	.attr("height", 0)
	.append("defs")
	.append("clipPath")
	.attr("id", "text")
	.append("text")
	.attr("y", height - 25)
	.attr("textLength", width - 40 + "px")
	.attr("lengthAdjust", "spacing")
	.attr("font-family", "Arial, Helvetica, sans-serif")
	.attr("font-weight", 700)
	.attr("font-size", 300 + "px")
	.attr("font-style", "italic")
	.text("Наклон");

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("clip-path", "url(#text)");

	var x = d3.scale.ordinal().rangeBands([-width/4, width]);

	var data = d3.range(0, 1, 0.1);

	x.domain(data.map(function(d) { return d; }));

	var rect = svg.selectAll("rect")
	.data(data)
	.enter().append("rect")
	.attr("x", x)
	.attr("y", 0)
	.attr("width", x.rangeBand() + 1)
	.attr("height", height)
	.attr("transform", "skewX(35)");

	var t0 = Date.now();
	setInterval(function() {
	var dt = (Date.now() - t0)/4000;

	hue = 300*Math.sin(dt);

	rect
	.style("fill", function(d) {
	var h = Math.round(hue * d),
	c = Math.round(100*d),
	l = Math.round(25 + 50 * d);
	return d3.hcl(h, c, l).toString();
	});

	}, 66);
	</script>
	</body>
	</html>