SOURCE

var rect = document.getElementById('rect')

rect.onmouseenter = function(){
    $('#triangle').attr('stroke','#00C9A7')
    $('#triangle').attr('transform',"rotate(360 50 50)")
    $('#circle').attr('stroke','#00C9A7')
}

rect.onmouseleave = function(){
    $('#triangle').attr('stroke','#fff')
    $('#triangle').attr('transform',"rotate(0 50 50)")
    $('#circle').attr('stroke','#fff')
}

<svg viewBox="0 0 100 100">
	<circle fill="none" stroke="#fff" stroke-width="0.7" cx="50" cy="50" r="10" stroke-linecap="round" id="circle" transform="rotate(90 50 50)"></circle>
	<polyline points="50,45 45,55 55,55 50,45" fill="none" stroke="#fff" stroke-width="0.7" id="triangle" transform="rotate(0 50 50) scale(0.8 50 50)"></polyline>
    <rect x="40" y="40" width="20" height="20" fill-opacity="0" fill="#fff" id="rect"/>
</svg>

body {
    display: flex;
    justify-content: center;
    align-content: center;
}

svg {
    width: 200px;
    background-color: #333744;
}

#triangle {
    transition: all 0.5s ease-in-out;
}