JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g id="shape">
        <circle fill="#FFA557" stroke="#000000" stroke-miterlimit="10" cx="254.186" cy="247.288" r="107.203" />
        <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="239.634,218.5 225.083,193.5 239.634,168.5 
		268.736,168.5 283.288,193.5 268.736,218.5 	" />
        <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="239.634,268.5 225.083,243.5 239.634,218.5 
		268.736,218.5 283.288,243.5 268.736,268.5 	" />
        <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="195.634,243.5 181.083,218.5 195.634,193.5 
		224.737,193.5 239.288,218.5 224.737,243.5 	" />
        <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="282.635,243.5 268.083,218.5 282.635,193.5 
		311.736,193.5 326.288,218.5 311.736,243.5 	" />
    </g>
    <g id="myButton">
        <rect x="123.5" y="391.5" fill="#4E105D" stroke="#000000" stroke-miterlimit="10" width="268" height="77" />
        <text transform="matrix(1 0 0 1 184.0811 439.5081)" fill="#FFFFFF" font-family="'ComicSansMS'" font-size="36">Click Me</text>
    </g>
</svg>

JavaScript

var svgNS = 'http://www.w3.org/2000/svg';
var button = document.getElementById('myButton');
var shape = document.getElementById('shape');
var rotInc = 120;
var destRot = 0;
var timelineIncFactor = 1.2;
var maxTimescale = 8;
var timeline = new TimelineMax({ paused: true, onComplete: onCompleteTimeline });
button.addEventListener('click', anim, false);

function anim(evt) {
    if (window.svgDocument == null) svgDoc = evt.target.ownerDocument;
    destRot = destRot + rotInc;
    if(timeline.timeScale() < maxTimescale) {
        timeline.timeScale(timeline.timeScale() * timelineIncFactor);
    }
    timeline.add(TweenMax.to(shape, 1, { rotation: destRot, transformOrigin: '50% 50%', ease: Linear.easeNone }));
    if (timeline.paused()) timeline.play();
}

function onCompleteTimeline() {
    timeline.clear();
    timeline.timeScale(1);
}