JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box"></div>
CSS
.box {
position: absolute;
top: 200px;
left: 200px;
width: 50px;
height: 20px;
background-color: #ff6600;
}
JavaScript
// Possible options:
// speedX, speedY: Speed of movement (optional)
// distX, distY: Distance to center (optional)
// centerX, centerY: Center of movement (optional)
$(function () {
$('.box').wabern({
speedX: 3,
speedY: 5,
distX: 10,
distY: 10
});
});
// (c) 99°, David Bascom 2013
// You may use this plugIn as you like, free of charge, but don't remove the (c)
(function(e){e.fn.extend({wabern:function(t){t=e.extend({centerX:false,centerY:false,speedX:3,speedY:5,distX:10,distY:10},t);this.each(function(){var n=e(this);var r=t.centerX?t.centerX:n.position().left;var i=t.centerY?t.centerY:n.position().top;var s=Math.random()*360;var o=Math.random()*360;var u=180/Math.PI;setInterval(function(){s=(s+t.speedX)%360;o=(o+t.speedY)%360;var e=r+t.distX*Math.sin(s/u);var a=i+t.distY*Math.cos(o/u);n.css({left:e,top:a})},40)})}})})(jQuery)