Предлагаю в качестве тени использовать второй path
и сдвинуть его вправо и вниз относительно картинки с помощью команды: translate(5 2.5)
Цвет тени устанавливается либо здесь :
.boxShadow {
fill:#2A2A41;
Либо изменением атрибутов SVG градиента:
<linearGradient id="horiz"
x1="0%" y1="0%"
x2="100%" y2="50%"
spreadMethod="pad" >
<stop offset="40%" stop-color="white"/>
<stop offset="85%" stop-color="#383838"/>
</linearGradient>
Ниже пример
<body>
<style>
svg path{
fill:inherit;
stroke:inherit;
}
.boxShadow {
fill:none;
stroke:none;
}
</style>
<div class="container">
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 800" >
<defs>
<mask id="cat">
<g transform="scale(5)" >
<path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
style="fill:white;stroke-width:1;stroke:white"/>
</g>
</mask>
<linearGradient id="horiz"
x1="0%" y1="0%"
x2="100%" y2="50%"
spreadMethod="pad" >
<stop offset="40%" stop-color="white"/>
<stop offset="85%" stop-color="#383838"/>
</linearGradient>
</defs>
<g class="boxShadow" transform="scale(5.0) translate(5 2.5)" >
<path d="M42.4 60.9 22.5 60.9C17.3 61 16.5 60.6 13.9 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.6 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.5-0.7 4.5-0.7L39.6 6c2.6 0 6.1-0.1 6.9 0.5 1.4 1 3 4.2 3.8 5.2l9.7 16.6c0.9 2.2 1.6 3.4 1.7 4.6 0.1 1.2-0.2 2.5-1.3 4.7l-11.5 20.4c-2.8 3.2-4.4 2.8-6.7 2.8z" style="fill:url(#horiz);" />
</g>
<image x="-70" y="0" width="400px" height="400px" xlink:href="https://i.stack.imgur.com/SkCUx.jpg" mask="url(#cat)">
</image>
</svg>
</div>
</body>
Второй вариант
Для формирования тени, придающей фигуре 3D эффект используется заполнение (fiil) и строка :
.boxShadow {
stroke-width:2;
stroke:grey;
fill:#00174D;
}
<body>
<style>
svg path{
fill:inherit;
stroke:inherit;
}
.boxShadow {
stroke-width:2;
stroke:grey;
fill:#00174D;
}
</style>
<div class="container">
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 800" >
<defs>
<mask id="cat">
<g transform="scale(5)" >
<path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
style="fill:white;stroke-width:1;stroke:white"/>
</g>
</mask>
</defs>
<g class="boxShadow" transform="scale(5.0) translate(5 2.5)">
<path d="m42.3 60.8-19.8 0.1c-5.2 0.1-6-0.3-8.7-4.6L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.6 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.5-0.7 4.5-0.7L39.6 6c2.6 0 6.1-0.1 6.9 0.5 1.4 1 3 4.2 3.8 5.2l9.7 16.6c0.9 2.2 1.6 3.4 1.7 4.6 0.1 1.2-0.2 2.5-1.3 4.7l-11.5 20.4c-2.8 3.5-4.8 2.5-6.7 2.7z" />
</g>
<image x="-70" y="0" width="400px" height="400px" xlink:href="https://i.stack.imgur.com/SkCUx.jpg" mask="url(#cat)">
</image>
</svg>
</div>
</body>
Все примеры адаптивны. Чтобы регулировать начальный размер шестиугольника необходимо указать ширину и высоту контейнера SVG в процентах:
.container{width:30%; height:30%;}
<body>
<style>
svg path{
fill:inherit;
stroke:inherit;
}
.boxShadow {
stroke-width:2;
stroke:grey;
fill:#00174D;
}
.container{width:30%; height:30%;}
</style>
<div class="container">
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 800" >
<defs>
<mask id="cat">
<g transform="scale(5)" >
<path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
style="fill:white;stroke-width:1;stroke:white"/>
</g>
</mask>
</defs>
<g class="boxShadow" transform="scale(5.0) translate(5 2.5)">
<path d="m42.3 60.8-19.8 0.1c-5.2 0.1-6-0.3-8.7-4.6L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.6 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.5-0.7 4.5-0.7L39.6 6c2.6 0 6.1-0.1 6.9 0.5 1.4 1 3 4.2 3.8 5.2l9.7 16.6c0.9 2.2 1.6 3.4 1.7 4.6 0.1 1.2-0.2 2.5-1.3 4.7l-11.5 20.4c-2.8 3.5-4.8 2.5-6.7 2.7z" />
</g>
<image x="-70" y="0" width="400px" height="400px" xlink:href="https://i.stack.imgur.com/SkCUx.jpg" mask="url(#cat)">
</image>
</svg>
</div>
</body>