.svg-1:hover path {
  d: path("M8,2 L2,8");
}
.svg-2:hover path {
  d: path("M2,2 L5,8 L8,2");
}
.svg-3:hover path {
  d: path("M2,2 Q2,8 8,8");
}
.svg-4:hover path {
  d: path("M2,5 C2,2 8,2 8,5");
}
.svg-5:hover path {
  d: path("M3,3 L8,3 L2,5 L8,5 L3,7 L7,7");
}
.svg-6:hover path {
  d: path("M2,5 A 5 25 -15 0 1 8 8");
}
.svg-7:hover path {
  d: path("M2,5 S2,14 4,5 S7,8 8,4")
}
.svg-8:hover path {
  d: path("M5,2 Q 8,5 5,8")
}
.svg-9:hover path {
  d: path("M2,2 Q8,2 5,5 T8,8")
}


body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
svg {
  width: 80%;
  height: 50%;
  background: #eee;
  margin-bottom: 5%;
}
svg polyline,
svg line,
svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s;
}