EffectHub.com: your best source for gaming

Recommendation

More Effects...

"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(o){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(o){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return t===!0&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
var names = ['Robert', 'John Doe', 'Caroline Roux', 'Aurélie Filippeti', 'Eva Joly', 'Linus Torvalds', 'Chris Coyier', 'Tiffany Rayside', 'Burdeau', 'Joanna', 'Longlongtestname', 'Georges Pompi', 'Greg Adams', 'Gabrielle', 'Françoise', 'Leonard', 'Jeanne', 'Vous', 'abcdearhgeirgh', 'William Lémergi', 'Valérie Zard', 'mnopqouerhgiueghiksehg', 'blar bla bla', 'Johnny', 'Sasha Grey', 'Agnès Bailhache', 'Mozart', 'Bethoven', 'Schwarze', 'Antonio Banderas', 'Zhao Wei', 'Norman Reedus', 'Olivia Wilde', 'Lauren', 'Muriel', 'Jason Statham', 'Andrew Lincoln', 'Ethan Cohen', 'James', 'Vinnie Jones', 'Catherine Esta', 'Xavier', 'Murielle', 'Entreprise', 'Almodovar', 'Magritte', 'Vivaldi', 'Polémique', 'Paris', 'In Love', 'Merci', 'Soleil', 'Diable', 'Alain Bouc', 'Livre', '1 800', 'Modern', 'Centre', 'Terrifiant', 'Contemporain', 'Museum', 'Laboratoire', 'Artistique', 'Tonny', 'Yvan', 'Force', 'Automobile', 'Barak Obam', 'Patron', 'Singe', 'Connerie', 'Donald', 'Impressionnant', 'Relatif', 'Affair', 'Chat', 'Marian', 'Robert', 'John Doe', 'Caroline Roux', 'Aurélie Filippeti', 'Eva Joly', 'Linus Torvalds', 'Chris Coyier', 'Tiffany Rayside', 'Burdeau', 'Joanna', 'Longlongtestname', 'Georges Pompi', 'Greg Adams', 'Gabrielle', 'Françoise', 'Leonard', 'Jeanne', 'Vous', 'abcdearhgeirgh', 'William Lémergi', 'Valérie Zard', 'mnopqouerhgiueghiksehg', 'blar bla bla', 'Johnny', 'Sasha Grey', 'Agnès Bailhache', 'Mozart', 'Bethoven', 'Schwarze', 'Antonio Banderas', 'Zhao Wei', 'Norman Reedus', 'Olivia Wilde', 'Lauren', 'Muriel', 'Jason Statham', 'Andrew Lincoln', 'Ethan Cohen', 'James', 'Vinnie Jones', 'Catherine Esta', 'Xavier', 'Murielle', 'Entreprise', 'Almodovar', 'Magritte', 'Vivaldi', 'Polémique', 'Paris', 'In Love', 'Merci', 'Soleil', 'Diable', 'Alain Bouc', 'Livre', '1 800', 'Modern', 'Centre', 'Terrifiant', 'Contemporain', 'Museum', 'Laboratoire', 'Artistique', 'Tonny', 'Yvan', 'Force', 'Automobile', 'Barak Obam', 'Patron', 'Singe', 'Connerie', 'Donald', 'Impressionnant', 'Relatif', 'Affair', 'Chat', 'Marian'];

var strangeHash = function strangeHash(str) {
    var hash = 0;

if (str.length === 0) {
        return hash;
    }

for (var i = 0, len = str.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
        var chr = str.charCodeAt(i);
        hash = (hash << 11) - hash + chr;
        hash |= 0;
    }
window.CP.exitedLoop(1);

window.CP.exitedLoop(1);

return (new Array().join('') + Math.abs(hash)).slice(-10).replace(/0/g, ''); // Generate string with 8 chars without '0'
};

[].forEach.call(document.querySelectorAll('canvas'), function (c, i) {
    var ctx = c.getContext('2d'),
        h = strangeHash(names[i]);

ctx.translate(32, 32);
    ctx.rotate(Math.PI / 2);

for (var j = 0; j < 8; j++) {if (window.CP.shouldStopExecution(3)){break;}if (window.CP.shouldStopExecution(3)){break;}
        // Colors (Red, Green, Blue, Alpha) is here.
        var r = h[0] * 100 % 255,
            // This formula doesn't make sense
        g = h[j] * 100 % 255,
            // And this too...
        b = h[10 - j] * 100 % 255,
            // Too many strange ideas in this generator :)
        a = h[j] / 10;

ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';

// Coordinates of rectangle. Another strange thing. But result looks fine...
        var c1 = h[j] * h[j] % 16,
            c2 = h[j] * h[7] % 19,
            c3 = h[j] * h[0] % 12,
            c4 = h[j] * h[0] % 22;

// Some "normalization"
        if (c1 + c2 < 12) {
            c1 *= -2;
            c2 *= -2;
            c3 *= 2;
            c4 *= 2;
        }

// Some experiments here......
        var s = h[7] % 42 + 2;

for (var k = 0; k < 4 * s; k++) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;}
            ctx.fillRect(c1, c2, c3, c4);
            ctx.rotate(Math.PI / s);
        }
window.CP.exitedLoop(2);

window.CP.exitedLoop(2);

}
window.CP.exitedLoop(3);

window.CP.exitedLoop(3);

});

/////

CSS

body {
  background: #150f24;
  overflow: hidden;
  z-index: 0;
  background-mode: hard-light;
}

section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-48%, -50%);
          transform: translate(-48%, -50%);
}

canvas {
  margin-left: -.5em;
  position: relative;
  z-index: 5;
  -webkit-animation: rot 27.75s cubic-bezier(1, 5.03, 0.1, -2.22) infinite alternate;
          animation: rot 27.75s cubic-bezier(1, 5.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -28.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -28.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(8) {
  -webkit-animation-delay: -22.5s;
          animation-delay: -22.5s;
}
canvas:nth-child(10) {
  -webkit-animation-delay: -0.3987341772s;
          animation-delay: -0.3987341772s;
}
canvas :nth-child(11) {
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
canvas:nth-child(17) {
  -webkit-animation-delay: -1.4568965517s;
          animation-delay: -1.4568965517s;
  -webkit-animation: rot 15.75s 94.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 94.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(27) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
  -webkit-animation: rot 15.75s 78.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 78.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(4) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -60s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -60s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(10) {
  -webkit-animation-delay: -54s;
          animation-delay: -54s;
}
canvas:nth-child(12) {
  -webkit-animation-delay: -0.7974683544s;
          animation-delay: -0.7974683544s;
}
canvas :nth-child(13) {
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
canvas:nth-child(19) {
  -webkit-animation-delay: -3.4568965517s;
          animation-delay: -3.4568965517s;
  -webkit-animation: rot 15.75s 126s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 126s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(29) {
  -webkit-animation-delay: -34s;
          animation-delay: -34s;
  -webkit-animation: rot 15.75s 80.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 80.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(6) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -91.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -91.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(12) {
  -webkit-animation-delay: -85.5s;
          animation-delay: -85.5s;
}
canvas:nth-child(14) {
  -webkit-animation-delay: -1.1962025316s;
          animation-delay: -1.1962025316s;
}
canvas :nth-child(15) {
  -webkit-animation-delay: -10.5s;
          animation-delay: -10.5s;
}
canvas:nth-child(21) {
  -webkit-animation-delay: -5.4568965517s;
          animation-delay: -5.4568965517s;
  -webkit-animation: rot 15.75s 157.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 157.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(31) {
  -webkit-animation-delay: -65.5s;
          animation-delay: -65.5s;
  -webkit-animation: rot 15.75s 82.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 82.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(8) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -123s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -123s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(14) {
  -webkit-animation-delay: -117s;
          animation-delay: -117s;
}
canvas:nth-child(16) {
  -webkit-animation-delay: -1.5949367089s;
          animation-delay: -1.5949367089s;
}
canvas :nth-child(17) {
  -webkit-animation-delay: -14s;
          animation-delay: -14s;
}
canvas:nth-child(23) {
  -webkit-animation-delay: -7.4568965517s;
          animation-delay: -7.4568965517s;
  -webkit-animation: rot 15.75s 189s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 189s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(33) {
  -webkit-animation-delay: -97s;
          animation-delay: -97s;
  -webkit-animation: rot 15.75s 84.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 84.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -154.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -154.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(16) {
  -webkit-animation-delay: -148.5s;
          animation-delay: -148.5s;
}
canvas:nth-child(18) {
  -webkit-animation-delay: -1.9936708861s;
          animation-delay: -1.9936708861s;
}
canvas :nth-child(19) {
  -webkit-animation-delay: -17.5s;
          animation-delay: -17.5s;
}
canvas:nth-child(25) {
  -webkit-animation-delay: -9.4568965517s;
          animation-delay: -9.4568965517s;
  -webkit-animation: rot 15.75s 220.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 220.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(35) {
  -webkit-animation-delay: -128.5s;
          animation-delay: -128.5s;
  -webkit-animation: rot 15.75s 86.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 86.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(12) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -186s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -186s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(18) {
  -webkit-animation-delay: -180s;
          animation-delay: -180s;
}
canvas:nth-child(20) {
  -webkit-animation-delay: -2.3924050633s;
          animation-delay: -2.3924050633s;
}
canvas :nth-child(21) {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
canvas:nth-child(27) {
  -webkit-animation-delay: -11.4568965517s;
          animation-delay: -11.4568965517s;
  -webkit-animation: rot 15.75s 252s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 252s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(37) {
  -webkit-animation-delay: -160s;
          animation-delay: -160s;
  -webkit-animation: rot 15.75s 88.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 88.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(14) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -217.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -217.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(20) {
  -webkit-animation-delay: -211.5s;
          animation-delay: -211.5s;
}
canvas:nth-child(22) {
  -webkit-animation-delay: -2.7911392405s;
          animation-delay: -2.7911392405s;
}
canvas :nth-child(23) {
  -webkit-animation-delay: -24.5s;
          animation-delay: -24.5s;
}
canvas:nth-child(29) {
  -webkit-animation-delay: -13.4568965517s;
          animation-delay: -13.4568965517s;
  -webkit-animation: rot 15.75s 283.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 283.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(39) {
  -webkit-animation-delay: -191.5s;
          animation-delay: -191.5s;
  -webkit-animation: rot 15.75s 90.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 90.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(16) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -249s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -249s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(22) {
  -webkit-animation-delay: -243s;
          animation-delay: -243s;
}
canvas:nth-child(24) {
  -webkit-animation-delay: -3.1898734177s;
          animation-delay: -3.1898734177s;
}
canvas :nth-child(25) {
  -webkit-animation-delay: -28s;
          animation-delay: -28s;
}
canvas:nth-child(31) {
  -webkit-animation-delay: -15.4568965517s;
          animation-delay: -15.4568965517s;
  -webkit-animation: rot 15.75s 315s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 315s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(41) {
  -webkit-animation-delay: -223s;
          animation-delay: -223s;
  -webkit-animation: rot 15.75s 92.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 92.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(18) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -280.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -280.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(24) {
  -webkit-animation-delay: -274.5s;
          animation-delay: -274.5s;
}
canvas:nth-child(26) {
  -webkit-animation-delay: -3.5886075949s;
          animation-delay: -3.5886075949s;
}
canvas :nth-child(27) {
  -webkit-animation-delay: -31.5s;
          animation-delay: -31.5s;
}
canvas:nth-child(33) {
  -webkit-animation-delay: -17.4568965517s;
          animation-delay: -17.4568965517s;
  -webkit-animation: rot 15.75s 346.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 346.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(43) {
  -webkit-animation-delay: -254.5s;
          animation-delay: -254.5s;
  -webkit-animation: rot 15.75s 94.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 94.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(20) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -312s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -312s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(26) {
  -webkit-animation-delay: -306s;
          animation-delay: -306s;
}
canvas:nth-child(28) {
  -webkit-animation-delay: -3.9873417722s;
          animation-delay: -3.9873417722s;
}
canvas :nth-child(29) {
  -webkit-animation-delay: -35s;
          animation-delay: -35s;
}
canvas:nth-child(35) {
  -webkit-animation-delay: -19.4568965517s;
          animation-delay: -19.4568965517s;
  -webkit-animation: rot 15.75s 378s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 378s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(45) {
  -webkit-animation-delay: -286s;
          animation-delay: -286s;
  -webkit-animation: rot 15.75s 96.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 96.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(22) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -343.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -343.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(28) {
  -webkit-animation-delay: -337.5s;
          animation-delay: -337.5s;
}
canvas:nth-child(30) {
  -webkit-animation-delay: -4.3860759494s;
          animation-delay: -4.3860759494s;
}
canvas :nth-child(31) {
  -webkit-animation-delay: -38.5s;
          animation-delay: -38.5s;
}
canvas:nth-child(37) {
  -webkit-animation-delay: -21.4568965517s;
          animation-delay: -21.4568965517s;
  -webkit-animation: rot 15.75s 409.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 409.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(47) {
  -webkit-animation-delay: -317.5s;
          animation-delay: -317.5s;
  -webkit-animation: rot 15.75s 98.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 98.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(24) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -375s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -375s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(30) {
  -webkit-animation-delay: -369s;
          animation-delay: -369s;
}
canvas:nth-child(32) {
  -webkit-animation-delay: -4.7848101266s;
          animation-delay: -4.7848101266s;
}
canvas :nth-child(33) {
  -webkit-animation-delay: -42s;
          animation-delay: -42s;
}
canvas:nth-child(39) {
  -webkit-animation-delay: -23.4568965517s;
          animation-delay: -23.4568965517s;
  -webkit-animation: rot 15.75s 441s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 441s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(49) {
  -webkit-animation-delay: -349s;
          animation-delay: -349s;
  -webkit-animation: rot 15.75s 100.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 100.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(26) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -406.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -406.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(32) {
  -webkit-animation-delay: -400.5s;
          animation-delay: -400.5s;
}
canvas:nth-child(34) {
  -webkit-animation-delay: -5.1835443038s;
          animation-delay: -5.1835443038s;
}
canvas :nth-child(35) {
  -webkit-animation-delay: -45.5s;
          animation-delay: -45.5s;
}
canvas:nth-child(41) {
  -webkit-animation-delay: -25.4568965517s;
          animation-delay: -25.4568965517s;
  -webkit-animation: rot 15.75s 472.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 472.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(51) {
  -webkit-animation-delay: -380.5s;
          animation-delay: -380.5s;
  -webkit-animation: rot 15.75s 102.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 102.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(28) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -438s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -438s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(34) {
  -webkit-animation-delay: -432s;
          animation-delay: -432s;
}
canvas:nth-child(36) {
  -webkit-animation-delay: -5.582278481s;
          animation-delay: -5.582278481s;
}
canvas :nth-child(37) {
  -webkit-animation-delay: -49s;
          animation-delay: -49s;
}
canvas:nth-child(43) {
  -webkit-animation-delay: -27.4568965517s;
          animation-delay: -27.4568965517s;
  -webkit-animation: rot 15.75s 504s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 504s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(53) {
  -webkit-animation-delay: -412s;
          animation-delay: -412s;
  -webkit-animation: rot 15.75s 104.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 104.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(30) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -469.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -469.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(36) {
  -webkit-animation-delay: -463.5s;
          animation-delay: -463.5s;
}
canvas:nth-child(38) {
  -webkit-animation-delay: -5.9810126582s;
          animation-delay: -5.9810126582s;
}
canvas :nth-child(39) {
  -webkit-animation-delay: -52.5s;
          animation-delay: -52.5s;
}
canvas:nth-child(45) {
  -webkit-animation-delay: -29.4568965517s;
          animation-delay: -29.4568965517s;
  -webkit-animation: rot 15.75s 535.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 535.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(55) {
  -webkit-animation-delay: -443.5s;
          animation-delay: -443.5s;
  -webkit-animation: rot 15.75s 106.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 106.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(32) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -501s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -501s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(38) {
  -webkit-animation-delay: -495s;
          animation-delay: -495s;
}
canvas:nth-child(40) {
  -webkit-animation-delay: -6.3797468354s;
          animation-delay: -6.3797468354s;
}
canvas :nth-child(41) {
  -webkit-animation-delay: -56s;
          animation-delay: -56s;
}
canvas:nth-child(47) {
  -webkit-animation-delay: -31.4568965517s;
          animation-delay: -31.4568965517s;
  -webkit-animation: rot 15.75s 567s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 567s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(57) {
  -webkit-animation-delay: -475s;
          animation-delay: -475s;
  -webkit-animation: rot 15.75s 108.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 108.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(34) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -532.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -532.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(40) {
  -webkit-animation-delay: -526.5s;
          animation-delay: -526.5s;
}
canvas:nth-child(42) {
  -webkit-animation-delay: -6.7784810127s;
          animation-delay: -6.7784810127s;
}
canvas :nth-child(43) {
  -webkit-animation-delay: -59.5s;
          animation-delay: -59.5s;
}
canvas:nth-child(49) {
  -webkit-animation-delay: -33.4568965517s;
          animation-delay: -33.4568965517s;
  -webkit-animation: rot 15.75s 598.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 598.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(59) {
  -webkit-animation-delay: -506.5s;
          animation-delay: -506.5s;
  -webkit-animation: rot 15.75s 110.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 110.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(36) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -564s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -564s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(42) {
  -webkit-animation-delay: -558s;
          animation-delay: -558s;
}
canvas:nth-child(44) {
  -webkit-animation-delay: -7.1772151899s;
          animation-delay: -7.1772151899s;
}
canvas :nth-child(45) {
  -webkit-animation-delay: -63s;
          animation-delay: -63s;
}
canvas:nth-child(51) {
  -webkit-animation-delay: -35.4568965517s;
          animation-delay: -35.4568965517s;
  -webkit-animation: rot 15.75s 630s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 630s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(61) {
  -webkit-animation-delay: -538s;
          animation-delay: -538s;
  -webkit-animation: rot 15.75s 112.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 112.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(38) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -595.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -595.5s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(44) {
  -webkit-animation-delay: -589.5s;
          animation-delay: -589.5s;
}
canvas:nth-child(46) {
  -webkit-animation-delay: -7.5759493671s;
          animation-delay: -7.5759493671s;
}
canvas :nth-child(47) {
  -webkit-animation-delay: -66.5s;
          animation-delay: -66.5s;
}
canvas:nth-child(53) {
  -webkit-animation-delay: -37.4568965517s;
          animation-delay: -37.4568965517s;
  -webkit-animation: rot 15.75s 661.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 661.5s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(63) {
  -webkit-animation-delay: -569.5s;
          animation-delay: -569.5s;
  -webkit-animation: rot 15.75s 114.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 114.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(40) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: rott 15.75s -627s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
          animation: rott 15.75s -627s cubic-bezier(0.1, 1.03, 0.1, -2.22) infinite alternate;
}
canvas:nth-child(46) {
  -webkit-animation-delay: -621s;
          animation-delay: -621s;
}
canvas:nth-child(48) {
  -webkit-animation-delay: -7.9746835443s;
          animation-delay: -7.9746835443s;
}
canvas :nth-child(49) {
  -webkit-animation-delay: -70s;
          animation-delay: -70s;
}
canvas:nth-child(55) {
  -webkit-animation-delay: -39.4568965517s;
          animation-delay: -39.4568965517s;
  -webkit-animation: rot 15.75s 693s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 693s cubic-bezier(1, 2.33, 2, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(65) {
  -webkit-animation-delay: -601s;
          animation-delay: -601s;
  -webkit-animation: rot 15.75s 116.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 116.75s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(44) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 748s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 748s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(60) {
  -webkit-animation-delay: -684s;
          animation-delay: -684s;
}
canvas:nth-child(62) {
  -webkit-animation-delay: -36.4736842105s;
          animation-delay: -36.4736842105s;
}
canvas :nth-child(73) {
  -webkit-animation-delay: -77s;
          animation-delay: -77s;
}
canvas:nth-child(81) {
  -webkit-animation-delay: 77s;
          animation-delay: 77s;
  -webkit-animation: rot 15.75s 756s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 756s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(48) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 811s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 811s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(64) {
  -webkit-animation-delay: -747s;
          animation-delay: -747s;
}
canvas:nth-child(66) {
  -webkit-animation-delay: -39.7894736842s;
          animation-delay: -39.7894736842s;
}
canvas :nth-child(77) {
  -webkit-animation-delay: -84s;
          animation-delay: -84s;
}
canvas:nth-child(85) {
  -webkit-animation-delay: 84s;
          animation-delay: 84s;
  -webkit-animation: rot 15.75s 819s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 819s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(52) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 874s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 874s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(68) {
  -webkit-animation-delay: -810s;
          animation-delay: -810s;
}
canvas:nth-child(70) {
  -webkit-animation-delay: -43.1052631579s;
          animation-delay: -43.1052631579s;
}
canvas :nth-child(81) {
  -webkit-animation-delay: -91s;
          animation-delay: -91s;
}
canvas:nth-child(89) {
  -webkit-animation-delay: 91s;
          animation-delay: 91s;
  -webkit-animation: rot 15.75s 882s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 882s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(56) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 937s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 937s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(72) {
  -webkit-animation-delay: -873s;
          animation-delay: -873s;
}
canvas:nth-child(74) {
  -webkit-animation-delay: -46.4210526316s;
          animation-delay: -46.4210526316s;
}
canvas :nth-child(85) {
  -webkit-animation-delay: -98s;
          animation-delay: -98s;
}
canvas:nth-child(93) {
  -webkit-animation-delay: 98s;
          animation-delay: 98s;
  -webkit-animation: rot 15.75s 945s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 945s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(60) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 1000s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 1000s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(76) {
  -webkit-animation-delay: -936s;
          animation-delay: -936s;
}
canvas:nth-child(78) {
  -webkit-animation-delay: -49.7368421053s;
          animation-delay: -49.7368421053s;
}
canvas :nth-child(89) {
  -webkit-animation-delay: -105s;
          animation-delay: -105s;
}
canvas:nth-child(97) {
  -webkit-animation-delay: 105s;
          animation-delay: 105s;
  -webkit-animation: rot 15.75s 1008s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 1008s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(64) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 1063s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 1063s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(80) {
  -webkit-animation-delay: -999s;
          animation-delay: -999s;
}
canvas:nth-child(82) {
  -webkit-animation-delay: -53.0526315789s;
          animation-delay: -53.0526315789s;
}
canvas :nth-child(93) {
  -webkit-animation-delay: -112s;
          animation-delay: -112s;
}
canvas:nth-child(101) {
  -webkit-animation-delay: 112s;
          animation-delay: 112s;
  -webkit-animation: rot 15.75s 1071s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 1071s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(68) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 1126s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 1126s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(84) {
  -webkit-animation-delay: -1062s;
          animation-delay: -1062s;
}
canvas:nth-child(86) {
  -webkit-animation-delay: -56.3684210526s;
          animation-delay: -56.3684210526s;
}
canvas :nth-child(97) {
  -webkit-animation-delay: -119s;
          animation-delay: -119s;
}
canvas:nth-child(105) {
  -webkit-animation-delay: 119s;
          animation-delay: 119s;
  -webkit-animation: rot 15.75s 1134s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 1134s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(72) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 1189s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 1189s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(88) {
  -webkit-animation-delay: -1125s;
          animation-delay: -1125s;
}
canvas:nth-child(90) {
  -webkit-animation-delay: -59.6842105263s;
          animation-delay: -59.6842105263s;
}
canvas :nth-child(101) {
  -webkit-animation-delay: -126s;
          animation-delay: -126s;
}
canvas:nth-child(109) {
  -webkit-animation-delay: 126s;
          animation-delay: 126s;
  -webkit-animation: rot 15.75s 1197s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 1197s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(76) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 1252s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 1252s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(92) {
  -webkit-animation-delay: -1188s;
          animation-delay: -1188s;
}
canvas:nth-child(94) {
  -webkit-animation-delay: -63s;
          animation-delay: -63s;
}
canvas :nth-child(105) {
  -webkit-animation-delay: -133s;
          animation-delay: -133s;
}
canvas:nth-child(113) {
  -webkit-animation-delay: 133s;
          animation-delay: 133s;
  -webkit-animation: rot 15.75s 1260s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 1260s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(80) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 31.5s 1315s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
          animation: rott 31.5s 1315s cubic-bezier(0.01, 21.03, 1, -12.22) infinite alternate;
}
canvas:nth-child(96) {
  -webkit-animation-delay: -1251s;
          animation-delay: -1251s;
}
canvas:nth-child(98) {
  -webkit-animation-delay: -66.3157894737s;
          animation-delay: -66.3157894737s;
}
canvas :nth-child(109) {
  -webkit-animation-delay: -140s;
          animation-delay: -140s;
}
canvas:nth-child(117) {
  -webkit-animation-delay: 140s;
          animation-delay: 140s;
  -webkit-animation: rot 15.75s 1323s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 1323s cubic-bezier(1, 4.34, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(81) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1272.75s linear infinite alternate;
          animation: rott 15.75s -1272.75s linear infinite alternate;
}
canvas:nth-child(84) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1320s linear infinite alternate;
          animation: rott 15.75s -1320s linear infinite alternate;
}
canvas:nth-child(87) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1367.25s linear infinite alternate;
          animation: rott 15.75s -1367.25s linear infinite alternate;
}
canvas:nth-child(90) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1414.5s linear infinite alternate;
          animation: rott 15.75s -1414.5s linear infinite alternate;
}
canvas:nth-child(93) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1461.75s linear infinite alternate;
          animation: rott 15.75s -1461.75s linear infinite alternate;
}
canvas:nth-child(96) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1509s linear infinite alternate;
          animation: rott 15.75s -1509s linear infinite alternate;
}
canvas:nth-child(99) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1556.25s linear infinite alternate;
          animation: rott 15.75s -1556.25s linear infinite alternate;
}
canvas:nth-child(102) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1603.5s linear infinite alternate;
          animation: rott 15.75s -1603.5s linear infinite alternate;
}
canvas:nth-child(105) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1650.75s linear infinite alternate;
          animation: rott 15.75s -1650.75s linear infinite alternate;
}
canvas:nth-child(108) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1698s linear infinite alternate;
          animation: rott 15.75s -1698s linear infinite alternate;
}
canvas:nth-child(111) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1745.25s linear infinite alternate;
          animation: rott 15.75s -1745.25s linear infinite alternate;
}
canvas:nth-child(114) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1792.5s linear infinite alternate;
          animation: rott 15.75s -1792.5s linear infinite alternate;
}
canvas:nth-child(117) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1839.75s linear infinite alternate;
          animation: rott 15.75s -1839.75s linear infinite alternate;
}
canvas:nth-child(120) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rott 15.75s -1887s linear infinite alternate;
          animation: rott 15.75s -1887s linear infinite alternate;
}
canvas:nth-child(121) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1894.75s linear infinite alternate;
          animation: rott 15.75s -1894.75s linear infinite alternate;
}
canvas:nth-child(122) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1910.5s linear infinite alternate;
          animation: rott 15.75s -1910.5s linear infinite alternate;
}
canvas:nth-child(123) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1926.25s linear infinite alternate;
          animation: rott 15.75s -1926.25s linear infinite alternate;
}
canvas:nth-child(124) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1942s linear infinite alternate;
          animation: rott 15.75s -1942s linear infinite alternate;
}
canvas:nth-child(124) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -29294s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -29294s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(130) {
  -webkit-animation-delay: -1944s;
          animation-delay: -1944s;
}
canvas:nth-child(132) {
  -webkit-animation-delay: -24.7215189873s;
          animation-delay: -24.7215189873s;
}
canvas :nth-child(133) {
  -webkit-animation-delay: -217s;
          animation-delay: -217s;
}
canvas:nth-child(139) {
  -webkit-animation-delay: -123.4568965517s;
          animation-delay: -123.4568965517s;
  -webkit-animation: rot 15.75s 2016s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2016s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(125) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1957.75s linear infinite alternate;
          animation: rott 15.75s -1957.75s linear infinite alternate;
}
canvas:nth-child(126) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1973.5s linear infinite alternate;
          animation: rott 15.75s -1973.5s linear infinite alternate;
}
canvas:nth-child(127) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -1989.25s linear infinite alternate;
          animation: rott 15.75s -1989.25s linear infinite alternate;
}
canvas:nth-child(128) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2005s linear infinite alternate;
          animation: rott 15.75s -2005s linear infinite alternate;
}
canvas:nth-child(128) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -30239s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -30239s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(134) {
  -webkit-animation-delay: -2007s;
          animation-delay: -2007s;
}
canvas:nth-child(136) {
  -webkit-animation-delay: -25.5189873418s;
          animation-delay: -25.5189873418s;
}
canvas :nth-child(137) {
  -webkit-animation-delay: -224s;
          animation-delay: -224s;
}
canvas:nth-child(143) {
  -webkit-animation-delay: -127.4568965517s;
          animation-delay: -127.4568965517s;
  -webkit-animation: rot 15.75s 2079s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2079s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(129) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2020.75s linear infinite alternate;
          animation: rott 15.75s -2020.75s linear infinite alternate;
}
canvas:nth-child(130) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2036.5s linear infinite alternate;
          animation: rott 15.75s -2036.5s linear infinite alternate;
}
canvas:nth-child(131) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2052.25s linear infinite alternate;
          animation: rott 15.75s -2052.25s linear infinite alternate;
}
canvas:nth-child(132) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2068s linear infinite alternate;
          animation: rott 15.75s -2068s linear infinite alternate;
}
canvas:nth-child(132) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -31184s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -31184s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(138) {
  -webkit-animation-delay: -2070s;
          animation-delay: -2070s;
}
canvas:nth-child(140) {
  -webkit-animation-delay: -26.3164556962s;
          animation-delay: -26.3164556962s;
}
canvas :nth-child(141) {
  -webkit-animation-delay: -231s;
          animation-delay: -231s;
}
canvas:nth-child(147) {
  -webkit-animation-delay: -131.4568965517s;
          animation-delay: -131.4568965517s;
  -webkit-animation: rot 15.75s 2142s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2142s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(133) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2083.75s linear infinite alternate;
          animation: rott 15.75s -2083.75s linear infinite alternate;
}
canvas:nth-child(134) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2099.5s linear infinite alternate;
          animation: rott 15.75s -2099.5s linear infinite alternate;
}
canvas:nth-child(135) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2115.25s linear infinite alternate;
          animation: rott 15.75s -2115.25s linear infinite alternate;
}
canvas:nth-child(136) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2131s linear infinite alternate;
          animation: rott 15.75s -2131s linear infinite alternate;
}
canvas:nth-child(136) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -32129s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -32129s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(142) {
  -webkit-animation-delay: -2133s;
          animation-delay: -2133s;
}
canvas:nth-child(144) {
  -webkit-animation-delay: -27.1139240506s;
          animation-delay: -27.1139240506s;
}
canvas :nth-child(145) {
  -webkit-animation-delay: -238s;
          animation-delay: -238s;
}
canvas:nth-child(151) {
  -webkit-animation-delay: -135.4568965517s;
          animation-delay: -135.4568965517s;
  -webkit-animation: rot 15.75s 2205s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2205s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(137) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2146.75s linear infinite alternate;
          animation: rott 15.75s -2146.75s linear infinite alternate;
}
canvas:nth-child(138) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2162.5s linear infinite alternate;
          animation: rott 15.75s -2162.5s linear infinite alternate;
}
canvas:nth-child(139) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2178.25s linear infinite alternate;
          animation: rott 15.75s -2178.25s linear infinite alternate;
}
canvas:nth-child(140) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2194s linear infinite alternate;
          animation: rott 15.75s -2194s linear infinite alternate;
}
canvas:nth-child(140) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -33074s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -33074s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(146) {
  -webkit-animation-delay: -2196s;
          animation-delay: -2196s;
}
canvas:nth-child(148) {
  -webkit-animation-delay: -27.9113924051s;
          animation-delay: -27.9113924051s;
}
canvas :nth-child(149) {
  -webkit-animation-delay: -245s;
          animation-delay: -245s;
}
canvas:nth-child(155) {
  -webkit-animation-delay: -139.4568965517s;
          animation-delay: -139.4568965517s;
  -webkit-animation: rot 15.75s 2268s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2268s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(141) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2209.75s linear infinite alternate;
          animation: rott 15.75s -2209.75s linear infinite alternate;
}
canvas:nth-child(142) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2225.5s linear infinite alternate;
          animation: rott 15.75s -2225.5s linear infinite alternate;
}
canvas:nth-child(143) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2241.25s linear infinite alternate;
          animation: rott 15.75s -2241.25s linear infinite alternate;
}
canvas:nth-child(144) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2257s linear infinite alternate;
          animation: rott 15.75s -2257s linear infinite alternate;
}
canvas:nth-child(144) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -34019s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -34019s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(150) {
  -webkit-animation-delay: -2259s;
          animation-delay: -2259s;
}
canvas:nth-child(152) {
  -webkit-animation-delay: -28.7088607595s;
          animation-delay: -28.7088607595s;
}
canvas :nth-child(153) {
  -webkit-animation-delay: -252s;
          animation-delay: -252s;
}
canvas:nth-child(159) {
  -webkit-animation-delay: -143.4568965517s;
          animation-delay: -143.4568965517s;
  -webkit-animation: rot 15.75s 2331s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2331s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(145) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2272.75s linear infinite alternate;
          animation: rott 15.75s -2272.75s linear infinite alternate;
}
canvas:nth-child(146) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2288.5s linear infinite alternate;
          animation: rott 15.75s -2288.5s linear infinite alternate;
}
canvas:nth-child(147) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2304.25s linear infinite alternate;
          animation: rott 15.75s -2304.25s linear infinite alternate;
}
canvas:nth-child(148) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2320s linear infinite alternate;
          animation: rott 15.75s -2320s linear infinite alternate;
}
canvas:nth-child(148) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -34964s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -34964s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(154) {
  -webkit-animation-delay: -2322s;
          animation-delay: -2322s;
}
canvas:nth-child(156) {
  -webkit-animation-delay: -29.5063291139s;
          animation-delay: -29.5063291139s;
}
canvas :nth-child(157) {
  -webkit-animation-delay: -259s;
          animation-delay: -259s;
}
canvas:nth-child(163) {
  -webkit-animation-delay: -147.4568965517s;
          animation-delay: -147.4568965517s;
  -webkit-animation: rot 15.75s 2394s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2394s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(149) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2335.75s linear infinite alternate;
          animation: rott 15.75s -2335.75s linear infinite alternate;
}
canvas:nth-child(150) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2351.5s linear infinite alternate;
          animation: rott 15.75s -2351.5s linear infinite alternate;
}
canvas:nth-child(151) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2367.25s linear infinite alternate;
          animation: rott 15.75s -2367.25s linear infinite alternate;
}
canvas:nth-child(152) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2383s linear infinite alternate;
          animation: rott 15.75s -2383s linear infinite alternate;
}
canvas:nth-child(152) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: rot 15.75s -35909s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
          animation: rot 15.75s -35909s cubic-bezier(1, 12.33, 0.001, -19.22) infinite alternate;
}
canvas:nth-child(158) {
  -webkit-animation-delay: -2385s;
          animation-delay: -2385s;
}
canvas:nth-child(160) {
  -webkit-animation-delay: -30.3037974684s;
          animation-delay: -30.3037974684s;
}
canvas :nth-child(161) {
  -webkit-animation-delay: -266s;
          animation-delay: -266s;
}
canvas:nth-child(167) {
  -webkit-animation-delay: -151.4568965517s;
          animation-delay: -151.4568965517s;
  -webkit-animation: rot 15.75s 2457s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
          animation: rot 15.75s 2457s cubic-bezier(1, 2.33, 0.001, -9.22) infinite alternate;
}
canvas:nth-child(153) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2398.75s linear infinite alternate;
          animation: rott 15.75s -2398.75s linear infinite alternate;
}
canvas:nth-child(154) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation: rott 15.75s -2414.5s linear infinite alternate;
          animation: rott 15.75s -2414.5s linear infinite alternate;
}

@-webkit-keyframes rot {
  to {
    -webkit-filter: hue-rotate(360deg) brightness(0.81);
            filter: hue-rotate(360deg) brightness(0.81);
    -webkit-transform: rotate(360deg) scale(0.9);
            transform: rotate(360deg) scale(0.9);
  }
}

@keyframes rot {
  to {
    -webkit-filter: hue-rotate(360deg) brightness(0.81);
            filter: hue-rotate(360deg) brightness(0.81);
    -webkit-transform: rotate(360deg) scale(0.9);
            transform: rotate(360deg) scale(0.9);
  }
}
@-webkit-keyframes rott {
  to {
    -webkit-filter: hue-rotate(60deg) contrast(1.1);
            filter: hue-rotate(60deg) contrast(1.1);
    -webkit-transform: rotate(-360deg) scale(1.2);
            transform: rotate(-360deg) scale(1.2);
  }
}
@keyframes rott {
  to {
    -webkit-filter: hue-rotate(60deg) contrast(1.1);
            filter: hue-rotate(60deg) contrast(1.1);
    -webkit-transform: rotate(-360deg) scale(1.2);
            transform: rotate(-360deg) scale(1.2);
  }
}
#screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-filter: blur(15px) contrast(3);
          filter: blur(15px) contrast(3);
}

svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-blend-mode: difference;
}

stop {
  -webkit-animation: colors 5s infinite;
          animation: colors 5s infinite;
}

.stop-2 {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}

.stop-3 {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

@-webkit-keyframes colors {
  15% {
    stop-color: rgba(220, 20, 60, 0.2);
  }
  30% {
    stop-color: rgba(255, 215, 0, 0.2);
  }
  45% {
    stop-color: rgba(0, 128, 128, 0.2);
  }
  60% {
    stop-color: rgba(154, 205, 50, 0.2);
  }
  75% {
    stop-color: rgba(255, 69, 0, 0.2);
  }
  90% {
    stop-color: rgba(128, 0, 128, 0.2);
  }
}

@keyframes colors {
  15% {
    stop-color: rgba(220, 20, 60, 0.2);
  }
  30% {
    stop-color: rgba(255, 215, 0, 0.2);
  }
  45% {
    stop-color: rgba(0, 128, 128, 0.2);
  }
  60% {
    stop-color: rgba(154, 205, 50, 0.2);
  }
  75% {
    stop-color: rgba(255, 69, 0, 0.2);
  }
  90% {
    stop-color: rgba(128, 0, 128, 0.2);
  }
}
circle {
  stroke-width: 5px;
  stroke-dasharray: 4px 14px;
  stroke: url(#grad--linear-1);
  fill: none;
  -webkit-animation: stroke-width 3s infinite;
          animation: stroke-width 3s infinite;
}

.circle-1 {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}

@-webkit-keyframes stroke-width {
  50% {
    stroke-width: 2px;
  }
}

@keyframes stroke-width {
  50% {
    stroke-width: 2px;
  }
}

HTML

Recommendation

Join Effecthub.com