SVG circle animation on hover doesn't work

Question

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;

}

This is my first question on here, so bare with me if i have put it together in a more confusing way. :)

user_7897395 · Answer

One issue I see: you have a div element as a child of a list ul. This is not valid HTML.

I would put the svg inside the a element next to the text and do

a:hover > svg .symbol{
  stroke-dashoffset: 0;
}

Also the value for the stroke-dasharray and for the stroke-dashoffset is too big. In your case the value to be used is: 25.13. In order to know what value to use you can calculate the perimeter of the circle as 2 * Math.PI * 4 where 4 is the radius of the circle.

Yet another error is the size of the svg element: width="100" height:"100" when the circle has a radius r="4" I would use a 20x20 svg element.

For clarity I've simplified your code:

ul li{display:inline-block; text-align:center;padding:0 1em;}
a{color:white;}
body{background:black;color:white}


.symbol {
  stroke: white;
  stroke-dasharray: 25.13;
  stroke-dashoffset: 25.13;
  transition: all 1s linear;
}

a:hover > svg .symbol{
  stroke-dashoffset: 0;
}


  
aaaaaaa


  
  
bbbbbbb

SVG circle animation on hover doesn't work

1 Answers