I've tried a number of different approaches, including using a background image; playing with filter, which would have worked perfectly if only the inset keyword was allowed; and attempting to layer second custom SVG that was shadow only.
Any other ideas?
HTML
<div className="Hero-image masked-image">
<img
src={MainStreet}
/>
</div>
CSS
.masked-image {
mask-image: url(../images/blob.svg);
}
Hero-image {
box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.9);
img {
position: relative;
z-index: -2;
}
}
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="926px" height="687px">
<defs>
<filter id="Filter_0">
<feOffset in="SourceAlpha" dx="0" dy="10" />
<feGaussianBlur result="blurOut" stdDeviation="3.162" />
<feFlood flood-color="rgb(23, 42, 38)" result="floodOut" />
<feComposite operator="out" in="floodOut" in2="blurOut" result="compOut" />
<feComposite operator="in" in="compOut" in2="SourceAlpha" />
<feComponentTransfer><feFuncA type="linear" slope="0.21"/></feComponentTransfer>
<feBlend mode="multiply" in2="SourceGraphic" />
</filter>
</defs>
<g filter="url(#Filter_0)">
<path fill-rule="evenodd" fill="rgb(0, 0, 0)"
d="M282.349,3.575 C411.423,11.120 520.302,32.533 598.697,60.279 C678.375,88.326 727.570,122.705 766.910,163.119 C806.028,203.257 835.096,248.633 861.432,295.625 C886.801,342.755 909.108,391.135 913.279,440.006 C920.296,488.397 906.195,531.132 875.275,568.960 C844.518,606.426 796.544,639.258 742.851,657.569 C689.439,676.508 631.492,681.104 571.415,677.406 C511.072,673.731 448.004,662.763 380.807,649.302 C315.460,635.230 254.022,623.396 204.315,613.490 C154.414,603.307 116.131,594.918 91.621,581.269 C66.762,567.959 55.713,548.399 56.909,521.311 C57.739,494.330 71.517,461.223 86.748,424.260 C100.787,387.521 114.203,353.239 108.766,312.171 C104.568,271.649 81.516,224.340 51.223,174.164 C22.636,124.270 -6.617,73.353 26.009,40.844 C41.630,24.532 73.145,12.973 118.122,6.853 C162.779,0.662 220.899,-0.091 282.349,3.575 "/>
</g>
</svg>
