JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<svg>
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(242, 112, 156);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255, 148, 114);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect />
</svg>

CSS

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

rect {
    fill: url(#grad);
}

JavaScript

var svg = document.querySelector('svg');
var rect = svg.querySelector('rect');
var height = 50;

window.addEventListener('resize', initSvg);
initSvg();

function initSvg() {
    svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${height}`);
    svg.setAttribute('width', window.innerWidth);
    svg.setAttribute('height', height);
    // rect.setAttribute('width', window.innerWidth);
    rect.setAttribute('height', height);
    rect.setAttribute('x', 0);
    rect.setAttribute('y', 0);
}


// Fade in over 2000 ms = 2 seconds.
var FADE_DURATION = 10 * 1000;

// -1 is simply a flag to indicate if we are rendering the very 1st frame
var startTime = -1.0;

// Function to render current frame (whatever frame that may be)
function render(currTime) {

    // How opaque should head1 be?  Its fade started at currTime=0.
    // Over FADE_DURATION ms, opacity goes from 0 to 1
    var width = Math.ceil((currTime / FADE_DURATION) * window.innerWidth);
    console.log('width', width);
    rect.setAttribute('width', width);
}

// Function to 
function eachFrame() {
    // Time that animation has been running (in ms)
    // Uncomment the console.log function to view how quickly 
    // the timeRunning updates its value (may affect performance)
    var timeRunning = (new Date()).getTime() - startTime;
    // console.log('var timeRunning = '+timeRunning+'ms');
    if (startTime < 0) {
        // This branch: executes for the first frame only.
        // it sets the startTime, then renders at currTime = 0.0
        startTime = (new Date()).getTime();
        render(0.0);
    } else if (timeRunning < FADE_DURATION) {
        // This branch: renders every frame, other than the 1st frame,
        // with the new timeRunning value.
        render(timeRunning);
    } else {
        return;
    }

    // Now we're done rendering one frame.
    // So we make a request to the browser to execute the next
    // animation frame, and the browser optimizes the rest.
    // This happens very...