CSS :
<!-- General link styles --> .link { outline: none; text-decoration: none; position: relative; font-size: 8em; line-height: 1; color: #9e9ba4; display: inline-block; } @media screen and (max-width: 42em) { .link--asiri { -webkit-transform: scale3d(0.65,0.65,1); transform: scale3d(0.65,0.65,1); } } .link--asiri { position: relative; width: 400px; height: 200px; } .link--asiri .text-fill { position: relative; width: 100%; height: 100%; overflow: hidden; } .link--asiri canvas { width: 100%; height: 100%; } .link--asiri .svg-inverted-mask { position: absolute; width: 400px; height: 200px; top: 0; left: 0; box-shadow: inset 0 0 0 2px #222; /* FF rendering issue */ } .link--asiri .shape--fill { fill: #222; } .link--asiri .text--transparent { fill: #95D384; -webkit-transition: fill 0.2s; transition: fill 0.2s; } .link--asiri:hover .text--transparent { fill: transparent; } .svg--asiri .mask__shape { fill: white; } .text--asiri { font-size: 150px; text-transform: uppercase; font-weight: 900; stroke: #fff; stroke-width: 1.5; }
JavaScript :
<script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var requestId, jolttime; var c = document.getElementById('canv'); var $ = c.getContext('2d'); var s = 18; //grid square size var mv = 10; //moving areas var sp = 1; //move speed var clm = 23; //columns var rw = 10; //rows var x = []; //x array var y = []; //y array var X = []; //starting X array var Y = []; //starting Y array c.width = c.offsetWidth; c.height = c.offsetHeight; for (var i = 0; i < clm * rw; i++) { x[i] = ((i % clm) - 0.5) * s; y[i] = (Math.floor(i / clm) - 0.5) * s; X[i] = x[i]; Y[i] = y[i]; } var t = 0; function jolt() { $.fillRect(0, 0, c.width, c.height); for (var i = 0; i < clm * rw; i++) { if (i % clm != clm - 1 && i < clm * (rw - 1) - 1) { $.fillStyle = "hsla(0,0,0,1)"; $.strokeStyle = "#95D384"; $.lineWidth = 1; $.beginPath(); $.moveTo(x[i], y[i]); $.lineTo(x[i + 1], y[i + 1]); $.lineTo(x[i + clm + 1], y[i + clm + 1]); $.lineTo(x[i + clm], y[i + clm]); $.closePath(); $.stroke(); $.fill(); } } for (var i = 0; i < rw * clm; i++) { if ((x[i] < X[i] + mv) && (x[i] > X[i] - mv) && (y[i] < Y[i] + mv) && (y[i] > Y[i] - mv)) { x[i] = x[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp; y[i] = y[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp; } else if (x[i] >= X[i] + mv) { x[i] = x[i] - sp; } else if (x[i] <= X[i] - mv) { x[i] = x[i] + sp; } else if (y[i] >= Y[i] + mv) { y[i] = y[i] - sp; } else if (y[i] <= Y[i] + mv) { y[i] = y[i] + sp; } } //controls time of electric shake> when counter equals 0, it will reset for 5s then start again. if (t % c.width == 0) { jolttime = setTimeout('jolt()', 5); t++; } else { jolttime = setTimeout('jolt()', 5); t++; } } function start() { if (!requestId) { requestId = window.requestAnimFrame(jolt); } } function stop() { if (requestId) { clearTimeout(jolttime); window.cancelAnimationFrame(requestId); requestId = undefined; } } document.querySelector('a.link--asiri').addEventListener('mouseenter', start); document.querySelector('a.link--asiri').addEventListener('mouseleave', stop); </script> <script> // For Demo purposes only (show hover effect on mobile devices) [].slice.call( document.querySelectorAll('.grid a') ).forEach( function(el) { el.onclick = function() { return false; } } ); </script>
HTML :
<!-- SVG for effect "Asiri" --> <svg class="hidden svg--asiri" viewBox="0 0 400 200"> <!-- Symbol with text --> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy="0.35em" textLength="280" class="text--asiri">Asiri</text> </symbol> <!-- Mask with text --> <mask id="m-text" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> <rect width="100%" height="100%" class="mask__shape"> </rect> <use xlink:href="#s-text" class="mask__text"></use> </mask> </svg> <div class="grid__item color-10"> <a class="link link--asiri" href="#"> <!-- Content for text --> <div class="text-fill"> <canvas id="canv" width="400" height="200"></canvas> </div> <!-- SVG to cover text fill --> <svg viewBox="0 0 400 200" class="svg-inverted-mask"> <!-- Big shape with hole in form of text --> <rect width="100%" height="100%" mask="url(#m-text)" class="shape--fill"></rect> <!-- Transparent copy of text to keep patterned text selectable --> <use xlink:href="#s-text" class="text--transparent"></use> </svg> </a> </div>