CSS-эффекты и графика

SVG-фильтры

Турбулентность, смещение, дуотон, слипание и «жидкое стекло» готовым тегом filter. Параметры крутятся ползунками, результат виден сразу.

Фильтр

Пресет

Волнистое искажение краёв — «мокрое стекло» и рваная бумага.

Частота: 0.03 Октавы: 3 Сила смещения: 24

На чём показывать

До и после

Образец с применённым фильтром — С фильтром

Тег filter

<filter id="f-turbulence" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="3" result="noise"/>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="24" xChannelSelector="R" yChannelSelector="G"/>
</filter>

Скрытый SVG для вставки в разметку

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute">
  <defs>
    <filter id="f-turbulence" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="3" result="noise"/>
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="24" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
</svg>

Как применить

/* Любому элементу страницы */
.effect { filter: url(#f-turbulence); }

<!-- Или прямо в SVG -->
<g filter="url(#f-turbulence)"> … </g>