vin2809 Feb 22 2019 at 07:13

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

17 min

4.9K

Translation

Узнайте, как использовать мощный примитив SVG-фильтра feTurbulence для создания собственных текстур и эффектов искажений.

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

feTurbulence является одним из самых мощных примитивов SVG-фильтров. Спецификация определяет этот примитив следующим образом:

Этот примитив фильтра создает изображение с помощью функции турбулентности Перлина. Он позволяет синтезу искусственных текстур как облака или мрамор. […]
Полученное изображение будет заполнять весь субрегион примитива фильтра для этого примитива фильтра.

Другими словами, примитив фильтра feTurbulence генерирует и отображает шум Перлина. Этот вид шума полезен для иммитации нескольких явлений природы, таких как облака, огонь и дым, и генерации сложных текстур, таких как мрамор или гранит. И как feFlood, примитив feTurbulence заполняет область фильтрации новым контентом.

В этой статье мы рассмотрим, как можно создавать шум с помощью feTurbulence и как этот шум можно использовать для искажения изображений и текста, как мы это делали с текстурой feDisplacementMap в предыдущей статье. Затем мы рассмотрим, как созданный шум можно использовать в сочетании со световыми эффектами SVG для создания простой текстуры шероховатой бумаги.

Но сначала, давайте сделаем обзор feTurbulence и его атрибутов и посмотрим, как каждый из них влияет на создаваемый шум.

Создание турбулентности и фрактального шума при помощи feTurbulence

Когда я намеревалась написать эту серию, я приняла решение как можно больше избегать грубых технических подробностей о примитивах фильтров. Вот почему мы не будем вдаваться в технические детали функций, используемых для генерации шума Перлина.

Прочитав о функции, лежащей в основе генерации шума, я обнаружила, что это мне совсем не помогает, когда я ставлю примитив для эксперимента. В конце концов, мы работаем с генератором случайного шума. Таким образом, в большинстве случаев вы обнаружите, что создание текстуры будет темой для экспериментов и настройки, пока вы не получите желаемый результат. Со временем станет немного легче предсказать, как может выглядеть текстура.

Я обнаружила, что игра с примитивом feTurbulence и визуальная настройка его атрибутов были лучшим способом узнать о них и помогли мне понять, что делает каждый из этих атрибутов. Итак, мы используем визуальный подход для понимания feTurbulence, с помощью нескольких интерактивных демонстраций.

Теперь feTurbulence генерирует шум, используя функцию турбулентности Перлина. Она имеет 5 основных атрибутов, которые управляют функцией и, следовательно, ее визуальным результатом:

type;
baseFrequency;
numOctaves;
seed;
stitchTiles.

Мы рассмотрим, как каждый из этих атрибутов влияет на визуальный результат, не вдаваясь в технические подробности функции. Вы обнаружите, что в большинстве случаев вам нужно будет беспокоиться только о трех из этих атрибутов: type, baseFrequency и numOctaves.

baseFrequency

Для генерации шума требуется только атрибут baseFrequency (базовой частоты). baseFrequency влияет на размер (или масштаб) и зернистость создаваемого шума.

Эффект базовой частоты лучше всего понять, когда он визуализируется и анимируется. Вот почему я создала следующую демо-версию. С помощью ползунка можно изменить значение используемой базовой частоты и посмотреть, как она влияет на создаваемый шум в режиме реального времени. Вы заметите, что при увеличении или уменьшении значения атрибута baseFrequency сгенерированный узор остается цельным, становясь меньше или больше соответственно, и выглядит так, как будто он масштабируется и выходит из источника в верхнем левом углу.

Понижение значений baseFrequency, как например, 0.001, генерируют большие узоры, в то время как повышение значений, 0.5+, создают меньшие узоры. Значения начинаются от 0 (нет частоты == нет узора) и выше. Отрицательные значения не допускаются. Как отмечает Майкл Маллани, “значения в диапазоне от 0.02 до 0.2 являются полезными отправными точками для большинства текстур”.

Обратите внимание, что создаваемый шум не имеет цвета фона. Это означает, что если вы удалите белый цвет фона на SVG, вы сможете увидеть фон темного тела через шум.

Атрибут baseFrequency также принимает два значения. Если вы укажете два значения, то первое будет использоваться для базовой частоты по оси X, а второе будет соответствовать оси Y. Предоставляя два разных значения, вы можете генерировать вертикальный или горизонтальный шум, который может быть использован для реализации некоторых фантастических эффектов, как мы увидим в следующем разделе.

Снова поиграйте со значениями baseFrequency в этом демо и обратите внимание, как оно меняется вдоль осей X и Y, если вы даете ему разные значения. Демо начинается с приятного горизонтального шума. Значение x-baseFrequency в 0.01 относительно мало, что делает горизонтальный узор большим (как оно протягивало вне). Если вы уменьшите его еще больше, например, до 0.001, вы увидите, что горизонтальный узор станет больше похож на линии. Попробуйте его.

type

Как предполагает его название, атрибут type используется для указания типа шума, создаваемого примитивом feTurbulence. Существует два типа:

turbulence, которая является значением по умолчанию;
fractalNoise.

fractalNoise создает более туманные и плавные узоры это подходящая база для создания газообразных текстур, как облака. turbulence производит больше линий, которые имитируют пульсации, и таким образом пригодны как основа для жидких текстур.

Рис_1. Шум типа турбулентности слева и фрактальный шум справа.

Измените значение атрибута type в следующей демонстрации, чтобы увидеть, как изменяется созданный узор:

numOctaves

numOctaves сокращенно от “количество октав”, которые представляют уровень детализации шума.

В музыке октава — это разница в тонах между двумя нотами, когда одна имеет вдвое большую частоту, чем другая. Таким образом, чем выше октавы, тем выше частота. В feTurbulence, чем больше число октав, тем больше подробностей вы сможете увидеть в шуме, который он создает. По умолчанию созданный шум имеет одну октаву, что означает, что значение по умолчанию для атрибута numOctaves равно 1.

Перетащите ползунок в следующей демо, чтобы увидеть эффект увеличения числа октав на сгенерированной текстуре:

Вы заметите, что начиная с numOctaves="5" эффект добавления октав становится практически незаметным.

seed

Зерно, как определено в спецификации, является “начальным номером для генератора псевдослучайных чисел”. Другими словами, он предоставляет другое начальное число для случайной функции, используемой для генерации нашего случайного шума.

Визуально вы увидите, что это влияет на то, где и как генерируются “линии пульсации”. Это также лучше понять, когда вы видите, как это влияет на шум, создаваемый в двух соседних прямоугольниках.

Когда для двух соседних прямоугольников используется одно и то же начальное значение, функция, используемая для создания шума сквозь два прямоугольника, является непрерывной, и это будет визуально отражено непрерывностью “линий пульсаций” по краям этих двух прямоугольников.

Рис_2. Непрерывность функции, генерирующей случайный шум, можно увидеть по краям двух прямоугольников, используя одно и то же начальное значение.

Поиграйте со значением атрибута seed в следующем демо, посмотрите, как он влияет на создаваемый шум, и обратите внимание, что шум непрерывен по краям двух прямоугольников, использующих одно и то же начальное значение.

stitchTiles

stitchTiles можно использовать, чтобы создать эффект сшивки между “плитками” шума. Эффект этого атрибута очень похож на эффект семени, что означает, что он наиболее очевиден, когда у вас есть две смежные области (или “плитки”) шума.

Как упоминает спецификация, иногда результат генерации шума будет показывать четкие разрывы на границах плитки. Вы можете сказать браузеру попытаться сгладить результаты так, что две плитки представляется "сшитыми” вместе. Мне очень нравится, что атрибут и его эффект сравнивается с сшиванием.

По умолчанию не предпринимается никаких попыток добиться плавных переходов на границе листов, содержащих функцию турбулентности, поскольку значением по умолчанию для stitchTiles является noStitch. Если вы хотите создать эффект сшивания, можно изменить значение на stitch.

Чтобы сравнить результат stitchTiles с результатом seed, я применила то же значение seed к шуму, генерируемому в двух прямоугольниках в следующей демо. Вы уже можете видеть, что шум кажется непрерывным между ними. Переключите опцию stitchTiles в “on”, изменив ее значение на stitch, чтобы увидеть, как шум меняет размещение по краям.

Как я уже упоминала ранее, только три атрибута, вы скорее всего будете использовать type, baseFrequency и numOctaves. Так что мы сосредоточимся на этих трех, двигаясь вперед.

Используем шум feTurbulence для искажения контента

Здесь начинается самое интересное. А как мы начнем использовать сгенерированный шум. Ведь просто заполнение области фильтрации шумом само по себе бесполезно.

В предыдущей статье мы использовали feDisplacementMap для приведения фрагмента текста в соответствие с текстурой внешнего изображения. И мы упомянули, что feDisplacementMap использует информацию о цвете одного изображения для искажения другого. Изображение, используемое в качестве карты смещения, может быть любым. Это означает, что это может быть внешнее изображение или изображение, сгенерированное в SVG, например, градиентное изображение или узор,… ну или шумовая текстура.

Другими словами, шум, который мы генерируем при помощи feTurbulence, можно также использовать для искажения содержимого, если его применить вместе с feDisplacementMap. В следующем примере мы используем выход из feTurbulence для смещения изображения вместе с feDisplacementMap. Я использую модель горизонтального шума, путем предоставления двух разных значений для атрибута baseFrequency, аналогично тому, как мы сделали ранее.

<svg viewBox="0 0 180 100">
    <filter id="noise" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence baseFrequency="0.01 0.4" result="NOISE" numOctaves="2" />
        <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
    </filter>

    <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#noise)"></image>
</svg>

Интенсивность, с которой турбулентность искажает изображение, указана в атрибуте sale на feDisplacementMap. Я использовала большое значение, чтобы эффект выглядел более драматичным.

Теперь, исходя из этого простого применения, мы можем открыть гораздо больше возможностей, как объединить эти факты:

SVG-фильтры можно применять к содержимому HTML, а также;
значения baseFrequency являются цифрами и таким образом могут быть анимированы..

Чуть менее двух лет назад Adrien Denat написал правильную статью, в которой он экспериментировал с подобным эффектом, примененным к кнопкам HTML. Мы собираемся сломать и воссоздать следующий эффект нажатия кнопки:

Мы начнем с создания текстуры шума. Это состояние, в котором кнопка искажена, а затем, как только мы получим это, мы будем анимировать начальное состояние кнопки до этого искаженного состояния и обратно по щелчку.

Наша цель здесь в том, чтобы исказить кнопку по горизонтали. Т.е. мы будем используем и немного настроим горизонтальный шум из предыдущей демо-версии. Его эффект искажения на изображении даже слишком силен, поэтому для начала я наберу код, изменив значение турбулентности с (0,01 0,4) до (0 0,2):

<filter id='noise' x='0%' y='0%' width='100%' height='100%'>
        <feTurbulence type="turbulence" baseFrequency="0 0.2" result="NOISE" numOctaves="2" />
        <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="30" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>

Эффект стал немного лучше, но кнопка все еще искажена больше, чем мы хотели бы:

Мы хотим, чтобы искажение было менее драматичным. Имейте в виду, что мы можем мгновенно уменьшить эффект шума путем переключения типа шума от турбулентности по умолчанию к более гладкому fractalNoise. Как только мы это сделаем, мы увидим, что эффект искажения также будет сглажен:

Это выглядит намного лучше.

Теперь, когда у нас есть эффект искажения, которым мы довольны, мы начнем наше демо с фильтра, который изначально практически ничего не делает:

<filter id='noise' x='0%' y='0%' width='100%' height='100%'>
        <feTurbulence type="fractalNoise" baseFrequency="0 0.000001" result="NOISE" numOctaves="2" />
        <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="30" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>

Мы собираемся применить этот фильтр к нашей кнопке в CSS:

button {
    -webkit-filter: url(#noise);
            filter: url(#noise);
}

На этом этапе кнопка все еще выглядит не искаженной.

Далее, мы собираемся использовать код Адриена, правда немного модифицированную версию, который использует GSAP для анимации значения атрибута baseFrequency к (0 0.2) и обратно внутри примитива feTurbulence по щелчку:

var bt = document.querySelectorAll('.button')[0],
    turbVal = { val: 0.000001 },
    turb = document.querySelectorAll('#noise feTurbulence')[0],

    btTl = new TimelineLite({ paused: true, onUpdate: function() {
  turb.setAttribute('baseFrequency', '0 ' + turbVal.val);
} });

btTl.to(turbVal, 0.2, { val: 0.2 })
    .to(turbVal, 0.2, { val: 0.000001 });

bt.addEventListener('click', function() {
  btTl.restart();
});

И это на самом деле все, что необходимо. Вы можете поиграть с демо здесь:

Yа момент написания этой статьи демо работает в Chrome и Firefox. Это ошибки в текущей версии Safari, но вопрос разрешится в следующей версии, как Safari Tech Preview показывает демо работает отлично.

Хоть это не работает в MS Edge, но кнопка не искажается вообще, что означает, что отсутствие поддержки не влияет на возможность ее использования. Это здорово, потому что вы все еще можете использовать этот эффект в качестве расширения возможностей. Если эффект не поддерживается, то кнопка будет выглядеть и вести себя как обычная кнопка без эффекта.

Статья Адриана включает в себя еще несколько эффектов искажения кнопок, которые используют те же принципы, которые мы только что рассмотрели, и которые определенно стоит проверить и разобрать. Есть один или два хороших трюка, которые нужно изучить каждому.

Волнистый текст с использованием feTurbulence

Один из моих любимых примеров использования feTurbulence — это эффект волнистого текста от Лукаса Беббера. В своем демо Лукас использует несколько feTurbulence функций:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="squiggly-0">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
            <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
        </filter>
        <filter id="squiggly-1">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
        </filter>

        <filter id="squiggly-2">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
        </filter>
        <filter id="squiggly-3">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
        </filter>

        <filter id="squiggly-4">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
        </filter>
    </defs>
</svg>

… и применяя их через CSS к фрагменту HTML-текста при помощи CSS-анимации, анимирует от одного к другому:

@keyframes squiggly-anim {
  0% {
    -webkit-filter: url("#squiggly-0");
            filter: url("#squiggly-0");
  }
  25% {
    -webkit-filter: url("#squiggly-1");
            filter: url("#squiggly-1");
  }
  50% {
    -webkit-filter: url("#squiggly-2");
            filter: url("#squiggly-2");
  }
  75% {
    -webkit-filter: url("#squiggly-3");
            filter: url("#squiggly-3");
  }
  100% {
    -webkit-filter: url("#squiggly-4");
            filter: url("#squiggly-4");
  }
}

… таким образом создавая волнистый эффект.

Опять же, используемый текст является реальным, т.е. он доступен для поиска, выбора, доступа и редактирования (с помощью атрибута contenteditable). Проверьте живой демо, но будьте осторожны, т.к. этот демо является ресурсоемким, и вы можете не открыть Codepen на мобильном телефоне.

Итак, некоторые полезные выводы из этого раздела:

Шум, создаваемый с помощью feTurbulence, может использоваться для искажения как SVG, так и HTML-содержимого.
Значение baseFrequency могут быть анимированы.
Вы можете набрать сумму искажения вниз путем настройки значений в baseFrequency и сглаживание шума с типом fractalNoise.
Несмотря на то, что вы можете анимировать SVG фильтры в целом, обычно рекомендуется не переусердствовать, потому что они могут быть довольно ресурсоемкими. Старайтесь, чтобы анимация ограничивалась небольшими областями; чем больше анимированная область, тем больше ресурсов она будет потреблять.

Примитив feTurbulence очень редко, если вообще когда-нибудь, используется в одиночку. Он почти всегда используется другими примитивами фильтров для достижения отдельных эффектов.

В этом разделе мы использовали его в качестве карты смещения в feDisplacementMap. Посмотрим, что еще можно с ним сделать.

Имитация природной текстуры при помощи feTurbulence

Другим полезным способом использования шума, генерируемого feTurbulence, является имитация естественной текстуры. Если вы когда-либо использовали Плагины генерации шума в After Effects, вы, возможно, уже сталкивались с этой функциональностью и примерами этого.

Рис_7. Примеры текстур, созданных в After Effects с помощью плагина Fractal Noise. (Источник)

feTurbulence генерирует шум (случайные значения) по каждому из компонентов R, G, B и A. Вы можете изменить значения каждого из этих компонентов, чтобы получить различные вариации шума. Для того, чтобы смоделировать текстуру, нам обычно нужно сделать именно это: настроить компоненты R/G/B/A (отмена компонентов, насыщение других и т. д.).), чтобы получить желаемый результат. В других случаях, все, что нам нужно сделать, это пролить немного света на это. Буквально.

В этом разделе мы разберем эффект текстуры шероховатой бумаги, созданный Майклом Маллани. Для того, чтобы создать эту текстуру, мы должны осветить текстуру шума, создаваемого feTurbulence с помощью источников освещения SVG.

Источники света в SVG

SVG удобно предоставляет несколько примитивов, которые можно использовать для освещения объектов или изображений.

Существует два примитива фильтров, которые используются для указания типа света, который вы хотите:

feDiffuseLighting, который указывает непрямой свет от внешнего источника, и лучше всего использовать для эффектов солнечного освещения;
feSpecularLighting, определяющий вторичный свет, который возвращается от отражательных поверхностей.

Оба примитива освещают объект или изображение, используя альфа-канал этого изображения в качестве карты рельефа. Прозрачные значения остаются плоскими, в то время как непрозрачные значения поднимаются, чтобы сформировать пики, которые освещены более заметно.

Другими словами, фильтр источника света использует входной альфа-канал для получения информации о глубине: области с большей непрозрачностью поднимаются к наблюдателю, а области с меньшей непрозрачностью удаляются от него. Это означает, что альфа-значение пикселя во входных данных используется в качестве высоты этого пикселя в z-измерении, а фильтр использует эту высоту для вычисления виртуальной поверхности, которая будет отражать определенное количество света от источника света. Это довольно мощная вещь!

Оба типа света принимают атрибут называемый surfaceScale, который является практически множителем z-индекса. При увеличении этого значения “уклоны” текстуры поверхности становятся более крутыми.

“Поскольку feTurbulence генерирует альфа-канал, полный значений шума от 0 до 1, она образовывает хорошую переменную Z-поверхность, которая создает блики, когда мы светим на нее.” —Майкл Маллани

После принятия решения о типе света вам нужно выбрать источник света. В SVG существует три вида источников света:

feDistantLight: представляет собой удаленный источник света, который находится как угодно далеко, и поэтому определяется с точки зрения его угла наклона от цели. Это наиболее подходящий способ представления солнечного света.
fePointLight: представляет точечный свет, исходящий из определенной точки, представленной в виде трехмерной координаты X/Y/Z. Он похож на источник света внутри комнаты или внутри сцены.
feSpotLight: представляет собой прожектор, который ведет себя как точечный свет, но его луч может быть сужен до конуса, и свет может поворачиваться к другим целям.

Каждый из этих трех источников света имеет свои собственные атрибуты, которые используются для настройки генерируемого им света путем указания местоположения источника в 3D-пространстве. Описание атрибутов выходят за рамки этой статьи, но вы можете узнать о них больше в этой спецификации.

Чтобы создать и применить эффект освещения, необходимо вложить источник света в тип освещения. Итак, вы начинаете с выбора типа освещения, которое вы хотите, а затем выбираете источник, из которого он будет исходить. А затем, наконец, вам нужно указать цвет вашего освещения. Свойство lighting-color используется для определения цвета источника света для feDiffuseLighting и feSpecularLighting.

Рассмотрев основы источников освещения, мы теперь перейдем к нашему примеру.

Для текстуры шероховатой бумаги мы будем использовать солнечный свет. Это означает, что мы будем использовать белое рассеянное освещение, которое исходит от удаленного источника. В переводе на код, наш свет выглядит так:

<feDiffuseLighting lighting-color="white" surfaceScale="2" in=".." result="..">
    <feDistantLight azimuth="45" elevation="60" />
</feDiffuseLighting>

Атрибуты azimuth и elevation определяют положение источника света в трехмерном пространстве. Есть статья Рафаэля Понса, которая просто восхитительна в объяснении этих двух понятий в простой, легкой для понимания манере, наряду с красивыми и удобными иллюстрациями, помогающими при объяснении. Я очень рекомендую просмотреть ее.

Теперь, когда у нас есть свет, нужно создать наш шум, чтобы осветить его этим светом. Мы разобьем демо на этапы, чтобы узнать, как она создана.

Нам нужно с чего-то начать, и мы начнем с генерации случайного, базового шума в качестве основы нашей текстуры:

<feTurbulence baseFrequency='0.04' result='noise' />

Наш шум выглядит так:

Затем мы прольем на него свой свет, а затем возьмем его оттуда:

<feTurbulence baseFrequency='0.04' result='noise' />

<feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
      <feDistantLight azimuth='45' elevation='60' />
</feDiffuseLighting>

Яркая подсветка нашего шума дает нам следующую текстуру:

Это еще не тот результат текстуры, который мы ищем. Первое, что мы здесь замечаем, это наличие множества резких линий в текстуре. Мы хотим избавиться от них, потому что на поверхности бумаги нет резких линий. Нам нужно сгладить эти линии. Это можно сделать, сменив тип создаваемого шума на fractalNoise:

<feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' />

<feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
      <feDistantLight azimuth='45' elevation='60' />
</feDiffuseLighting>

Это удаляет все эти острые выровненные края из нашей текстуры:

Теперь мы на шаг ближе к нашей текстуре шероховатой бумаги.

Однако вышеприведенная текстура недостаточно шероховата. Ей не хватает необходимой “шероховатости”. Увеличение в ней числа мелких деталей должно сделать ее более грубой. Для этого мы увеличим значение numOctaves. Мы выяснили, что примерно 5 — это отличное число для получения необходимого уровня шероховатости:

<feTurbulence type="fractalNoise" baseFrequency='0.04' numOctaves="5" result='noise' />

<feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
      <feDistantLight azimuth='45' elevation='60' />
</feDiffuseLighting>

И наша бумажная текстура теперь выглядит так:

Отлично!

Вы можете поиграть с демо здесь:

Этот демо работает во всех основных браузерах, включая MS Edge.

Если вы хотите, то можете настроить эффект немного дальше, играя с источником и расстоянием света. Например, уменьшение elevation (высоты) источника света с 60 до 40 должно увеличить контраст между небольшими холмами в текстуре. Тогда текстура будет выглядеть примерно так:

Я настоятельно рекомендую поиграть со значениями атрибутов источника света и шума и посмотреть, как они влияют на результирующую текстуру.

Заключение

Примитив feTurbulence является одной из самых интересных и мощных операций SVG. В сочетании с другими примитивами и анимацией, он способен создавать действительно интересные и привлекательные эффекты, текстуры и взаимодействия.

Я предполагаю, что feTurbulence это один из тех фильтров, с которым вы захотели бы поэкспериментировать или разобрать код других людей, чтобы лучше изучить его. Я однако считаю, что угадываю, как текстура будет выглядеть через некоторое время. И поскольку мы можем сделать так много только с одной текстурой, то если использовать ее с другими примитивами, существует почти бесчисленное множество всевозможных эффектов, которые можно создать с ее помощью. Я настоятельно рекомендую вам посмотреть работу других людей и разобрать ее, чтобы изучить лучше.

Yoksel экспериментирует с SVG-фильтрами на Codepen поcле моей беседы об SVG-фильтрах несколько месяцев назад. Так что вы можете обнаружить довольно много эффектов, чтобы разобрать и изучить в его профиле Codepen.

Рис_13. Один из последних экспериментов Yoksel с фильтрами SVG, используя feTurbulence.

Я надеюсь, эта статья вдохновила вас и приоткрыла новую дверь вашего воображения, чтобы вы смогли посмотреть, что можно сделать с SVG-фильтрами.

В последней статье этой серии я поделюсь некоторыми дополнительными ресурсами и инструментами, которые помогут вам продвинуться вперед с фильтрами SVG и начать создавать самостоятельно. Оставайтесь с нами.

Tags:

Hubs: