SVG-анимация из центра при CSS-hover

Question

Я сделал этот эффект в 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.}

Answer 1

Я изменил код, чтобы вместо этого анимировать stroke-dasharray.

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>

_{Свободный перевод ответа от участника @Robert Longson.}

Answer 2

Можно и на CSS... Так и не смог обойтись без дополнительных элементов в разметке ):

body { background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#0e1634; background-size:16px 16px; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;}
/* Общий контейнер и градиент-полоска*/
.on_off {
  width: 50px; height: 50px;
  background-image: linear-gradient(to right, transparent 23px, green 24px, green 26px, transparent 27px);
  background-repeat: no-repeat; background-size: 50px 3px;
  filter: drop-shadow(0 0 5px yellow);
  transition: 1s ease;
}
.on_off:hover { background-size: 50px 50px; }
/* Контейнеры для полуколец */
.on_off>i {
  position: relative; display: inline-block;
  height: 100%; width: 50%; overflow: hidden;
}
/* Градиенты-полукольца */
.on_off>i::after {
  content: ''; position: absolute;
  height: 100%; width: 100%;
  transition: 1s ease;
}
.on_off>i:first-child::after {
  left: 0; transform-origin: right center;
  background-image: radial-gradient(circle at 100% 50%, transparent 21px, red 22px, red 24px, transparent 25px);
}
.on_off:hover>i:first-child::after { transform: rotate(-.5turn); }

.on_off>i:last-child::after {
  right: 0; transform-origin: left center;
  background-image: radial-gradient(circle at 0% 50%, transparent 21px, blue 22px, blue 24px, transparent 25px);
}
.on_off:hover>i:last-child::after { transform: rotate(.5turn); }

<div class="on_off"><i></i><i></i></div>

БЛОГ НА HUSL

SVG-анимация из центра при CSS-hover

Ответы (2 шт):