Creating a custom "cross section" line (svg) for Recharts - css

Question

I am currently using Recharts for React.
I am trying to recreate this line style:
This is what I've been able to achieve until now, but what I am missing is for the middle line to be a dashed line, and maybe for the start/end of the line to taper off.
I am pretty new to SVG world, so I am not sure how to proceed.
I've used a filter to create the current line.
Here is my current code:
<defs>
<filter id="crossSection">
<feMorphology in="SourceGraphic" result="a" operator="dilate" radius="3" />
<feMorphology in="SourceGraphic" result="b" operator="dilate" radius="1.8" />
<feComposite in="SourceGraphic" in2="a" result="aa" operator="xor" />
<feComposite in="aa" in2="b" operator="xor" />
</filter>
</defs>
<Line
strokeWidth={2}
yAxisId="section"
activeDot={{ r: 8 }}
dot={false}
type="monotone"
dataKey="section"
stroke="black"
filter="url(#crossSection)"
/>
Any insight or help would be greatly appreciated!