SVG Animation - CSS Hover Animation For SVG From The Center - css

Question

I have done this effect in GSAP here is the Codepen as a reference:
https://codepen.io/whitelionx/full/vYGQqBZ
const svgs = document.querySelectorAll("svg");
svgs.forEach((svg) => {
const tl = gsap
.timeline({
defaults: { ease: "power1.in" },
paused: true
})
.to(svg.children[0], { drawSVG: "50% 50%" })
.from(svg.children[1], { drawSVG: "0% 0%" }, 0);
svg.addEventListener("mouseenter", () => tl.play());
svg.addEventListener("mouseleave", () => tl.reverse());
});
Now I wanna do it with CSS solely so that when I hover my svg I get the same effect, here is my code sandbox:
https://codesandbox.io/s/xenodochial-benz-17lss?file=/src/styles.css

Answer 1

I've modified things to animate the stroke-dasharray instead.
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
svg {
width: 50px;
height: 50px;
margin: 25px;
}
.circle {
stroke-dasharray: 28.3,0,28.3;
transform-origin: 50% 50%;
transform: rotate(180deg);
transition: stroke-dasharray 0.5s linear;
}
.line {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.5s linear;
}
svg:hover .circle {
stroke-dasharray: 0,56.0;
}
svg:hover .line {
stroke-dashoffset: 0;
}
<svg
version="1.1"
shape-rendering="auto"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 20 20"
xml:space="preserve">
<path class="circle" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1z"/>
<path class="line" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,0v20"/>
</svg>

Answer 2

I also did it in the meantime and now I get better understanding of css animations thanks to your answer too :D thinking out of the box
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
svg {
width: 50px;
height: 50px;
margin: 25px;
cursor: pointer;
}
.circle {
stroke-dasharray: 56.6;
stroke-dashoffset: 0;
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.3s linear, transform 0.3s linear;
}
.line {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.3s linear;
}
svg:hover .circle {
stroke-dashoffset: 56.6;
transform: rotate(180deg);
}
svg:hover .line {
stroke-dashoffset: 0;
}
<svg
version="1.1"
shape-rendering="auto"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 20 20"
enable-background="new 0 0 20 20"
xml:space="preserve"
>
<path
class="circle"
fill="none"
stroke="#FFFFFF"
stroke-miterlimit="10"
d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1z"
></path>
<path
class="line"
fill="none"
stroke="#FFFFFF"
stroke-miterlimit="10"
d="M10,0v20"
></path>
</svg>