JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<div id="holder"></div>

JavaScript

Raphael.fn.ball = function (x, y, r, hue) {
  hue = hue || 0;
  return this.set(
    this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
    this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
    this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
  );
};
window.onload = function () {
  var R = Raphael("holder"), 
  var x = 310, y = 180, r = 150;
  R.ball(x, y, r, Math.random());
};