JSFiddle - React, Tailwind, and code Playground
by Yuriy Petrichenko
HTML
<h1>menu</h1>
<svg width="100px" height="50px">
<polyline points="2,10 80,10"></polyline>
</svg>
CSS
body{
background-color:#3c475c;
}
polyline{
margin:0;
padding:0;
stroke:yellowgreen;
fill:transparent;
stroke-width:3px;
stroke-dasharray:100;
stroke-dashoffset:0;
animation: lines 1s linear infinite;
}
@keyframes lines{
0%{
stroke-dashoffset:100;
}
100%{
stroke-dashoffset:0;
}
}
h1{
cursor:pointer;
color:yellowgreen;
margin:0;
padding:0;
transition:all .5s;
}
h1:hover{
transition:all .5s;
color:#fff;
}