Я сделал этот эффект в GSAP, вот ссылка Codepen:
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());
});
Теперь я хочу сделать это только с помощью CSS, чтобы при наведении курсора на svg я получал тот же эффект, вот мой код в sandbox:
https://codesandbox.io/s/xenodochial-benz-17lss?file=/src/styles.css
Свободный перевод вопроса SVG Animation - CSS Hover Animation For SVG From The Center от участника @Nine.