JSFiddle - React, Tailwind, and code Playground

by Paul Irish

HTML

<svg><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"
    />
    <circle class="eyes" cx="350" cy="200" r="40" fill="black"
    />
    
    <circle class="eyes" cx="170" cy="180" r="10" fill="white"
    />
    <circle class="eyes" cx="370" cy="180" r="10" fill="white"
    />
   
    <a xlink:href="http://ponies.com">
      <path  d="M 230 275 L 270 275 L 250 290 z"
      fill="blue"
      />
    </a>
    
    <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 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);
}*/