<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HoverRoll by Faisal</title>
<style>
svg{
position : absolute;
top : 20;
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;
}
</style>
</head>
<body>
<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>
<script>
var i = -30, stopLimit = -3;
function f() {
document.getElementById("title").style.letterSpacing = i+"px";
i++;
if( i < stopLimit ){
setTimeout( f, 50 );
}
}
f();
</script>
</body>
</html>
Hover and unhover over the Lens to see the filling and unfilling effect accordingly. it uses SVG Animation.
2 Responses
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.