Not a striking entity at first glance - how is this shamanism implemented?

Question

css

Here https://websemantics.uk/ links are placed in the form of blocks and each block has its own icon. When hovering over a block/link, the color-filled lines and inner shapes of icons have visual noise. What is js, canvas; how is it done?

Answer 1

Can be done in 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>

Only instead of a circle, take the path that you need. By changing the value of baseFrequency you get "animated" noise - codepen .

Answer 2

On the :hover event , the icon is shown, which normally has opacity: 0 .
Learn to use the developer panel.

Answer 3

find the #the_turbulence element on the page - it should become clearer. But I don’t advise doing this, it is (visually at least) brake