Не броская на первый взгляд сущность – как реализовано это шаманство?

Question

[Eugene]

Здесь https://websemantics.uk/ размещены ссылки в виде блоков и внутри каждого блока своя иконка. При hover на блок/ссылку, у заполненных цветом линий и внутренних форм иконок появляется визуальный шум. Что это js, canvas; как это сделано?

Comments

[Леонид Князев]

А, что мешает открыть Developer Tools в браузере и посмотреть как это сделано?

[Eugene]

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

[Леонид Князев]

dupre, Ищите в теге <a class="art_lnk-pens"></a> элементы <svg/>. Это и есть иконки.

Answer 1

[Ivan Bogachev]

Можно сделать на SVG:

<svg viewBox="0 0 100 100">
  <defs>
    <filter id="noise">
      <feTurbulence id="js-turbulence" type="fractalNoise" baseFrequency="30" result="noisy"></feTurbulence>
      <feColorMatrix type="saturate" values="0"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="noisy" mode="multiply"></feBlend>
    </filter>
    <clipPath id="the-object">
      <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" fill="#5FDDD1" filter="url(#noise)" clip-path="url(#the-object)"></circle>
</svg>

Только вместо круга взять path, который вам нужен. Изменяя значение baseFrequency получите "анимированный" шум - codepen.

Comments

[Eugene]

Отлично. Спасибки большие, благодарствую вам.

Answer 2

[Антон Спирин]

По событию :hover показывается иконка, у которой в обычном состоянии opacity: 0.
Учитесь пользоваться панелью разработчика.

Comments

[Eugene]

Вопрос не об этом ) визуальный шум при hover сделан как?

[Антон Спирин]

dupre, найдите спрайт с SVG иконками на странице, там будет элемент filter с id #the_noise

Answer 3

[Interface]

найдите на странице элемент #the_turbulence - должно стать понятнее. Но делать так не советую оно (визуально по крайней мере) тормозное

Comments

[alex-1917]

это точно, айпады дохнут как мухи на этих новомодных svg)))