Here https://websemantics.uk/ links are placed in the form of blocks and within each block has its own icon. When hovering on a block / link, visual noise appears on the lines filled with color and internal shapes of icons. What is it js, canvas; how is it done?
- This is svg and css. - Darth
- Yes, I liked it too - Demon __ ANT
- codepen.io/JoyZi/pen/Mrrrgg look at the same, but not the same, but it looks like - Demon __ ANT
- Demon __ ANT, yes, interesting too, I liked what you showed. I comprehended how to see through the debugger - Darth is right this is svg. There are services that will help to do this, or do you need pens? - dupre
- @dupre there are two exits either by handles doing it yourself either you want or you take it ready in the sites that the other did as the hotel wanted - Demon __ ANT
|
1 answer
Actually, just a hover pattern, we make the same element transparent, and under this just a gif in the pattern paternal .. all
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> - it does not start right away - several times click on
выполнить код- user33274 - Sorry, initially I crookedly asked a question. The visual noise appearing in hover is animated. How they implemented this most animated noise is the question that is not clear. - dupre
- this is done in svg - there is such a filter feTurbulense, here in the svg section there is a question "How to make the effect of water" here there actually is an implementation - I just put the gif under the svg path gif - user33274
- Thank you, the question for me has become clearer. - dupre
- if you want, I will give you an example of how I did it on css, only pictures are not on the Internet and I can only throw off the archive - user33274
|