CSS
html, body{
background: rgba(21, 21, 21, 1);
text-align: center;
height: 100%;
overflow: hidden;
}
.svg-content{
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 400px;
}
.shape{
stroke-dasharray 140 640;
stroke-dashoffset: -590;
fill: transparent;
stroke: #f00;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text{
color: #f00;
font-family: "Helvetica";
font-size: 24px;
line-height: 32px;
letter-spacing: 8px;
top: -48px;
position: relative;
}
.svg-content:hover .shape{
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 960;
}
1 Response