JSFiddle - React, Tailwind, and code Playground

by deepak datwani

HTML

<canvas id="bgcanvas"></canvas>
<script>
$(document).ready(function(){
    var config = {
        
    };
    $("#bgcanvas").ribbon(config);
});
</script>

JavaScript

// PLUGIN BELOW


(function($) {
    $.fn.ribbon = function(options) {
        var opts = $.extend({}, $.fn.ribbon.defaults, options);
        var cache = {},canvas,context,container,brush,painters,unpainters,timers,mouseX,mouseY;
        return this.each(function() {
            //start functionality
            container = $(this).parent();
            canvas = this;
            context = this.getContext('2d');
            canvas.style.cursor = 'crosshair';
            $(this).attr("width",opts.screenWidth).attr("height",opts.screenHeight)
            painters = [];
            unpainters = [];
            timers = [];
            brush = init(this.context);
            canvas.addEventListener('mousemove', onWindowMouseMove, false);
            window.addEventListener('resize', onWindowResize, false);
            document.addEventListener('mouseout', onDocumentMouseOut, false);
            canvas.addEventListener('mouseover', onCanvasMouseOver, false);
            onWindowResize(null);
        });
        function init() {
            context = context;
            mouseX = opts.screenWidth / 2;
            mouseY = opts.screenHeight / 2;
            for(var i = 0; i < opts.strokes; i++) {
                var ease = Math.random() * 0.05 + opts.easing;
                painters.push({
                    dx : opts.screenWidth / 2,
                    dy : opts.screenHeight / 2,
                    ax : 0,
                    ay : 0,
                    div : 0.1,
                    ease : ease
                });
            }
            this.interval = setInterval(update, opts.refreshRate);
            function update() {
                var i;
                context.lineWidth = opts.brushSize;
                context.strokeStyle = "rgba(" + opts.color[0] + ", " + opts.color[1] + ", " + opts.color[2] + ", " + opts.brushPressure + ")";
                for( i = 0; i < painters.length; i++) {
                    context.beginPath();
                    var dx =...