JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="height:500px;"><circle fill="yellow"
    r="200"
    cx="250"
    cy="250"
    stroke="black" stroke-width="3"/>
    <ellipse fill="yellow"
    rx="220"
    ry="160"
    cx="250"
    cy="300"
    stroke="black" stroke-width="3"/>
    <ellipse fill="yellow"
    rx="200"
    ry="155"
    cx="250"
    cy="252"
    />
    <circle class="shockers" cx="100" cy="300" r="50" fill="red"
    stroke="black" stroke-width="3"/>
    <circle class="shockers" cx="400" cy="300" r="50" fill="red"
    stroke="black" stroke-width="3"/>
    
    <circle class="eyes" cx="150" cy="200" r="40" fill="black"
    fill-opacity="1"/>
    <circle class="eyes" cx="350" cy="200" r="40" fill="black"
    fill-opacity="1"/>
    
    <circle class="eyes" cx="170" cy="180" r="10" fill="white"
    />
    <circle class="eyes" cx="370" cy="180" r="10" fill="white"
    />
    
    <path class="blink" d="M 100 200 L 200 200"
    stroke="black" stroke-width="3"
    stroke-opacity="0"/>
    <path class="blink" d="M 300 200 L 400 200"
    stroke="black" stroke-width="3"
    stroke-opacity="0"/>
    
    <path d="M 230 275 L 270 275 L 250 290 z"
    fill="black"
    />
    
    <path d="M 175,320
    Q 200,350 250,320
    Q 300,350 325,320"
    stroke="black" stroke-width="3" fill="none"
    />
    
    <!--<path d="M80,80 l 0,0 a25,45 0 0,1 50,0 l 0,0"
    fill="red"
    stroke="black"
    stroke-width="4" />-->
    
</svg>

JavaScript

$('.shockers').hover(function() {
    var r = parseInt(this.getAttribute("r"));
    r = r * 1.1;
    this.setAttribute("r", r);
}, function() {
    var r = parseInt(this.getAttribute("r"));
    r = r / 1.1;
    this.setAttribute("r", r);
});

var eyes = document.getElementsByClassName('eyes'),
    blink = document.getElementsByClassName('blink'),
    curEye = parseInt(eyes[0].getAttribute("fill-opacity")),
    curBlink = parseInt(blink[0].getAttribute("stroke-opacity")),
    blinky = function() {
        setTimeout(function() {
            blinkToggle();
            setTimeout(function() {
                blinkToggle();
                blinky();
            }, 100);
        }, 3000);
    },
    blinkToggle = function() {
        for (i = 0; i < eyes.length; i++) {
            eyes[i].setAttribute("fill-opacity", curBlink);
        }
        for (i = 0; i < blink.length; i++) {
            blink[i].setAttribute("stroke-opacity", curEye);
        }
        if (curEye == 0) {
            curEye = 1;
            curBlink = 0;
        }
        else {
            curEye = 0;
            curBlink = 1;
        }
    };

blinky();

/*var redcircle;

// variable representing circle's radius
var r;

window.onload = function() {
    redcircle = document.getElementsByTagName('circle');
    r = parseInt(redcircle.getAttribute("r"));
}

var grow = function() {
    r = 1.5 * r;
    redcircle.setAttribute("r", r);
}

var shrink = function() {
    r = r / 1.5;
    redcircle.setAttribute("r", r);
}*/