SVG Animation - CSS Hover Animation For SVG From The Center

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

user_1038015 · Answer

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;
}

user_8259910 · Answer

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 Animation - CSS Hover Animation For SVG From The Center

2 Answers