Hover-D'Hover

HTML
<div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <g id="black-layer"> <polyline fill="none" stroke="#cccccc" stroke-width="5" stroke-miterlimit="10" points="204.541,97.778 350.234,97.778 423.08,232.545 350.234,367.311 204.541,367.311 131.695,232.545 196.844,112.018 304.145,112.019 368.212,231.752 304.145,351.486 176.009,351.486 111.941,231.752 169.065,124.995 263.16,124.995 321.124,232.235 263.16,339.476 147.23,339.476 89.263,232.235 139.482,139.328 218.607,139.328 268.148,234.35 218.607,329.372 119.524,329.372 69.982,234.35 111.941,153.872 175.661,156.353 214.232,231.752 174.322,316.508 91.054,316.508 49.42,235.121 83.028,169.423 130.749,169.424 164.672,238.4 131.695,305.456 62.901,307.379 28.978,238.4 57.825,179.745 77.486,180.257 "/> </g> <g id="black-layer"> <polyline fill="none" class="path" stroke="#000000" stroke-width="5" stroke-miterlimit="10" points="204.541,97.778 350.234,97.778 423.08,232.545 350.234,367.311 204.541,367.311 131.695,232.545 196.844,112.018 304.145,112.019 368.212,231.752 304.145,351.486 176.009,351.486 111.941,231.752 169.065,124.995 263.16,124.995 321.124,232.235 263.16,339.476 147.23,339.476 89.263,232.235 139.482,139.328 218.607,139.328 268.148,234.35 218.607,329.372 119.524,329.372 69.982,234.35 111.941,153.872 175.661,156.353 214.232,231.752 174.322,316.508 91.054,316.508 49.42,235.122 83.028,169.423 130.749,169.424 164.672,238.4 131.695,305.456 62.901,307.379 28.978,238.4 57.825,179.745 77.486,180.257 "/> </g> </svg> </div> <span> <h1 align="center" id="title">HOVER-D'HOVER</h1> <h3 id="sub-title">FAISAL NASEER @ PETRICHORS.COM</h3> </span>
CSS
svg{ position : absolute; top : 200px; bottom :0; left:0; right:0; margin:auto; } .path{ stroke-dasharray : 3850; stroke-dashoffset : 3850; transition : 10s all; } svg:hover .path{ stroke-dashoffset : 0; } h1{ color: #a7a7a7; font-family: 'Open Sans Condensed', sans-serif; font-size: 70px; font-weight: bold; letter-spacing: -4px; line-height: 1; text-align: center; margin-top:50px;margin-bottom:10px; } h3{ color: #a7a7a7; font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: bold; letter-spacing: -3px; line-height: 1; text-align: center; margin-top:10px; } body{ background-color:#fff; } }
JAVASCRIPT
var i = -30, stopLimit = -3; function f() { document.getElementById("title").style.letterSpacing = i+"px"; i++; if( i < stopLimit ){ setTimeout( f, 50 ); } } f();
Expand for more options Login