JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/bonsai/0.4.3/bonsai.min.js"></script>
<div id="bonsai"></div>
<button id="benchmark">Benchmark</button>
<script type="bs" id="bs">
var centerX = 250,
centerY = 250,
circles = 140,
distance = 180,
frames = 14,
radiusMin = 10,
radiusVar = 10;
var circle, random = Math.random;
for (var i = 0; i < circles; ++i) {
var f = i / circles,
x = centerX + distance * Math.sin(f*2*Math.PI),
y = centerY + distance * -Math.cos(f*2*Math.PI),
radius = random() * radiusVar + radiusMin;
circle = bonsai.Path.
circle(x, y, radius).
attr({fillColor: 'random'});
circle.x = x;
circle.y = y;
stage.addChild(circle);
}
var c = stage.children();
stage.length(frames);
var spread = 80;
stage.on(0, function() {
for (var i = 0, circle; (circle = c[i++]); ) {
circle.animate(frames, {
x: circle.x + spread * random() - spread / 2,
y: circle.y + spread * random() - spread / 2
}, {easing: 'sineInOut'});
}
});
</script>
JavaScript
/*!
* Benchmark.js v1.0.0 <http://benchmarkjs.com/>
* Copyright 2010-2012 Mathias Bynens <http://mths.be/>
* Based on JSLitmus.js, copyright Robert Kieffer <http://broofa.com/>
* Modified by John-David Dalton <http://allyoucanleet.com/>
* Available under MIT license <http://mths.be/mit>
*/
;(function(window, undefined) {
'use strict';
/** Used to assign each benchmark an incrimented id */
var counter = 0;
/** Detect DOM document object */
var doc = isHostType(window, 'document') && document;
/** Detect free variable `define` */
var freeDefine = typeof define == 'function' &&
typeof define.amd == 'object' && define.amd && define;
/** Detect free variable `exports` */
var freeExports = typeof exports == 'object' && exports &&
(typeof global == 'object' && global && global == global.global && (window = global), exports);
/** Detect free variable `require` */
var freeRequire = typeof require == 'function' && require;
/** Used to crawl all properties regardless of enumerability */
var getAllKeys = Object.getOwnPropertyNames;
/** Used to get property descriptors */
var getDescriptor = Object.getOwnPropertyDescriptor;
/** Used in case an object doesn't have its own method */
var hasOwnProperty = {}.hasOwnProperty;
/** Used to check if an object is extensible */
var isExtensible = Object.isExtensible || function() { return true; };
/** Used to access Wade Simmons' Node microtime module */
var microtimeObject = req('microtime');
/** Used to access the browser's high resolution timer */
var perfObject = isHostType(window, 'performance') && performance;
/** Used to call the browser's high resolution timer */
var perfName = perfObject && (
perfObject.now && 'now' ||
perfObject.webkitNow && 'webkitNow'
);
/** Used to access Node's high resolution timer */
var processObject = isHostType(window, 'process') && process;
/** Used to check if an own property is enumerable */
var...