svg play animatinon

by lagudal

HTML

<svg id="play-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80">
  <defs>
    <clipPath id="clip" x="0" y="0" width="80" height="80">
      <path id="clip-border"  d="M73,40A33,33,0,0,0,45.84,7.52a27.75,27.75,0,0,1-4.91-1.38A13.59,13.59,0,0,0,27.39,8.41a36.79,36.79,0,0,1-4.49,3.37c-.42.25-.84.52-1.25.8a30.72,30.72,0,0,1-9.14,4.15,13.28,13.28,0,0,0-7.24,4.91c-7,9.41,1.39,18.19,2,22.26C9.52,60.24,23.09,73,40,73a32.84,32.84,0,0,0,20.87-7.44,29.2,29.2,0,0,1,6.95-4.27A13.2,13.2,0,0,0,73.25,57C79.37,48.79,73,43,73,40ZM40,71A31,31,0,1,1,71,40,31,31,0,0,1,40,71Z"/>
    </clipPath>
    <linearGradient id="linear-gradient" x2="80" y2="80" gradientUnits="userSpaceOnUse">
      <stop offset="0.19" stop-color="#46d5f1"/>
      <stop offset="0.4" stop-color="#2853fa"/>
      <stop offset="0.58" stop-color="#a164f2"/>
      <stop offset="0.75" stop-color="#dc32fb"/>
    </linearGradient>
  </defs>
  <g clip-path="url(#clip)">
    <rect id="bg-grad" width="80" height="80" fill="url(#linear-gradient)"/>
  </g>
  <path d="M50.21,38.27,35.79,29.94a2,2,0,0,0-3,1.73V48.33a2,2,0,0,0,3,1.73l14.42-8.33A2,2,0,0,0,50.21,38.27Z" fill="#272932"/>
</svg>

CSS

body {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#play-btn {
  width: 160px;
  height: 160px;
}

.played {
  animation: rotate 1s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript

$(document).ready(function() {
  $('#play-btn').click(function() {
    $('#clip-border').toggleClass("played");
  });
});