hex gradient (inspired by nbremer)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		
		<style>
			body {
				text-align: center;
      
			}
		</style>

</head>	
	<body>

var margin = {
		top: 10,
		right: 0,
		bottom: 10,
		left: 0
	};
   
			var width = window.innerWidth - margin.left - margin.right - 10,
				height = Math.min(500, window.innerHeight - margin.top - margin.bottom - 20);

var svg = d3.select('#hexagon')
			.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var defs = svg.append("defs");
      
  
	var SQRT3 = Math.sqrt(3),
			hexRadius = Math.min(width, height)/2,
			hexWidth = SQRT3 * hexRadius,
			hexHeight = 2 * hexRadius;
	var hexagonPoly = [[0,-1],[SQRT3/2,0.5],[0,1],[-SQRT3/2,0.5],[-SQRT3/2,-0.5],[0,-1],[SQRT3/2,-0.5]];

linearGradient.append("animate")
		.attr("attributeName","x1")
		.attr("values","0%;100%")
		.attr("dur","7s")
		.attr("repeatCount","indefinite");
		
	linearGradient.append("animate")
		.attr("attributeName","x2")
		.attr("values","100%;200%")
		.attr("dur","7s")
		.attr("repeatCount","indefinite");
		
 	svg.append("path")
			.attr("class", "hexagon")
			.attr("d", "M" + (width/2) + "," + (height/2) + hexagonPath)
			.style("stroke", "white")
			.style("stroke-width", "4px")
  		.style("stroke-dasharray", "2px 2px")
			.style("fill", "url(#animate-gradient)");

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js