JSFiddle - React, Tailwind, and code Playground

by Voron

JavaScript

var v = 2;                // інтенсивність появи сердечок, більше  v - сердечка з'являтимусть рідше
    var max_heards = 30;    // максимум сердечок на сторінці
    var t = 2;                // час анімації в секундах
    var start_height = 2;    // початкова висота сердечка в пікселях
    var end_height = 30;    // кінцева висота сердечка в пікселях
    var random = 25;        // випадкова збивка сердечка
    var start_x = 0;        // збивка сердечка по x відносно курсора
    var start_y = 0;        // збивка сердечка по y відносно курсора

    var j = 1;
    var canvass = [];

    if ( !window.requestAnimationFrame ) {
        window.requestAnimationFrame = ( function() {
            return window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
                window.setTimeout( callback, 1000 / 60 ); // це рудимент але не став його забирати
            };
        })();
    }

    document.addEventListener('mousemove', canvas, false);

    function canvas(event) {    //     створюємо новий канвас
        j++;
        if (j % v != 0) return true;
        var canv = document.createElement('canvas');
            canv.style.left = ( ( event.X || ( event.clientX + ( document.documentElement.scrollLeft ||  document.body.scrollLeft ))) - end_height / 2 + start_x + Math.floor((Math.random() - 0.5 ) * (random+1)) ) + 'px';
            canv.style.top = ( ( event.Y || ( event.clientY + ( document.documentElement.scrollTop ||  document.body.scrollTop ))) - end_height + start_y + Math.floor((Math.random() - 0.5 ) * (random+1)) ) + 'px';
        canv.width = end_height;
        canv.height = end_height;
        canv.style.position = 'absolute';
        canv.style.zindex = '-1';
        var ctx = canv.getContext('2d');
       ...