JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="500" height="500">
  <defs>
    <filter id="shadow" height="130%">
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"></feOffset>
      <feFlood></feFlood>
      <feComposite operator="in" in2="offsetBlur"></feComposite>
      <feGaussianBlur stdDeviation="3"></feGaussianBlur>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  
  <!--  1 rect and 3 lines should be displayed  -->
  <rect class="shadowed" width="100" height="100"></rect>
  <line class="shadowed" x1="150" x2="250" y1="0" y2="100"></line>
  <line x1="300" x2="400" y1="30" y2="30"></line>
  
  <!--  but this one is not visible  -->
  <line class="shadowed" x1="300" x2="400" y1="60" y2="60"></line>
  


</svg>

CSS

.shadowed {
  filter: url(#shadow);
}

rect {
  fill: blue;
}

line {
  stroke: red;
  stroke-width: 2px;
}