JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<script src="https://rawgithub.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.js"></script>
<script src="https://rawgithub.com/jQueryKeyframes/Keyframes.Pathfinder/master/keyframes.pathfinder.js"></script>
<div class="container"></div>

<button id="addBtn">Add Circle</button>

CSS

.circle{
    border-radius: 50%;
    position: absolute;
}

JavaScript

var scales = {};
for(var i = 0; i < 50; i++){
    scales[i+'%'] = { transform: 'scale('+ (1 - (0.017 * i))+')' };
}
for(var i = 0; i < 50; i++){
    scales[(50+i)+'%'] = { transform: 'scale('+ (0.2 + (0.017 * i))+')' };
}

var btnCount = 0;
function random(min,max){
    return Math.floor(Math.random() * (max - min) + min);   
}

$('#addBtn').click(function(){
    var rules = $.extend({
        name: 'curvey'+btnCount
    }, scales);
    
    rules = $.keyframe.circlePath(rules, [150, 150], random(20,100));
    
    $.keyframe.define([rules]);
    
    var size = random(10, 30);
    var color = random(0,9);
    var time = random(1800, 6000);
    var randbool = random(0,2);
    var forwards = "normal forwards";
    if(randbool == 1){ forwards = "reverse backwards"; }
    
    $('.container').append('<div class="circle circle'+btnCount+'" style="width:'+size+'px;height:'+size+'px;background:#'+color+color+color+'"></div>');
    $('.circle'+btnCount).playKeyframe('curvey'+btnCount+' '+time+' linear 0 infinite '+forwards);
    btnCount++;
});