JSFiddle - React, Tailwind, and code Playground
HTML
<div class="chilicorn"></div>
CSS
.chilicorn {
background: url('http://spiceprogram.org/assets/img/logo/chilicorn_no_text-512.png') center center no-repeat;
width: 512px;
height: 512px;
}
JavaScript
'use strict';
const chilicornEffect = (function() {
const fps = 100;
let phase = 0;
let bpm = 0;
setInterval(() => {
const scale = Math.sin(phase) * 0.25 + 0.75;
const size = scale * 512;
document.querySelector('.chilicorn').style.backgroundSize = `${size}px`;
phase += Math.PI * 2 / fps * bpm / 60;
}, 1000 / fps);
return {
setBpm: function(x) {
bpm = x;
}
};
})();
chilicornEffect.setBpm(120);