JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="312px" height="300px" viewBox="0 0 260 250" enable-background="new 0 0 260 250" xml:space="preserve">
            <g>
                <path id="symbol" opacity="0.2" fill="#848383" enable-background="new    " d="M185.631,140.915l5.02,10.86l8.145-3.765
                    l-5.02-10.86L185.631,140.915z M246.828,109.341l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
                <g id="head">
                    <polygon fill="#09B39C" points="44.613,146.703 26.665,140.721 8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523 
                        119.387,206.523 119.387,167.64      "/>
                    <polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="-0.252,146.703 11.712,170.631 26.667,140.721 
                        8.721,146.703       "/>
                    <polyline opacity="0.2" fill="#FFFFFF" enable-background="new    " points="8.718,146.703 20.685,152.685 26.665,140.721      "/>
                    <polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="44.613,146.703 53.613,163.667 17.694,143.712 
                        26.667,140.721      "/>
                </g>
                <g id="upper-head">
                    <g id="upper-jaw">
                        <g>
                            <path id="upper-teeth" fill="#E0CAB1" d="M151.174,129.382l14.913,6.086l-6.602-14.691L151.174,129.382z M138.707,142.292
                                l14.914,6.086l-6.603-14.692L138.707,142.292z M126.241,155.201l14.913,6.086l-6.602-14.692L126.241,155.201z M163.64,116.474
                                l14.913,6.085l-6.603-14.692L163.64,116.474z M176.106,103.564l14.913,6.086l-6.602-14.692L176.106,103.564z M188.572,90.655
                               ...

JavaScript

var croc = Snap.select("#crocodile"),
                head = croc.select("#upper-head"),
                jaw = croc.select("#upper-jaw"),
                symbol = croc.select("#symbol"),
                timer;
                
            var pivots = [
                [44, 147],
                [92, 126]
            ];

            function close() {
                clearTimeout(timer);

                head.animate({ 
                    transform: "r" + [8, pivots[0]]
                }, 500, mina.backin);
                
                jaw.animate({
                    transform: "r" + [37, pivots[1]]
                }, 500, mina.backin);

                timer = setTimeout(function () {
                    symbol.animate({
                        transform: "t-70,40r40"
                    }, 100);
                }, 400);
            }

            function open() {
                clearTimeout(timer);

                head.animate({ 
                    transform: "r" + [0, pivots[0]]
                }, 700, mina.elastic);
                
                jaw.animate({
                    transform: "r" + [0, pivots[1]]
                }, 700, mina.elastic);

                symbol.animate({
                    transform: "t0,0r0"
                }, 500, mina.elastic);
            }

            timer = setTimeout(close, 50);

            croc.hover(open, 
                function () {
                    timer = setTimeout(close, 200);
                }
            );
            open();
            /* close(); */