48px-colored_i-switcher.html

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
   <title>Switcher</title>
   <g class="nc-interact_switcher-c-48">
	<rect x="2" y="11" width="44" height="26" rx="13" ry="13" fill="#d1d1d1"/>
	<rect class="nc-switcher-background" x="2" y="11" width="44" height="26" rx="13" ry="13" fill="#72C472" opacity="0"/>
	<circle cx="15" cy="24" r="11" fill="#fff"/>
   </g>

   <script>
        (function() {
            if (!window.requestAnimationFrame) {
                <!-- http://paulirish.com/2011/requestanimationframe-for-smart-animating/ -->
                var ncStart = null; 
                window.requestAnimationFrame = function(callback, element) {
                    var currTime = new Date().getTime();
                    if (!ncStart) ncStart = currTime;
                    var timeToCall = Math.max(0, 16 - (currTime - ncStart));
                    var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
                    ncStart = currTime + timeToCall;
                    return id;
                };
            }
            
            if (typeof(ncFindAncestor) !== typeof(Function)) {
                function ncFindAncestor (element) {
                    var parent = element.parentNode;
                    if( parent.tagName !== 'svg' ) {
                        parent = ncFindAncestor(parent);
                    }
                    return parent;
                }
            }
            
            if (typeof(ncEaseInOutQuart) !== typeof(Function)) {
                <!-- https://github.com/danro/jquery-easing/blob/master/jquery.easing.js -->
                function ncEaseInOutQuart(t, b, c, d) {
                    if ( 1 > (t/=d/2)) return c/2*t*t*t*t + b;
                    return -c/2 * ((t-=2)*t*t*t - 2) + b;
                }
            }

            function NcSwitcher( element ) {
                this.element = element;
                this.circle = this.element.getElementsByTagName('circle')[0];
                this.background = this.element.querySelectorAll('.nc-switcher-background')[0];

                this.time = {start: null, total: 200};
                this.status = {interacted : false, animating : false};
                this.init();
            };

            NcSwitcher.prototype.init = function() {
                var self = this;
                this.element.addEventListener('click', function(){
                    if(self.status.animating) return;
                    self.status.animating = true;
                    window.requestAnimationFrame(self.triggerAnimation.bind(self));
                });
            };

            NcSwitcher.prototype.triggerAnimation = function(timestamp) {
                var progress = this.getProgress(timestamp),
                    animationProgress = (this.status.interacted) ? this.time.total - progress : progress;
                this.animateIcon(animationProgress);
                this.checkProgress(progress);
            };

            NcSwitcher.prototype.getProgress = function(timestamp) {
                if (!this.time.start) this.time.start = timestamp;
                return timestamp - this.time.start;
            };

            NcSwitcher.prototype.checkProgress = function(progress) {
                var self = this;
                if (this.time.total > progress) {
                    window.requestAnimationFrame(self.triggerAnimation.bind(self));
                } else {
                    this.status = {interacted : !this.status.interacted, animating : false}; 
                    this.time.start= null;
                }
            };

            NcSwitcher.prototype.animateIcon = function(progress) {
                if(progress > this.time.total) progress = this.time.total;
                if(0 > progress) progress = 0;
                var unitTransform = ncEaseInOutQuart(progress, 0, 1, this.time.total).toFixed(2);
                this.circle.setAttribute('transform', 'translate('+unitTransform*18+' 0)');
                this.background.setAttribute('opacity', unitTransform);
            }

            var ncInteract = document.getElementsByClassName('nc-interact_switcher-c-48');
            if( ncInteract ) {
                for( var i = 0; ncInteract.length > i; i++ ) {
                    (function(i) {
                        new NcSwitcher(ncFindAncestor(ncInteract[i]));
                    }(i));
                }
            }
        }());
   </script>
</svg>