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

186

09 июня 2018, 17:10

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

Answer 1

Собственно просто паттерн при hover делаем прозрачным такой же элемент а под ним как раз в этом патерне нагодится гифка ..всё

var colorArray = ["transparent", "#000"];  
var i = 0; 
var rect = document.getElementById("rec"); 
var elem = document.getElementById("elem"); 
elem.addEventListener("mouseover", function(e) { 
  rect.style.fill = colorArray[i]; 
  i++; 
  if (i > colorArray.length - 1) { 
    i = 0; 
  } 
});

#elem { 
  border: 1px solid red; 
  height: 150px; 
}

<div id="elem"> 
  <?xml version="1.0" encoding="UTF-8" standalone="no"?> 
  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    id="svg8" version="1.1" viewBox="0 0 5000 5000"> 
  <defs> 
    <pattern patternTransform="matrix(0.26458333,0,0,0.26458333,-3126.0325,-1749.9689)" id="pattern1840" xlink:href="#pattern1112"/> 
    <pattern 
       id="pattern1112" 
       patternTransform="matrix(0.26458333,0,0,0.26458333,-2273.8855,-482.95559)" 
       height="3441.5641" 
       width="5768.9556" 
       patternUnits="userSpaceOnUse"> 
      <image 
         y="5.2735594e-013" 
         x="-1.3855583e-013" 
         xlink:href="http://s2.favim.com/orig/150624/black-gif-grunge-white-Favim.com-2848003.gif" 
         preserveAspectRatio="none" 
         height="3441.5642" 
         width="5768.9556" /> 
    </pattern> 
  </defs> 
 
  <g transform="translate(3179.6234,879.28318)"> 
 
    <path 
       id="rect1835" 
       d="m -3178.4626,-878.65143 c 395.1946,43.80854 859.5117,294.9846 1141.7753,0 -257.6021,277.96031 -266.9249,555.92061 0,833.880922 -372.609,-62.265192 -717.3232,-342.110282 -1141.7753,0 251.8585,-277.960312 226.8166,-555.920612 0,-833.880922 z" 
       style="fill:url(#pattern1840);" /> 
    <path 
       style="opacity:1;fill:#000000;" 
       d="m -3178.4626,-878.65143 c 395.1946,43.80854 859.5117,294.9846 1141.7753,0 -257.6021,277.96031 -266.9249,555.92061 0,833.880922 -372.609,-62.265192 -717.3232,-342.110282 -1141.7753,0 251.8585,-277.960312 226.8166,-555.920612 0,-833.880922 z" 
       id="rec" /> 
  </g> 
</svg> 
</div>