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