JSFiddle - React, Tailwind, and code Playground

by mnicolas

HTML

<div class="wrap a">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  
  <line id="line1" x1="10" y1="35" x2="90" y2="35" stroke="black" stroke-width="10" stroke-linecap="round" />
  <line id="line2" x1="10" y1="65" x2="90" y2="65" stroke="black" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="3" fill="red"/>
  
</svg>
</div>

<hr>
<div class="wrap b">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  
  <line id="line1" x1="10" y1="35" x2="90" y2="35" stroke="black" stroke-width="10" stroke-linecap="round" />
  <line id="line2" x1="10" y1="65" x2="90" y2="65" stroke="black" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="3" fill="red"/>
  
</svg>
</div>

CSS

svg{
  border: 1px solid black;
}

.wrap:hover svg #line1 {
  animation: one1 1s ease normal forwards;
}
.wrap:hover svg #line2 {
  animation: one2 1s ease normal forwards;
}


.wrap.b:hover svg #line1 {
  transform-origin: center center;
}
.wrap.b:hover svg #line2 {
  transform-origin: center center;
}


@keyframes one1 {
  50% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(15%) rotate(45deg);
  }
}
@keyframes one2 {
  50% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(-15%) rotate(-45deg);
  }
}