SVG Drop Shadow

dropshadow.js

export function addDropShadowDef(defsSelection, id, size, opacity) {
  const filter = defsSelection.append("filter")
    .attr("id", id)
    .attr("height", "130%")
  filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", size * 1.5) // stdDeviation is how much to blur
  filter.append("feOffset")
    .attr("dx", size)
    .attr("dy", size)
    .attr("result", "offsetblur")
  filter.append("feComponentTransfer")
    .append("feFuncA")
    .attr("type", "linear")
    .attr("slope", opacity) // slope is the opacity of the shadow
  const feMerge = filter.append("feMerge")
  feMerge.append("feMergeNode") // this contains the offset blurred image
  feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic")
}