<svg id="svgmenu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
<path class="line" d="M13.5,30.5c0,0,14.1-14.1,17-17c0,0,1.8-1.8,4.6-4.7c4.3-4.3,6.7,2.7,1.9,2.7H7"/>
<path class="line" d="M13.5,13.5c0,0,14.1,14.1,17,17c0,0,1.8,1.8,4.6,4.7c4.3,4.3,6.7-2.7,1.9-2.7H7"/>
<path class="circle" d="M37,22H7H2C2,11,11,2,22,2s20,9,20,20s-9,20-20,20S2,33,2,22"/>
</svg>
<p>Design by <a href="http://jeangontijo.com">Jean Gontijo</a></p>
body {
background:#02FEB4;
margin:0;
}
p {
position:absolute;
bottom: 5vh;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
width: 100%;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
#svgmenu {
position:absolute;
left:40vw;
top:calc(50vh - 10vw);
width:20vw;
height:20vw;
}
#svgmenu .line {
fill:none;
stroke:#000;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray:70;
stroke-dashoffset:100;
animation: line 5s infinite;
/* transition: 1s ease-out; */
}
/* #svgmenu.active .line {
stroke-dashoffset:186;
} */
@keyframes line {
0% {
stroke-dashoffset:100;
}
20% {
stroke-dashoffset:186;
}
50% {
stroke-dashoffset:186;
}
70% {
stroke-dashoffset:100;
}
}
#svgmenu .circle {
fill:none;
stroke:#000;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-opacity:1;
stroke-dasharray:160;
stroke-dashoffset:450;
animation: circle 5s infinite;
/* transition: 1s ease-out; */
}
/* #svgmenu.active .circle {
stroke-dasharray:163;
stroke-dashoffset:290;
} */
@keyframes circle {
0% {
stroke-dasharray:160;
stroke-dashoffset:450;
}
20% {
stroke-dasharray:163;
stroke-dashoffset:290;
}
50% {
stroke-dasharray:163;
stroke-dashoffset:290;
}
70% {
stroke-dasharray:160;
stroke-dashoffset:450;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.