JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas"></div>

JavaScript

var canvas = Raphael('canvas', 322, 273);

var points = [{x: 140, y: 30},  {x: 170, y: 45},  {x: 200, y: 60},  {x: 230, y: 75}, {x: 260, y: 90}, 
		  {x: 260, y: 120}, {x: 260, y: 150}, {x: 260, y: 180}, {x: 260, y: 210}, 
		  {x: 230, y: 225},   {x: 200, y: 240},   {x: 170, y: 255},   {x: 140, y: 270}, 
		  {x: 110, y: 255}, {x: 80, y: 240}, {x: 50, y: 225}, {x: 20, y: 210}, 
		  {x: 20, y: 180}, {x: 20, y: 150}, {x: 20, y: 120}, {x: 20, y: 90}, 
		  {x: 50, y: 75}, {x: 80, y: 60}, {x: 110, y: 45} ]

var pulse = function(p) {
	p.mouseover(function(e){
		p.animate({
			"20%":  {r: 15},
			"60%": {r: 8},
			"80%": {r: 12},
			"100%": {r: 10}
		}, 500);
	});
}
	
for (var i = 0; i < points.length; i++) {
    points[i].p = canvas.circle(points[i].x, points[i].y, 10).attr({fill: "#999", "stroke-width": 0});
    pulse(points[i].p);
};