xxxxxxxxxx
<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>
<div id="widthMeasure"></div>
<div id="hexagon"></div>
<script language="javascript" type="text/javascript">
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]];
var hexagonPath = "m" + hexagonPoly.map(function(p){ return [p[0]*hexRadius, p[1]*hexRadius].join(','); }).join('l') + "z";
var linearGradient = defs.append("linearGradient")
.attr("id","animate-gradient")
.attr("x1","0%")
.attr("y1","0%")
.attr("x2","100%")
.attr("y2","0")
.attr("spreadMethod", "reflect");
var colors = ["#00ffb3","#00fff3","#00cbff","#008cff","#004cff","#000cff"];
linearGradient.selectAll(".stop")
.data(colors)
.enter().append("stop")
.attr("offset", function(d,i) { return i/(colors.length-1); })
.attr("stop-color", function(d) { return d; });
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