React implementation of the CSS Tricks v15 website header.

CSSTricksV15Header.js

import React, { Component } from 'react';

export default class CSSTricksHeader extends Component {
  constructor(props) {
    super(props);

    this.state = {
      downFacingPoints: "M-4,-4 L1004,-4 L1004,90 L804,90 L604,90 L404,90 L204,90 L-4,90 L-4,90 L-4,-4 Z"
    };
  }

  componentDidMount() { this.randomizeBackgrounds(); }

  randomizeHeader() {
    let newPoints = this.generateRandomPoints(120, 190);
    this.setState({
      downFacingPoints: `M-4,-4 L1004,-4 L1004,100 L${newPoints.a} L${newPoints.b} L${newPoints.c} L${newPoints.d} L${newPoints.e} L-4,100 L-4,-4 Z`
    });
  }

  randomizeBackgrounds() {
    this.randomizeHeader();
    this.requestInterval(() => this.randomizeHeader(), 2000);
  }

  requestInterval(fn, delay) {
    let requestAnimFrame = (() => {
        return window.requestAnimationFrame || ((callback, element) => window.setTimeout(callback, 1000 / 60));
      })(),
      start = new Date().getTime(),
      handle = {};

    function loop() {
      handle.value = requestAnimFrame(loop);

      let current = new Date().getTime(),
          delta = current - start;

      if (delta >= delay) {
        fn.call();
        start = new Date().getTime();
      }
    }
    handle.value = requestAnimFrame(loop);
    return handle;
  }

  generateRandomPoints(minSpread, maxSpread) {
    function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }

    let points = {};
    points.a = `${getRandomInt(800, 1000)},${getRandomInt(minSpread, maxSpread)}`;
    points.b = `${getRandomInt(600, 800)},${getRandomInt(minSpread, maxSpread)}`;
    points.c = `${getRandomInt(400, 600)},${getRandomInt(minSpread, maxSpread)}`;
    points.d = `${getRandomInt(200, 400)},${getRandomInt(minSpread, maxSpread)}`;
    points.e = `${getRandomInt(0, 200)},${getRandomInt(minSpread, maxSpread)}`;
    return points;
  }

  render() {
    return (
      <svg viewBox="0 0 1000 200" preserveAspectRatio="none" style={{ width: '100%', height: '150px' }}>
        <defs>
          <linearGradient id="header-gradient" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#FBDA61"/>
            <stop offset="100%" stopColor="#F76B1C"/>
          </linearGradient>
        </defs>
        <path
          style={{ stroke: 'white', strokeWidth: 8, transition: '1s' }}
          fill="url(#header-gradient)"
          d={this.state.downFacingPoints}/>
      </svg>
    );
  }
}