Skip to content

Instantly share code, notes, and snippets.

@dlewand691

dlewand691/SVG-Animation.markdown

Created February 25, 2014 16:42
Show Gist options
  • Save dlewand691/9212687 to your computer and use it in GitHub Desktop.
Save dlewand691/9212687 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Daniel Lewandowski.
Raw
index.html
<div class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
</svg>
<div class="text">HOVER</div>
</div>
Raw
style.css
html, body {
background: rgb(20,20,20);
text-align: center;
height: 100%;
overflow: hidden;
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
}
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
font-family: 'Roboto Condensed';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
}
Raw
SVG-Animation.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment