willaengine/resources/js/Modules/Authentication/components/Background.vue

<template>
    <div>
        <div class="backgrounds">
            <canvas id="canvas__bg" width="32" height="32"></canvas>
            <div class="overlay gradient"></div>
            <div class="overlay vignette"></div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        moveGradient: function() {
            var c = document.getElementById("canvas__bg");
            var $ = c.getContext("2d");

            var col = function(x, y, r, g, b) {
                $.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                $.fillRect(x, y, 1, 1);
            };

            var R = function(x, y, t) {
                return Math.floor(130 + 64 * Math.cos((x * x - y * y) / 300 + t));
            };
            var G = function(x, y, t) {
                return Math.floor(
                    0 +
                    64 *
                    Math.sin(
                        (x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3)) / 300
                    )
                );
            };
            var B = function(x, y, t) {
                return Math.floor(
                    250 +
                    64 *
                    Math.sin(
                        5 * Math.sin(t / 9) +
                        ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100
                    )
                );
            };

            var t = 0;

            var run = function() {
                for (let x = 0; x <= 35; x++) {
                    for (let y = 0; y <= 35; y++) {
                        col(x, y, R(x, y, t), G(x, y, t), B(x, y, t));
                    }
                }
                t = t + 0.03;
                window.requestAnimationFrame(run);
            };
            (function() {
                setTimeout(function() {
                    run(); // canvas background animation
                }, 100);
            })();
        }
    },

    mounted() {
        this.moveGradient();
    }
};
</script>

<style lang="scss" scoped>
#canvas__bg,
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.backgrounds {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.overlay.gradient {
    background: #17a2b8;
    /* Old browsers */
    // background: -moz-linear-gradient( -45deg, #310089 0%, #5b007c 100%);
    /* FF3.6-15 */
    // background: -webkit-linear-gradient( -45deg, #310089 0%, #5b007c 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #000 0%, #ee3552 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17a2b8', endColorstr='#ee3552', GradientType=1);
    /*   IE6-9 fallback on horizontal gradient */
    opacity: 0.59;
}

.overlay.vignette {
    // background: -moz-radial-gradient( center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    /* FF3.6-15 */
    // background: -webkit-radial-gradient( center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    opacity: 0.6;
    transition: opacity 4s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    -webkit-transition: opacity 4s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}
</style>