JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<!-- http://jsfiddle.net/umaar/fWSUk/ -->
<div id="canvas-container" >
    <canvas id="sineCanvas"  width="1024" height="300"></canvas>
</div>

CSS

body {
    height: 100%;
    width: 100%;
    background: #1b1d21;

background-image: url(http://www.transparenttextures.com/patterns/carbon-fibre.png);
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

}

JavaScript

(function () {

    var unit= 50,canvas, context, canvas2, context2,
        height, width, xAxis, yAxis,
        draw;

    /**
     * Init function.Initialize variables and begin the animation.
     */
    function init() {

        canvas = document.getElementById("sineCanvas");
        context = canvas.getContext("2d");

        height = canvas.height;
        width = canvas.width;

        xAxis = Math.floor(height / 2);
        yAxis = Math.floor(width / 4);

        context.save();
        draw();

    }

    /**
     * Draw animation function.
     * 
     * This function draws one frame of the animation, waits 25ms, and then calls
     * itself again.
     */
    draw = function () {
        // Clear the canvas
        context.clearRect(0, 0, width, height);
        
        // BLUE gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0, 'rgba(189, 106, 155, 1.000)');
        grd.addColorStop(1, 'rgba(189, 106, 155, 0.00)');
        context.strokeStyle = grd;
        context.lineWidth = 2;
        // BLUE sine
        context.beginPath();
        drawSine(draw.t, unit, 0, 1);
        context.stroke();
        //BLUE plane
        drawPlane(draw.t, unit, 0, 1);
        
        //GREEN gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0, 'rgba(151, 204, 18, 1.000)');
        grd.addColorStop(1, 'rgba(151, 204, 18, 0.000)');
        context.strokeStyle = grd;
        // GREEN sine
        context.beginPath();
        drawSine(draw.t, unit*2, 50, -1);
        context.stroke();
        // GREEN plane
        drawPlane(draw.t, unit*2, 50, -1 );
        
        //YELLOW Gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0,  'rgba(245, 223, 22, 1.000)');
        grd.addColorStop(1, 'rgba(245, 223, 22, 0.0)');
        context.strokeStyle = grd;
        //YELLOW sine
       ...