#фишка дня

Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.

Выглядит он прям максимально просто:

  <filter id="outline">
    <feGaussianBlur stdDeviation='3'/>
    <feComponentTransfer>
      <feFuncA type= "table" tableValues="-3 4 -3"/>
    </feComponentTransfer>
  </filter>

А результат даёт интересный, на видео.

Как минимум, это очень применимо в двух случаях:

1. Если есть иконка в PNG, но нужно срочно сделать её контурной
2. Для генерации разных игр вроде «сопоставь объект с его формой» для детей. Весьма популярная тема, кстати.

Лучше всего работает на картинках с чёткими раздельными элементами. Но даже для более простых вариантов я уже нашёл применение и распечатал ребёнку стикеров :)

#css #svg #filter