<div>
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="m100 153.6-52.9 27.8 10.1-58.9-42.8-41.7 59.1-8.6 26.5-53.6 26.5 53.6 59.1 8.6-42.8 41.7 10.1 58.9z"/>
  </svg>
</div>
div {
  width: 200px;
  margin: 0 auto;
}
svg {
  width: 200px;
  height: 200px;
  pointer-events: none;
}
path {
  fill: #009; 
  cursor: pointer;
  pointer-events: fill;
  transition: all 0.3s ease;
}

path:hover {
  fill: #f00; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.