Atm im trying to recreate the SVG circle animation when you hover over the navigation menu buttons as shown on this site: https://5scontent.com/. On my site the circle appears when refreshing and disappears afterwards.
* {
margin: 0;
padding: 0;
font-family: 'Alata';
}
.container {
width: 100%;
min-height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: black;
position: relative;
z-index: 1;
}
.navbar {
width: 90%;
height: 10vh;
margin: auto;
display: flex;
align-items: center;
}
.logo {
width: 120px;
cursor: pointer;
}
nav {
flex: 1;
text-align: right;
}
.svg-container{
position: absolute;
}
.svg{
position: absolute;
top: 0px;
left: 1125px;
}
.symbol {
fill: transparent;
stroke: white;
stroke-width: 1px;
stroke-dasharray: 150;
stroke-miterlimit: 10;
stroke-dashoffset: 150;
transition: all 3s linear;
}
nav ul li a:hover + .svg-container .symbol{
stroke-dashoffset: 0;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 60px;
}
nav ul li a{
text-decoration: none;
color: white;
font-size: 14px;
padding: 5px 2px;
}
<body>
</div>
<div class="container">
<div class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<div class="svg-container">
<svg width="100" height="100" class="svg">
<circle cx="50" cy="10" r="4" stroke-width="4" class="symbol"/>
</svg>
</div>
<li><a href="#">Work</a></li>
</ul>
</nav>
This is my first question on here, so bare with me if i have put it together in a more confusing way. :)