<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.