<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="250" width="250" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 250 250">
 <g id="layer1">
  <path id="path4136" stroke-linejoin="round" stroke="#0ca" stroke-width="2" fill="none" d="m203 140-53.3 10.6-21.5 50-26.6-47.5-54.2-4.99 36.9-40-12-53.1 49.4 22.8 46.8-27.8-6.38 54z"/>
 </g>
</svg>
svg {
  position:absolute;
  top:0px;
  bottom:0px;
  left: 0px;
  right:0px;
  margin:auto;
}
svg path {

  fill: #4e5;
  transform-origin: 125px 125px;
  transform: rotate(0deg);
  transition: fill 2s, transform 2s;
  
}
svg path:hover {
  transform: translate(50px,0px) rotate(90deg) scale(1.25) ;
  fill: #55c;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.