Solar Terminator with layers clipping

Solar Terminator with layers clipping. Path generated by Leaflet.Terminator plugin used for clipping layers, night effect on tiles created with help of SVG filter. Your location marked with red star. All works great on firefox. Leaflet + Leaflet.Terminator.

<!DOCTYPE html>
<html>
<head>
	<meta charset=UTF-8 />
	<title>Solar Terminator with layers clipping</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="L.Terminator.js"></script>
	<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width: 960px; height: 500px; }
	</style>
</head>
<body>
	<div id='map'></div>
	<script>
	var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			stamenUrl = 'https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
			attrib = '&copy; Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			main = L.tileLayer(osmUrl, {maxZoom: 18, attribution: attrib}),
			map = new L.Map('map', {
				layers: [main],
				center: new L.LatLng(0, 0),
				zoom: 1,
				minZoom: 1
			}),
			terminator = L.terminator({
				color: '#666666',
 				resolution: 5
 			}),
			overlay = L.tileLayer(stamenUrl).addTo(map);
      overlay.getContainer().style.filter = "url(#luminance_mask)";
      overlay.getContainer().style.WebkitFilter = "url(#luminance_mask)";

terminator.addTo(map);

var myIcon = L.icon({
      	iconUrl: 'star.svg',
    		iconSize: [20, 20],
    		iconAnchor: [10, 10],
    		popupAnchor: [-3, -76]
    	});

map.locate();
      map.on("locationfound", function(e) {
      	L.marker(e.latlng, {icon: myIcon}).addTo(map);
      });

setInterval(function() {updateTerminator(terminator)}, 500);

function updateTerminator(t) {
				var t2 = L.terminator({resolution: 5});
				t.setLatLngs(t2.getLatLngs());
				t.redraw();
				clip();
			};

var svg = d3.select(".leaflet-overlay-pane").select("svg"),
    	defs = svg.append("defs"),
    	clipMask = defs.append("clipPath").attr("id", "clipMask");
    	clipPath = clipMask.append("path")
    	  .attr("id", "clipPath")
    	  .attr("d", d3.select(terminator._path).attr("d"))
    	  .attr('fill', 'white')
    	  .attr('opacity', 1);

function clip() {
    		setTimeout(function() {
    			//Get path from Solar terminator plugin
    			var pathData = d3.select(terminator._path).attr("d");
    	      clipPath.attr("d", pathData);
    	      overlay.getContainer().style.clipPath = 'url(#clipMask)';
            overlay.getContainer().style['-webkit-clip-path'] = 'url(#clipMask)';
    	    }, 100);
    	};

clip();
    map.on('moveend', clip);
    map.on('zoomend', clip);
    </script>
    <svg>
    	<defs>
    		<filter id="grayscale">
    			<feColorMatrix type="saturate" values="0"/>
    		</filter>
    		<filter id="luminance_mask">
    			<feColorMatrix type="luminanceToAlpha"/>
    		</filter>
    	</defs>
    </svg>
  </body>
  </html>

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

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