veltman/.block

## .block
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    Pixelating the contents of an SVG with a <canvas> overlay.
See also: Gradual pixelation

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    svg, canvas {
      position: absolute;
    }
  </style>
</head>
<body>
<svg width="960" height="600"></svg>
<canvas width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var svg = d3.select("svg"),
    path = d3.geoPath(),
    canvas = document.querySelector("canvas"),
    offscreen = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    offscreenContext = offscreen.getContext("2d"),
    img = new Image(),
    width = offscreen.width = canvas.width,
    height = offscreen.height = canvas.height,
    colors = ["#6af09c","#f362ba","#f2ef5f","#6dd4e8","#e39460"],
    grain = 64,
    up = true;

context.msImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

d3.json("https://d3js.org/us-10m.v1.json", function(err, us){

  const neighbors = topojson.neighbors(us.objects.states.geometries),
        features = topojson.feature(us, us.objects.states).features;

  // Greedy color selection
  features.forEach(function(d,i){

    d.properties.color = colors.filter(function(c){
      return neighbors[i].every(n => features[n].properties.color !== c);
    })[0];

    colors.push(colors.shift());

  });

  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "#fff");

  svg.selectAll("path")
    .data(features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("fill", d => d.properties.color)
    .attr("stroke", "none");

  svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
    .attr("d", path)
    .attr("class", "mesh")
    .attr("stroke-width", "1")
    .attr("stroke", "#fff")
    .attr("fill", "none");

  render();

});

function render() {
  var serialized = new XMLSerializer().serializeToString(svg.node()),
      blob = new Blob([serialized], {type: "image/svg+xml"}),
      url = URL.createObjectURL(blob);

   img.onload = pixelate;
   img.src = url;

}

function pixelate() {

  var dx = Math.round(width / grain),
      dy = Math.round(height / grain),
      delay = 25;

  canvas.style.display = "block";
  context.clearRect(0, 0, width, height);
  offscreenContext.clearRect(0, 0, width, height);
  offscreenContext.drawImage(img, 0, 0, width, height, 0, 0, dx, dy);
  context.drawImage(offscreen, 0, 0, dx, dy, 0, 0, width, height);

  up ? grain-- : grain++;
  if (grain === 64 || grain === 1) {
    up = !up;
    delay = 500;
  }

  if (grain === 1) {
    canvas.style.display = "none";
  }
  setTimeout(pixelate, delay);

}

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<style>
	svg, canvas {
	position: absolute;
	}
	</style>
	</head>
	<body>
	<svg width="960" height="600"></svg>
	<canvas width="960" height="600"></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	path = d3.geoPath(),
	canvas = document.querySelector("canvas"),
	offscreen = document.createElement("canvas"),
	context = canvas.getContext("2d"),
	offscreenContext = offscreen.getContext("2d"),
	img = new Image(),
	width = offscreen.width = canvas.width,
	height = offscreen.height = canvas.height,
	colors = ["#6af09c","#f362ba","#f2ef5f","#6dd4e8","#e39460"],
	grain = 64,
	up = true;

	context.msImageSmoothingEnabled = false;
	context.mozImageSmoothingEnabled = false;
	context.webkitImageSmoothingEnabled = false;
	context.imageSmoothingEnabled = false;

	d3.json("https://d3js.org/us-10m.v1.json", function(err, us){

	const neighbors = topojson.neighbors(us.objects.states.geometries),
	features = topojson.feature(us, us.objects.states).features;

	// Greedy color selection
	features.forEach(function(d,i){

	d.properties.color = colors.filter(function(c){
	return neighbors[i].every(n => features[n].properties.color !== c);
	})[0];

	colors.push(colors.shift());

	});

	svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.attr("fill", "#fff");

	svg.selectAll("path")
	.data(features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("fill", d => d.properties.color)
	.attr("stroke", "none");

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("d", path)
	.attr("class", "mesh")
	.attr("stroke-width", "1")
	.attr("stroke", "#fff")
	.attr("fill", "none");

	render();

	});

	function render() {
	var serialized = new XMLSerializer().serializeToString(svg.node()),
	blob = new Blob([serialized], {type: "image/svg+xml"}),
	url = URL.createObjectURL(blob);

	img.onload = pixelate;
	img.src = url;

	}

	function pixelate() {

	var dx = Math.round(width / grain),
	dy = Math.round(height / grain),
	delay = 25;

	canvas.style.display = "block";
	context.clearRect(0, 0, width, height);
	offscreenContext.clearRect(0, 0, width, height);
	offscreenContext.drawImage(img, 0, 0, width, height, 0, 0, dx, dy);
	context.drawImage(offscreen, 0, 0, dx, dy, 0, 0, width, height);

	up ? grain-- : grain++;
	if (grain === 64 \|\| grain === 1) {
	up = !up;
	delay = 500;
	}

	if (grain === 1) {
	canvas.style.display = "none";
	}
	setTimeout(pixelate, delay);

	}

	</script>