JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div id=logo></div>

JavaScript

var Logo = {
    color: '#0099A6'
    , paper: new Raphael('logo', 395, 140)
    , h: null
    , init: function() {
        this.draw();
    }            
    , draw: function() {
        this.h = this.paper.path(smallH).attr({fill: this.color, stroke: 'transparent'});
        this.h.node.style.cursor = 'pointer';
    }
    , growH: function() {
        this.h.animate({path: bigH}, 1000);
        this.isBig = true;
    }
    , shrinkH: function() {
        this.h.animate({path: smallH}, 1000);
        this.isBig = false;
    }
    , isBig: false
}    

    var smallH = 'M176.479,100.137V86.016c0-6.386-3.195-9.417-8.604-9.417c-3.572,0-6.277,1.676-7.9,4.004V59.142h-9.631 v4.49l1.895,0.109c1.027,0.053,1.352,0.378,1.352,1.568L153.561,104l0,0.627h6.415h3.137v-4.328l-3.082-0.162V87.041 c0-2.813,2-5.464,5.789-5.464c3.463,0,4.219,2.544,4.219,5.845v11.146c0,1.352-0.539,1.676-1.568,1.785l-1.785,0.162v4.111h12.879 v-4.328L176.479,100.137z';
    
var bigH = 'M153.59,29.537c0-1.19-0.324-1.515-1.352-1.568l-1.895-0.109v-4.49h9.632v57.462 c1.623-2.328,4.328-4.005,7.899-4.005c5.41,0,8.604,3.031,8.604,9.416v14.121l3.084,0.162v4.329h-12.878v-4.112l1.785-0.162 c1.028-0.108,1.568-0.433,1.568-1.785V87.648c0-3.3-0.757-5.844-4.22-5.844c-3.788,0-5.79,2.651-5.79,5.464v13.095l3.083,0.162 v4.329h-9.579L153.59,29.537z';

Logo.init();
Logo.h.node.addEventListener('click', function() {
    if (Logo.isBig) {
        Logo.shrinkH();
    } else {
        Logo.growH();
    }
});