World Map and Pattern Transitions 2

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
	
var pattern = svg.append("pattern")
	
pattern.attr("width",20)
	.attr("height",20)
	.attr("patternUnits","userSpaceOnUse")
	.attr("patternTransform","rotate(45)")
	.attr("id","testPattern");
	  
var rect1 = pattern.append("rect")
	.attr("x",0)
	.attr("y",0)
	.attr("width",10)
	.attr("height",20)
	.attr("fill","orange")
	
var rect2 = pattern.append("rect")
   .attr("x",20)
   .attr("y",0)
   .attr("width",10)
   .attr("height",20)
   .attr("fill","orange");

var projection = d3.geoMercator()
    .scale((width - 3) / (2 * Math.PI))
    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) {
  if (error) throw error;

svg.selectAll("path")
      .data(topojson.feature(world, world.objects.countries).features)
	  .enter()
	  .append("path")
      .attr("class", "boundary")
      .attr("d", path)
	  .attr("fill","url(#testPattern)");
	  
	
	function toggle() {
	
	
	    rect2
		  .attr("x","-20")
		  .transition()
		  .ease(d3.easeLinear)
		  .attr("x",0)
		  .duration(2000);
	
		rect1
		  .attr("x",0)
		  .transition()
	      .attr("x",20)
	     /// .attr("width",20)
		  .ease(d3.easeLinear)
	      .duration(2000)
		  .on("end",toggle);
	 }
	 
	 toggle();
	  
	  
});

</script>

https://d3js.org/d3.v4.min.js

https://unpkg.com/topojson-client@3