Tween.js – Trying to play SVG animation forwards on mouse-over and backwards on mouse-out

In my current code, the animation plays forwards and backwards on mouse-over. Is there a way to make it play forwards on mouse-over and backwards on mouse-out? Thanks.

// write a simple tween object
var tween = KUTE.fromTo('#rectangle',  // target shape
   { path: '#rectangle' }, // from shape
   { path: '#star' }, // to shape
   { // options
      easing: 'easingCubicInOut', 
      yoyo: true, repeat: 1, duration: 2000}
 ).start();

// trigger it whenever you want
document.getElementById('wrapper').onmouseover = function() {
  !tween.playing && tween.start();
}

svg {
overflow: visible;
}

body {
background: #333;
color: #ccc;
overflow: hidden;
}

#wrapper {
width: 200px;
float: left;
margin: 0 20px 0 10px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/kute.min.js"></script>
<div id="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
    <path id="rectangle" fill="lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z" />
    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
    l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
  </svg>
</div>