Shadow - svg filter

shadow.pug

mixin shadow ()
  // START shadow
  .shadow&attributes(attributes)
    //- Мы сначала смещаем элемент, а затем размываем эту смещенную "копию"
    //- С помощью примитива наложения мы просто устанавливаем исходный
    //- элемент поверх размытого результата.
    //- Использование in="SourceAlpha" альфа-канала исходного изображения
    //- фактически делает размытый результат черным. Если бы мы использовали
    //- in="SourceGraphic", тень бы имела цвет исходного элемента.
    svg.exz1(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="600" height="400")
      defs
        filter#dropshadow(x="0" y="0" width="200%" height="200%")
          feOffset(result="offsetResult" in="SourceAlpha" dx="20" dy="20")
          feGaussianBlur(result="blurResult" in="offsetResult" stdDeviation="5")
          feBlend(in="SourceGraphic" in2="blurResult" mode="normal")
      //- rect(width="500" height="300" fill="#8d81ac" filter="url(#dropshadow)")
    .rectangle
  // END shadow
  
  

shadow.sass

.shadow
  padding: 30px
  background-color: #fed6bc
.rectangle
  width: 500px
  height: 300px
  margin: 50px
  background-color: #8d81ac
  filter: url('#dropshadow')