SVG filter effects by shimizu

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
<script src="//unpkg.com/d3@5.0.0/dist/d3.min.js"></script>    
<style>
 html,body, svg{
    width: 100%;
    height: 100%;
    background-image:url("p0129_l.jpeg")
 }
 
</style>
</head>
<body>
<svg>
  <defs>
    <filter id="filter">
      <!-- COLOR -->
      <feFlood flood-color="#000000" flood-opacity="1" result="COLOR-blue" />
      <!-- COLOR END -->

      <!-- Texture -->
      <feTurbulence baseFrequency=".025" type="fractalNoise" numOctaves="3" seed="0" result="Texture" />
      <!-- Texture -->

      <!-- FILL --> 
      <feOffset dx="-3" dy="4" in="SourceAlpha" result="step1"/>
      <feDisplacementMap scale="17" in="step1" in2="Texture" result="step2" />
      <feComposite operator="in" in="Texture" in2 = "step2" result="step3"/>
      <feComposite operator="in" in="COLOR-blue" in2="step3" result="fill-filter" />
      <!-- FILL END-->


      <feMerge  result="merge2">
       <feMergeNode in="fill-filter" />
      </feMerge>
    </filter>
  </defs>

</svg>    
    
<script>
let width = d3.select("svg").node().clientWidth;
let height = d3.select("svg").node().clientHeight;  

width = (width < 980) ? 980 : width;
height = (height < 980) ? 980 : height;

const cityLayer = d3.select("svg").append("g").attr("class", "cityLayer");    
const prefLayer = d3.select("svg").append("g").attr("class", "prefLayer");    

const selectYear = 2016;
const stepYear = 5
    
    
const projection = d3.geoMercator() 

const geoPath = d3.geoPath();

const p1 = d3.json("pref-s.geojson")



Promise.all([p1]).then(data => {
 
 const prefData = data[0];
  
  projection.fitExtent([[0, 0], [980, 980]], prefData);
    
  geoPath.projection(projection);

    
  prefLayer.selectAll(".pref")
      .data(prefData.features)
      .enter()
      .append("path")
      .attr("class", "pref")
      .attr("d", geoPath)
      .attr("stroke", "red")
      .attr("stroke-width", 1)
      .attr("fill", "black")
      .attr("filter", "url(#filter)")
      .attr("opacity", 0.65)
        
      
})
   
</script>    



</body>
</html>