simple Sot on svg 2

by web86

HTML

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" class="filter">
   <linearGradient id="gradientss" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0;" />
              <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
   </linearGradient>
   <defs>
          <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" x="-25" width="150" height="200" />
          </pattern>
        </defs>     
   <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)" />
   <polygon id="hexshad" points="94 50 94 74.5 50 98 6 74.5 6 50 94 50"  width="100" height="100" fill="url(#gradientss)"/>
       <text id="text"  x="50" y="70" text-anchor="middle">НАЗВАНИЕ ПУНКТА</text>';
 </svg>

CSS

.filter { filter: drop-shadow(10px 0 5px black); }
#hex { stroke: red; stroke-width: 2; }
#text {font-size:50%;fill:#fff}