<svg viewBox="0 0 10 10" class="svg-1">
  <path d="M2,2 L8,8" />
</svg>
.svg-1:hover path {
  d: path("M8,2 L2,8");
}

svg {
  width: 30%;
  height: 30%;
  background: #eee;
  margin-bottom: 5%;
}
svg polyline,
svg line,
svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.