Тень SVG изображения отбрасывается вверх

Question

Есть элемент, выполненный на SVG, нужно чтобы он отбрасывал тень наверх, как на изображение ниже:

Пробовал реализовать изображением и при помощи filter: drop-shadow() - результат не тот..

<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 83 21">
  <path fill="#FDAF18" fill-rule="nonzero" d="M83.84 0c-8.24-.05-2.51 5.97-17.2 8.62-8 1.44-3.67 5.57-14.45 5.57-12.56 0-12.4 4.65-21.66 4.65-8.95 0-13.36-7.35-20.12-8.48C2.99 9.13 0 12.9 0 13.75v7.96h83.84V0z"/>
</svg>

Answer 1

Для создания тени попробуйте использовать SVG фильтры feGaussianBlur и feblend

<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 -0.5 83 21">

<defs> 
<filter id="drop-shadow" filterUnits ="userSpaceOnUse"  >
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="5"  />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs> 
  <path filter="url(#drop-shadow)" fill="#FDAF18" fill-rule="nonzero" d="M83.84 0c-8.24-.05-2.51 5.97-17.2 8.62-8 1.44-3.67 5.57-14.45 5.57-12.56 0-12.4 4.65-21.66 4.65-8.95 0-13.36-7.35-20.12-8.48C2.99 9.13 0 12.9 0 13.75v7.96h83.84V0z"/>
</svg>

#2. Другой набор фильтров, дающих более мягкое рассеивание тени

<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 -0.5 83 21">

<defs> 
<filter id="drop-shadow" height="200%" width="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="1" dy="0" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
</defs> 
  <path filter="url(#drop-shadow)" fill="#FDAF18" fill-rule="nonzero" d="M83.84 0c-8.24-.05-2.51 5.97-17.2 8.62-8 1.44-3.67 5.57-14.45 5.57-12.56 0-12.4 4.65-21.66 4.65-8.95 0-13.36-7.35-20.12-8.48C2.99 9.13 0 12.9 0 13.75v7.96h83.84V0z"/>
</svg>

БЛОГ НА HUSL

Тень SVG изображения отбрасывается вверх

Ответы (1 шт):