svg hover demo

by Stalk

HTML

<svg viewBox="0 0 300 300">
  <path id="foo" d="M14 133 L18 106 L72 61 L128 105 L130 131 L72 88 Z" />
</svg>

CSS

svg {
  width: 100%;
}
svg #foo {
  fill: yellow;
  opacity: 0.2;
}
svg #foo:hover {
  fill: orange;
  opacity: 0.7;
}
svg {
  border: sol1d 1px tomato;
  background: url(https://static.pexels.com/photos/68631/pexels-photo-68631.jpeg) 100% 100% no-repeat;
  background-size: cover;
}