JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://keyten.github.io/Graphics2D/js/Graphics2D.js"></script>
<canvas id="cnv" width="400" height="400"></canvas>

JavaScript

var ctx = Graphics2D.id('cnv');
// встречается небольшой баг из-за того, что нет очереди анимаций
for(var i = 0; i < 100; i++){
	ctx.circle({
		cx : Math.floor(Math.random() * 700),
		cy : Math.floor(Math.random() * 400),
		radius : 10,
		fill : 'rgb(' + [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255)].join(',') + ')'
	}).mouseover(function(){
		this.animate({
			radius : 20,
			opacity : 0.5,
		}, 300);
	}).mouseout(function(){
        setTimeout(function(){
            this.animate({
			radius : 10,
			opacity : 1
		}, 300);
        }.bind(this), 300);
	});
}